Why you need to check the mobile version of your Squarespace website NOW

Thanks to Squarespace’s introduction of Fluid Engine, you can now create a totally separate mobile version to the desktop version of your website. 

Whilst this is brilliant for Squarespace designers, there is a slight problem that means you need to check the mobile version of your website immediately

We all know as designers that we don’t always work in order when building a page. We may add images and text, then decide we need a CTA button or FAQ section in between them. As the page starts to come together, we can see what needs to go where and move things around accordingly. 

The problem is Fluid Engine doesn’t think like that. Once you’ve built the section of your web page, if you view it in mobile, you’ll see that what happens is Fluid Engine presents the elements in the order you added them to the section, not the order you’ve placed them. 

So whilst you may be creating a webpage where you want your images to appear above your text, if you add the text in first and then the images, the text will appear above the images on the mobile version. 

It’s not just the order it messes up either. Sometimes elements will be overlapped too and honestly? Everything just looks a mess. If you forget to check the mobile version of your website after building using Fluid Engine, it’s scary to think about what your mobile site might look like.

Watch the video

Check out the YouTube video below 👇

It’s worth noting that this issue only arises if you’re straying from templated sections. If you’re just using Squarespace templates for each section of your web page, these will already be optimised for mobile. 

The good news is that there’s a happy ending to this potential Squarespace horror story. With a simple fix, you can make sure the mobile version of your website is presenting content in the right order. 

And all you have to do is drag and drop. Seriously, it’s that easy. Once you’ve opened up the mobile view of your site, you can drag the elements into the right order/position on the screen and it will have zero impact on your desktop version.

drag the elements into the right order/position on the screen

Mobile view on your website allows you to edit completely separate from your desktop version 🚀


📩 Join the inner circle to get exclusive code updates


No matter what changes you make to your mobile site here, nothing will change on the desktop version you’ve lovingly designed. 

So now you know why you need to check the mobile version of your Squarespace website right now. If it’s not looking quite right, simply dragging and dropping the elements into the right order will soon fix the problem. 

Moving forward, Squarespace designers just need to remember to always check the mobile version before you go live and if you notice any errors, this simple tip will help you to solve them right away.

If you need a more hands-on tutorial, go back up the article and check out the tutorial video!


Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.


Want more?

Sam Crawford

This article was written by Sam Crawford, one of the world’s leading Squarespace website designers.

Sam is an official Squarespace Expert, official Squarespace Partner, official Squarespace Community Leader, official Squarespace blog contributor, official Squarespace panelist, Squarespace educator and multi-award winning Squarespace designer.

https://bycrawford.com
Previous
Previous

How to display a Squarespace pop-up on desktop only

Next
Next

How to add a button to an accordion block on Squarespace