What are your best practices for mobile styling?

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!

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

I was wonder the same

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. 

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.

This is my first time using Squarespace and I am noticing that some graphics and buttons are out of alignment when I look at them in mobile mode. What do I need to do to anchor these graphics and buttons so they don't move out of alignment when going to mobile vs desktop view?

Thanks in advance for advice.

Hi everyone,

I'm new here and I was about to post a thread for help on this topic.

My website looks terrible on mobile.

So when I went to edit in mobile view it changed the original website as well.

Which meant I had to go back and waste time editing the original again.

Is it possible to have 2 different designs, one for desktop and one for mobile. And then when mobile users access the domain they are directed to the 2nd design which is better optimized for mobile view?

Hi @drunkbeetle, welcome to the forum!

While you could technically use code to have 2 different sets of design, it's not a good idea for your site's health or for SEO. Sometimes it makes sense to hide 1 section and show another on mobile but that's on a small scale.

There are things you can change on mobile view that don't impact the desktop design:

• Button size
• Layout of items (text, images, etc.)
• Image size
• Text block size

However, you can't change the below without it modifying on desktop:

• Image alignment
• Text alignment or color
• Settings to list items

Basically, you can move items and change the boundary box without it altering your desktop design -- these changes are more about where items go. However, changing the content or styling of a text box, image, etc. will appear on both desktop and mobile. 

💡 If you're designing on a monitor, your settings and window size may modify the mobile preview. I'd highly recommend updating a section and then checking on your phone to see if the two versions are close. If they aren't, you may need to adjust your set up. 

There is CSS that can be applied to modify list carousels, text styling, and more. If there are specific places where you're struggling, post your issue with a screenshot, link, and password (if your site isn't launched yet, you'll need to go to Settings > Site Visibility > Password Protected and set a password). 😊

Hey @drunkbeetle, just wondering if you figured this out? I am having the same issue and can't seem to figure it out. 

I've found that Fluid Engine has helped a lot with being able to make some changes on mobile that won't affect the desktop version but alignment has been a huge one for me! 

I use Squarekicker to achieve a different mobile experience and it works great! You're able to do quite a bit more (change alignment, add blocks and hide them from desktop, change up the layout further) without messing up the desktop view and vise versa.

I have a paid promotional affiliate link with them if you're interested in a free trial: https://squarekicker.com?ref=dreyahbohlen