A guest post from Jeremy Moser.

Is your Squarespace website mobile-friendly?

In 2024, having a mobile-friendly website matters because most people enjoy browsing the Internet with mobile devices. According to Statista, over 54% of web traffic is mobile.

Google regularly explores websites to understand the content, themes, and importance of each page (a process known as crawling).

Crawling helps Google keep an updated list of all the pages across the Internet, known as an index. When someone searches on Google, the crawler quickly looks through the index to find the pages that best match the search term.

Then, Google shows the search results in order of how relevant they are to what was searched.

According to Google’s official documentation, crawling is predominantly done using the mobile version of a website.

As a result, if you lack (or have a poor) mobile site, you won’t rank highly on Google.

If you’re thinking of creating a Squarespace website or are wondering whether your existing website provides a good mobile experience, you’ve come to the right blog.

In the following sections, we will explore how to create a mobile-friendly Squarespace website in 6 steps, including the following:

Strategies to keep the size of each page as low as possible and why that matters.
How to make sure your chosen Squarespace template is mobile-friendly.
Testing your mobile site’s compatibility and how mobile analytics help.

1. Reducing the size of each page

Like a regular file we save on our computer, each website page has a file size. The file format and size can influence page load. Generally, the larger a media file, the longer it takes for a page to load.

If a page takes too long to load, people will lose patience and visit your competitor’s website instead. And research suggests their patience is paper-thin!

According to one piece of research, 40% of people have admitted to abandoning a website with slow-loading pages, defined as any page that takes more than three seconds to load.

To optimize media-heavy pages, consider using tools that help streamline video content. For instance, video creation platforms can help you create high-quality videos that are optimized for faster loading on mobile devices, ensuring that your site remains both visually engaging and quick to load.

You can do three things to optimize each page’s file size.

2. Adjust media elements

The size of your images and videos contributes to the overall size of the page. To remedy content-heavy pages, use free tools like Tiny PNG. Such apps significantly reduce image file sizes without affecting image quality.

If your website needs videos, we recommend uploading each video to YouTube before embedding the content to the website — it saves more space than directly adding the video file.

3. Use accelerated mobile pages (AMP)

If making individual tweaks is time-consuming or outside your expertise, switch to AMP. If your Squarespace website is primarily for blogging, you can activate AMP at the flick of a switch:

Go to settings
Blog preferences
Click ’use AMP’
Click save

AMP only works on blog pages. If your AMP code is incorrect or breaks, it can negatively impact your traffic.

4. Follow page size best practices

According to Squarespace, a page shouldn’t be more than 5MB. The following page size best practices can help you keep each page within the optimum file size:

When a page no longer exists, Google won’t instantly delete the page from the index. The URL is still accessible but will go to a ’page not found.’ To avoid users going to an expired page, you may create a redirect that sends them back to your home page or an alternative page. However, too many redirects increase page load times, so use them sparingly–and totally avoid a redirect chain–where the site hops through several dud pages before reaching a live page.
Turn on browser caching to speed up load times for return visitors. You’ll find the option in the settings menu underneath the ’advanced’ sub-menu.
Split pages, where possible. For example, if a page covers different themes or topics,
Use lazy loading, where a section’s page elements don’t load until a user scrolls to that section.
Favor JPEG image file extensions over PNG and other file formats.
Don’t add more than 50 images to gallery blocks.
Consider dedicating one page per theme/topic.
Deactivate plugins you don’t use anymore.
Not using more than 60 blocks per page.

5. Choose a mobile-friendly Squarespace template

All Squarespace websites come with a responsive design.

Responsive design means your pages automatically resize depending on the browser or device. Generally, content appears horizontally on a desktop version and vertically on the mobile equivalent.

Responsive design doesn’t necessarily mean you can create the website as you want, but it’ll magically be mobile-ready. Consider the following tweaks:

Don’t use 0px for letter spacing, as it causes text to overlap for mobile users.
Don’t use spacer blocks. Spacer blocks are a common and useful way to create white space on a website. They look great on the desktop. The only catch? They’re automatically hidden on mobile versions! As an alternative, increase the padding to create the necessary minimalist look and feel.
A Squarespace website is built on blocks. These blocks aren’t necessarily stacked in the desired order on the mobile version.
For example, a desktop blog may have image-text-image. The mobile render may show image-image-text.
To remedy the mis-arrangement, use this simple Squarespace tutorial or mobile image zippers.
Depending on your chosen Squarespace template, you can visit the ’site styles’ section to adjust the mobile version of your navigation menu. You have the option to change the font, font size, color, and spacing.
Some Squarespace templates have a ’mobile: branding’ section, allowing you to adjust the positioning of your logo and branding elements for mobile visitors. Adjust this as appropriate.

If you don’t implement these small changes, Squarespace will optimize based on what it “thinks” is correct, which may not always be conducive to a pleasant browsing experience.

Additionally, Squarespace plugins like Universal Filter now have mobile layout options, making it easier to optimize your website for different mobile devices.

6. Test mobile compatibility

Both Squarespace 7.0 and 7.1 automatically adapt to mobile views. To check the rendering, you only need to visit the website from a mobile device.

A good practice is to check the compatibility of each page with the latest Apple and Android smartphones and commonly used browsers like Chrome, Safari, and Firefox.

Your website’s analytics can also indicate how easy your website is to use.

Mobile analytics provides insights into user behavior, such as which pages are most visited, where users drop off, and which devices are most commonly used.

When you analyze this data, you can make informed decisions on improving your site’s mobile layout, navigation, and content. Implementing these insights can lead to a more engaging and seamless mobile experience, ultimately driving higher user satisfaction and conversion rates.

Wrapping up

Fortunately, Squarespace is a great website builder that adopts a “mobile first” approach. As a result, creating a mobile-friendly website isn’t as arduous as it may be for other web builders.

Your responsibility primarily lies in making small, meaningful tweaks that avoid a bad user experience and ensure your website outshines competitors

Author bio

Jeremy is co-founder & CEO at uSERP, a digital PR and SEO agency working with brands like Monday, ActiveCampaign, Hotjar, and more. He also buys and builds SaaS companies like Wordable.io and writes for publications like Entrepreneur and Search Engine Journal.

How to Create a Mobile-Friendly Website on Squarespace: Best Practices and Tips