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

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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. 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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
  • 1 month later...

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.

Link to comment
  • 2 months later...

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?

 

 

Link to comment

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

 

Was our response helpful? Click  👍 or mark it as the solution! This helps others find the answers they need. 

My name is Meghan and I'm the owner of Westerly Creative Studio, a Bay Area creative force specializing in Squarespace websites and branding foundations. Follow along on LinkedIn or Instagram for more tips, updates, and resources. 

Link to comment
  • 1 month later...
  • 4 weeks later...

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

Link to comment
  • 1 month later...

I was just about to post a thread asking for advice on mobile layout so I'll add it here. 

Does anyone find Fluid Engine a bit buggy? Or am I doing something wrong? I worked to get the mobile section as close as possible to the desktop on a client site, sent it to them for review, and they've come back with a lot of small mistakes that I swear weren't there when I finished it. I don't know whether it's because they're changing things and not noticing that it's affecting the mobile layout (ie user error), but it's driving me crazy. 

Link to comment
17 minutes ago, LouiseDrever said:

Does anyone find Fluid Engine a bit buggy? Or am I doing something wrong?

FE can be very frustrating (it is for me!) because there are lots of things going on in the background that, if you aren't aware of them, can make things seem unpredictable. Examples are

  • "Row stretch" (see the height of the rows in the image below)
  • Avoiding overlapping blue boxes
  • Creating space within the blue box for elements to expand

image.gif.1c62f053f8a551a70c530a438abffc32.gif

Can you share some screenshot examples of your issues, including screenshots of the pages whilst in the editor in mobile and desktop (showing the grid)? That may allow contributors to suggest solutions/workarounds for the issues you're experiencing 🙂.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Thanks so much for your reply @paul2009!

I think because I'm not all that confident using FE, I'm still not sure what is user error, and what is behaving the way it should (and what's not)!? The row stretch for example - is that what's supposed to happen? It doesn't always seem to behave in the same way for me (though I do need to really use it more and get more comfortable with it). 

And thank you, I certainly will post some examples.

Link to comment
1 hour ago, LouiseDrever said:

I think because I'm not all that confident using FE, I'm still not sure what is user error, and what is behaving the way it should (and what's not)!?

You're not alone @LouiseDrever. We're all still learning. For example, here's an example of how to stop an Accordion Block affecting an Image Block by changing the way the rows stretch (credit to @guillermo_SQSP for his patience in explaining this!)

image.thumb.gif.27f8da95e17cf917c0a0d77fe2b09466.gif

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
On 12/13/2023 at 8:18 PM, paul2009 said:

You're not alone @LouiseDrever. We're all still learning. For example, here's an example of how to stop an Accordion Block affecting an Image Block by changing the way the rows stretch (credit to @guillermo_SQSP for his patience in explaining this!)

image.thumb.gif.27f8da95e17cf917c0a0d77fe2b09466.gif

Wow! That's such a simple but important tip!

Thanks for understanding - I feel less like an idiot knowing it's not just me! 😅 😂  I've got a related issue now with image blocks, but I'll look for a more relevant thread or start another one.

Link to comment
  • 2 weeks later...

One of the best pieces of advice I can give with Fluid Engine and mobile design adjustment is to adjust mobile as you go.

Building out websites, I do my best to build out a page, get client approval, then adjust for mobile, and then use that as my template moving forward. I mostly build my websites from pages I've already created, saving sections, and re-using them throughout the site. Once you adjust a section for mobile, you can save the section, and then when you re-use it, it stays mobile optimized. So if you add additional content to that particular section elsewhere, you only have to re-adjust the new elements you added.

This worked really well on my most recent launch, dingsmotionusa.com, where I had nearly 100 pages and several pages that all had the same content and elements on them for products. I built one page with the structure I needed, then adjusted for mobile, saved the sections, and repeated across 70 pages. So I had very little I had to adjust when I was done.

Link to comment
  • 3 weeks later...

I try to find an answer here as well. In edit mode the device version looks good but when I display it on an actual device it's the desktop version that shows. Im using 7.1 Is there a way to force device version instead of desktop version?

Link to comment
  • 3 weeks later...

So many great suggestions. I design mobile as I go, also—with several devices, if possible.

Am in the process of working with a Circle member to obtain code to make a button on mobile work on the first tap. This is happening on at least two sites that I'm currently building. 

Squarespace support has been most helpful and said that it's an issue on their end, and they're on it. In the meantime, my client is patient, luckily :/

Link to comment
  • 1 month later...
  • Jo_SQSP unpinned this topic

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.