How to optimize your Squarespace website for mobile screens
Table of Contents
Unlike Showit and Wix, Squarespace doesn’t let you separately alter your design for mobile size screens. That’s both a great thing and an irritation, tbh.
Great because: you’re not designing anything twice; it’s all automatic.
Not great because: it’s all automatic & you have no specific control how the design reacts on mobile without custom code.
So how do Squarespace designers deal with this problem?
What device does your audience use?
First you need to check your analytics and see what your audience is using MOST frequently. You can do this by going into your Analytics area from your home/main menu.
If you’re on the desktop site editor, go to your home/main menu, click Analytics, then click Traffic. At the bottom there are several pie charts, and one of them shows how many users are on each device size. That’s where your percentages will be.
If you’re using the mobile (Squarespace) Analytics app, scroll all the way down to the bottom to find Device Type. Notice what the numbers are there.
If you’re using Google Analytics, it’ll be under Audience Overview, then scroll down to the Audience by technology area; the first one in that section is “Users by Device Type.”
My audience is mostly using Desktop as you can see below, so my website is designed for those people, and I focus less on how it looks on mobile.
90% uses my website on Desktops
9% uses my website on Mobile devices
1% uses my website on Tablet devices
If you haven’t launched your site yet, first focus on whatever you expect your audience to use most (and keep an eye on whether that ends up being different than what you expected or not).
Or just ask people that are your ideal client.
If you think they’ll mostly be on their phones when they visit your website, then make sure it looks great on mobile.
How does Squarespace’s responsive design work?
First you should understand how the Squarespace platform reorders everything on the page, so that when you lay it all out, you know more about how it will adjust automatically.
Re-ordering the elements
Squarespace re-orders the blocks on the page from Top to Bottom, Left to Right.
That means a layout like this for Desktop:
Will look something like this on mobile devices:
As you can see, it displays the Image first, then the text, then the button, so it displays in that order on mobile (image first, then text, then the button last –which isn’t shown in the example because you’d have to scroll down to see it).
If you want your information to be more prominent for mobile, then you’ll need to flip-flop the layout, placing the text first, the button underneath the text & image on the right side, instead of being on the left.
Let’s take a look at the difference:
Desktop view
Mobile View
Number of elements
Each template is a little different, based on the content width you’ve set in your design settings or what the template automatically sets as your width, but each site has a set number of blocks it can fit across the width of a page.
For my template, I can find out by placing as many Spacer blocks as it will allow me to add, side-by-side. Let’s take a look:
As you can see, on Desktop, my template allows 12 spacers to sit side-by-side across the width of my page.
Looks like my template allows up to 12 blocks to be placed side by side. That means my page is divided, at most, into an even 12 columns.
This also means, that my template doesn’t handle odd numbers of elements very well. Here’s an example of that:
This is a grouping of 5 elements (shown above):
Spacer + Image 1 + Image 2 + Image 3 + Spacer
This is a grouping of 6 elements (shown above):
Spacer + Image 1 + Image 2 + Image 3 + Image 4 + Spacer
See the difference?
In the grouping of 5, I’m always going to have trouble getting 1 of those 3 images to be the same size as the other two.
Knowing what number of elements your template’s grid can hold across the width, will really help you when you start laying elements out on the page.
Image Block Layouts may look odd on mobile
I’m specifically referring to the Poster, Card, Overlap, Collage, and Stack design options for an Image Block. Some of them work better than others on mobile size screens.
You can somewhat fix this by selecting Dynamic Text on your Image Blocks settings in Site Styles, but it tends to make it too small to read sometimes, in order to fit the text in the layout you setup. So what looks good on one screen size doesn’t always on others.
This is a sample title.
And this is an example subtitle. Resize your browser window to see how this reacts on different screen sizes.
Adjusting your text sizes
Using “em” instead of “px” for your font size format (where you can) will likely help your text be more legible for mobile devices.
When I was using px instead of ems for my font sizes, my body copy always seemed smaller & thinner on mobile devices. Using ems has fixed that for me.
There are some places where ems are not allowed, so if you switch to ems and you don’t see a change, then that’s why.
Here’s how to change your fonts from px to ems in your Site Styles area:
Your font Size settings will also let you click in the numbered area next to the slider and type a replacement value. So if my font size said 16px, I’d click where it said “16px,” select & delete that, then type 1.2em in its place.
Watch the text using that style in the preview side, so you can notice how (or if) it changes when you do that & Save if it accepts the change.
Banners with overlapping text &/or buttons can be tricky in 7.0…
Especially if you have parallax on, you’ll have to play with this to get the effect you want.
Use that focal point dot in the center of your image to control where you want the center of the image to be when it crops for smaller screens.
My suggestion is to use an image that’s almost entirely blank on one side or the other, or an image that isn’t so busy that if the text overlaps part of that, it’s still legible.
Using spacers to get the text where you want it across the page sometimes doesn’t translate on mobile, where it tends to remove spacers when it condenses the layout to fit in a smaller screen size.
Always make sure you check the layout on all size screens before you assume it looks good everywhere!
Banners with overlapping text &/or buttons can be MUCH EASIER on 7.1
One of the many redeeming qualities about 7.1 is that you can control where the text is placed on the screen, without spacers; it can be closer to the left side, in the center, or closer to the right side. In other words, text can be in Left/Center/Right alignment, and also pushed to the left/middle/right side of the screen with no other blocks forcing the placement.
You can also control how the text is placed vertically, close to the top, in the middle, or closer to the bottom of the image.
You can also control how tall the banner section itself can be, small, medium, large or custom.
7.1 doesn’t have parallax, so while the 3D effect is removed, it gives you more control with the placement of objects on top of the images.
Another great feature of 7.1 is the ability to switch color themes quickly & easily, when the overlay combo doesn’t work on any given image. You have 10 color themes available, so you can just switch that section to another theme that may work better on that image!
For more tips, check out:
