All Squarespace sites are designed to look great on mobile devices from the start. However, additions you make, like large media files, lots of content on a page, and narrow letter spacing, can cause issues with site loading and mobile display. This guide covers our best practices for keeping your site mobile-friendly.
Test your site's mobile compatibility
To see how your site displays on mobile, visit it on a mobile device, or use Device View to preview how it looks on smaller screens. You can also learn about how different features display on mobile by visiting How will my site appear on mobile devices?
Use Google’s Mobile-Friendly Test to get a quick assessment of your site’s mobile compatibility. If the test says your site isn’t mobile-friendly, or if you’re having issues when you test your site on mobile, follow the tips in this guide.
Note: Google’s Mobile-Friendly Test is a third-party tool and falls outside the scope of our support.
Every mobile device handles websites differently
For example, newer phones will handle large sites better, and load times are typically faster on a wireless network (versus a cellular connection).
Error Message: A problem repeatedly occurred
The Safari mobile browser on iOS may display this error if your page size is too big. Follow these tips to make them smaller.
Keep your pages under 5 MB
When a visitor loads a page, their device downloads all of its content. Mobile devices use simple hardware and rely on cellular networks for internet access, so requesting large amounts of data can overwhelm them. To avoid issues, minimize the amount of content on each page.
Since load times depend on the device and connection, there's no exact limit. However, pages with more than 5 MB of content may load slowly on cellular connections, so the smaller, the better.
Tip: If your template supports it, enable Ajax loading, which tells browsers to load your content one page at a time.
Set letter spacing to 0px or higher
If the letter spacing of a font is set to less than 0px, the letters may overlap on a mobile device.
In the Fonts panel, click on your selected font pack, then click the font format you want to style. Ensure the letter spacing is set to 0px or higher. To learn more, visit Version 7.1 style and design options.
In the Site Styles panel, ensure that Letter Spacing is set to 0px or higher for all of your fonts.
Don't rely on Spacer Blocks
Spacer Blocks add empty space to a page, creating minimalist layouts when viewing a site on a computer. However, Spacer Blocks are hidden on mobile in most templates, which can cause layouts to change in a way you don't intend them to look. Instead of relying on many Spacer Blocks, consider changing the padding to add more white space. For example, try the content inset feature available in some templates.
Enable AMP for Blog Pages
If you use Squarespace for blogging, enable Accelerated Mobile Pages (AMP) to improve their loading speed.
Ensure Mobile Styles is enabled
Most Squarespace templates display content in a unique, stacked layout on mobile devices so visitors can easily scroll through your content. When Mobile Styles are disabled, visitors must pinch and zoom to navigate your site.
To ensure Mobile Styles is enabled:
- In the Home Menu, click Design, then click Template Settings.
- Ensure Disable Mobile Styles is unchecked.
You’ll only see this setting if your template supports disabling mobile styles.
More formatting tips
For more mobile formatting tips, visit How will my site appear on a mobile device?, where we cover mobile display by template, and how to optimize certain types of content for mobile compatibility.