Jo_SQSP Posted November 17, 2021 Share Posted November 17, 2021 Have you ever heard of the term “mobile-first design”? It’s a common concept among web designers who want to stay ahead of the curve on the technologies that we use every day to view sites on the Internet. The philosophy contained within mobile-first design is called “progressive advancement,” which dictates that you should design your web presence with smaller screens in mind first, which in turn makes it easier for you to progressively move on to larger screens. According to data shared by the AdobeXD Ideas blog, two billion people currently access the internet on their mobile devices, and that number is expected to jump 72.5% in the next three years. That’s a lot of people to think about! In essence, thinking about mobile-first design forces you to strategize and prioritize your content so that it is leaner and more to the point, to use headings strategically in order to create a visual hierarchy, reduce the number of links in your navigation to fit a smaller screen, use fonts that prioritize readability, and to use white spaces to your advantage for a cleaner layout. What are your best practices for designing more mobile friendly sites? Share your ideas below! Gamer and antovicodg 1 1 Link to comment
paul2009 Posted November 17, 2021 Share Posted November 17, 2021 This is an interesting subject choice because it isn't possible to practice Mobile First Design on Squarespace yet - at least not without a lot of code or a no-code pay-monthly add-on. The Squarespace platform doesn't allow you enough control over mobile layouts at present as it decides the mobile layout for itself. I'm really looking forward to the day when the editor is updated so that we can build mobile sites more easily on the platform. Something to look forward to in 2022. 🤞 JordanKH, jenneb, cmancuso and 2 others 5 Improve your online store with our extensions.About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links.Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)Buy me a coffee Link to comment
antovicodg Posted November 2, 2022 Share Posted November 2, 2022 I was wonder the same Link to comment
paul2009 Posted November 2, 2022 Share Posted November 2, 2022 In 2022, Squarespace brought us Fluid Engine, and it is now possible to design a completely independent mobile layout for each page by arranging the mobile layout and resize its blocks independently of the desktop layout. PANTONIO and Spark_plugin 2 Improve your online store with our extensions.About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links.Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)Buy me a coffee Link to comment
SCAgency Posted April 21 Share Posted April 21 My biggest issue is that you have to do a lot of tweaking to the mobile design with positioning and spacing. On platforms like WordPress with Divi, it intelligently lays out the responsive flow and still allows you to tweak it. This is a much faster approach that how Squarespace currently handles it. On the current site I am building in SS I need to tighten up massive gaps between column content on mobile. Just a lot of extra steps per section per page. VisualNotes 1 Link to comment
davidindigo Posted May 3 Share Posted May 3 here are some best practices for mobile styling in web design: Keep it simple: Use a simple and minimalistic design to make your website easy to navigate and read on mobile devices. Use a responsive design: Make sure your website is responsive to different screen sizes and device orientations. This will ensure that your website is easy to view and use on all devices. Prioritize content: Make sure your website's content is easily accessible and readable on mobile devices. Consider using larger fonts and avoiding long paragraphs. Use larger touch targets: Make sure your buttons and links are big enough for users to easily click on with their fingers. This will improve the user experience on mobile devices. Optimize images: Use optimized images to reduce load times and improve the website's performance on mobile devices. Use mobile-friendly navigation: Use simple and intuitive navigation that is easy to use on mobile devices. Consider using a hamburger menu or tabbed navigation. Test your website: Test your website on different mobile devices and screen sizes to ensure it looks and works correctly. This will help you identify any issues and improve the user experience. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment