How to Optimize Your Squarespace Mobile Design
About this Squarespace video tutorial
Even a site with a perfectly designed desktop layout can suffer as soon as a visitor accesses their site on mobile. Today, we'll quickly give you some tips to have consistent, mobile-ready layouts on your site and how to add 'check mobile' into your workflow so you never forget it again.
Timestamps
0:00 - Intro
0:42 - Making Consistent Sections
3:18 - Checking Your Mobile View
Want 20% off your new Squarespace subscription?
Subscribe to the Designing the Row® email list and get the exclusive code sent straight to your inbox. You’ll get email updates when new Squarespace tutorials are published, but you can unsubscribe at any time.
How To Optimize Your Squarespace Mobile Design
I’ve been recently doing a Squarespace refresh offering on a site (if you want to know more about my Squarespace refresh package, click here, I take websites that you’ve DIY-d and take a couple hours of time, reorganizing and redesigning things a bit), and while I was updating the service pages on this site I figured I’d document some thoughts and tips that could help your with your own Squarespace website and the importance of checking your mobile design as you build out your site.
Making Consistent Sections
When you’re on a page, click on that ‘add section’ button at the top of the page below your navigation, and you can access your saved sections. This is a great tool because I recommend having one consistent header styling across all of a certain type of page on your site (in this instance, service pages).
Once your section is built out, all you have to do is adjust a few variables like text boxes and you’re good to go! When the section is made, we’ll make sure it looks right on mobile, and if it does, that means every usage of that section will also work on a mobile feed. If it doesn’t, you’ll at least know the quick changes you have to make to make it consistent across all pages, which saves so much time from having unique sections that all require their own fixes.
PRO TIP: To do that, I like to take some of the text I already have, paste a good sentence in the tagline section, and when you’re working with text in Squarespace, on the very left of the text option, you’ll see three dots. Click on this to access Squarespace’s Generative AI feature, which you can then click ‘simplify’ to get a slightly pared down version of that text.
Checking Your Mobile Site
On the top right of any page you’re editing, you’ll see a little smartphone icon. This is how you access a site’s mobile view. It probably has a blue circle right now, which means you’ve made changes that haven’t been checked yet on mobile. You should click it.
You’ll see your mobile version of the page, which most likely already has text or image issues from your desktop site, so get in there and start cleaning it up, tightening up elements and moving things around so it looks exactly on mobile how you like.
PRO TIP: If you have a large chunk of empty space, instead of dragging the margin, just double click on that blue margin drag, and it’ll immediately remove any empty space in a section.
Be sure to check your mobile site after making any serious change to keep your website up to date. However, if you’d rather I do this for you, feel free to check out my Squarespace refresh package here at designingtherow.com/services and we’ll get to work, thanks!
The latest Designing the Row tutorials…
![Get Rid of Design That's Holding Your Website Back [Color Palette Tutorial]](https://images.squarespace-cdn.com/content/v1/575f26468259b52cea323757/1761190227942-2GB7ZK1LLICPOAZ8PPX3/website+color+palette+mistakes.png)
