How to make your Squarespace website mobile-friendly
Your website needs to be mobile and tablet friendly and respond to the device it is viewed on. This is incredibly important as more so than ever people browse the internet on their mobile devices.
Earlier this year, Statista* published “mobile accounts for approximately half of the web traffic worldwide”, coupled with Google prioritising mobile page load speed as a key metric when determining your website's search ranking, it is incredibly important that your website is mobile-friendly.
So...“How do I make this happen?” I hear you say… Well, my friend, keep reading as I’m sharing my top tips to ensure your Squarespace website is mobile-friendly...
*https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/
Squarespace websites mobile-friendliness
Let’s get one thing straight to start with, all Squarespace websites are designed to look great on mobile devices. This is one of the reasons why I choose to use Squarespace as the CMS platform for my website and why I recommend it to other businesses owners too.
Now, although Squarespace has given you a great head start, there are several additional things to keep in mind as you maintain and move forward with your website.
So when you create any new pages and include text, images, or media files, you want to also ensure you keep in mind the following tips…
Increase your page load speed
When a visitor lands on your website, on any page, the contents of that page is loaded. As mobile devices use simple hardware and rely on mobile networks, any content-heavy pages can be slow to load.
This is not great as a slow loading page causes a bad user experience, damages your SEO but also it’s quite frustrating for the user as, let’s be honest, no-one has the patience to wait around for a slow-loading page or website.
To increase your page load speed aim to keep the page content below 5MB.
Not sure what your page content size is? Check it using Squarespace’s guide:
In case you do need extra help with reducing your page size for faster loading content, here are few additional tips:
Reduce the image size
Keep images below 500 KB with a width of 1500px to 2500px
Use an image compressor, like JPGMini
Don’t overload Galleries - Limit galleries to 50 images each
Use JPGs where possible.
Limit embedded content
Embedded content, like video’s, can increase your page load time. Therefore it’s recommended to spread out the content on multiple pages, rather than housing it all on one page.
Removes those hyphens
Squarespace automatically hyphenates words which are too long to fit on one line. This is great, but it can look a bit odd on mobile (especially for headings), so another way to make your Squarespace website mobile-friendly, and one thing I always do to ensure text eligibility on mobile for all the websites I create is to add a snippet of code which essentially disables the automatic hyphening.
Here’s the code I use…
/* Remove hyphens */p, h1, h2, h3 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;}... to add to your site, head on over too “Design > Custom CSS”, and then “copy and paste” it in! Simples!
Note: This code snippet removes hyphens for paragraph, heading 1, heading 2, and heading 3 styles. You can add a heading 4 (h4) or remove one of the ones listed by deleting.
Remember to adjust the image focal points on mobile devices
You may notice that on the mobile view of your Sqaurespace website an image is not displaying the right part of the image. You can fix this by adjusting the focal point of that image.
To do this, you need to edit the page and the image. The focal point is the white outlined circle that you will see on the image itself, and it sets the focus of an image, giving you control over where the image is centred.
So, all you need to do is drag and move the circle icon to the appropriate area on the image that you want to become the focal point.
Remember to check any changes on both the desktop and mobile view to ensure it is displaying as you wish across the devices.
Don’t rely on the Spacer Blocks
Spacer blocks are great to help create empty space on a page when viewing it on the desktop. However, Spacer Blocks are hidden on mobile (on most templates) which can cause an issue.
You could use 2 Spacer Blocks side by side, instead of 1 Spacer Block (as per the image below - the bottom part) as the use of 2 Spacer Blocks cancel out on mobile, but remain on desktop.
Alternatively, instead of relying on Spacer Blocks, consider amending the padding or on some templates, you can use the content inset feature.
Enable AMP for Blog posts
Another thing I always do for the Squarespace websites I create it to ensure I have enabled AMP (Accelerated Mobile Pages) for Blog posts to improve the loading speed by creating lightweight versions of the web pages.
Here’s a nifty note - AMP works with Google to prioritise results in mobile searches.
This definitely helps to make your Squarespace website mobile-friendly. You can find this in “Settings > Blogging”
Ensure Mobile Styles are enabled
For an extra layer of customisation, particularly to the mobile view, some Squarespace templates have mobile-specific details you can amend. These settings can be found in “Design > Site Styles”.
Mobile Navigation bar
Mobile navigation bars display at the top or bottom of your website on the mobile view. They contain header elements like the site title or logo, hamburger menu (three lines to indicate the navigation) and search icon and shopping trolley. You can customise the bar colours, choose where the elements display and give them unique mobile styles, depending on your template.
Customise the mobile navigation menu
This is different from the above. It’s important to note that you can also customise the font, size, colour and spacing of your mobile navigation menu from this area, and to ensure you stay on brand, I recommend to do this. It’s one of those things, I always do as part of any website I create.
Adjust the size of the logo on mobile
Some templates allow you to adjust the size of the logo on the mobile device view. This is something that should be done to ensure the logo is not too large or too small, reinforcing the mobile-friendliness of your website.
You can also change the logo so that on mobile devices it displays a different logo, maybe a logo variation, but this depends on what template you use. If your template doesn’t allow for it you can still achieve it by adding some custom CSS.
Review how your website looks on mobile devices
It goes without saying that any amends you make to the mobile view of your website should be reviewed and checked to see how they appear across the board on desktop and tablet too.
Luckily Squarespace makes that easy for you (again!) and have a simple toggle to view your website as they appear on the different screen sizes.
If your website is on the 7.0 version, simply hover over the site preview frame (within the page editor view) and click the arrow to show the device icons. This is the Device View and you will see icons corresponding to devices. If you then click on one of these you will be able to view how your website appears.
If your website is on the 7.1 version, the tablet view is no longer available as it is handled for you, but you can click the Mobile Preview icon in the top-right corner of the site preview frame to view how it appears on mobile.
Even though Squarespace built-in Device View is great, I recommend also checking the views on your own device too.
Conclusion:
As you can see, as much as Squarespace makes life easier it can only do so much of the work for you, so do follow these tips to elevate and ensure you keep on top of making your website mobile-friendly.
And actually, in fact, some of these tips are one-off checks, and once they are done you only really need to keep on top of new additions you make.
Do let me know if you found these tips handy and if they helped you!