Jump to content

What are your best practices for mobile styling?

Recommended Posts

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!

 

Link to comment

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. 🤞

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
  • 11 months later...

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. 

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
  • 5 months later...

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.

Link to comment
  • 2 weeks later...

here are some best practices for mobile styling in web design:

  1. Keep it simple: Use a simple and minimalistic design to make your website easy to navigate and read on mobile devices.

  2. 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.

  3. Prioritize content: Make sure your website's content is easily accessible and readable on mobile devices. Consider using larger fonts and avoiding long paragraphs.

  4. 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.

  5. Optimize images: Use optimized images to reduce load times and improve the website's performance on mobile devices.

  6. 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.

  7. 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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.