Tips for keeping your site mobile-friendly

false

Tips for keeping your site mobile-friendly

Last updated June 17, 2026 14:24

Best practices to ensure your mobile visitors can easily use your site.

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. If your site uses Fluid Engine, ensure you arrange the content in your mobile layout as you'd like it to appear.

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).

Some mobile browsers may display an error message if your page size is too big. Follow these tips to make your pages 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.

To check the page size or for tips to reduce the page's size, visit Reducing your page size for faster loading.

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 the font format you want to style. Ensure Letter spacing is set to 0px or higher. To learn more, visit Changing fonts.

In the site styles panel, ensure Letter spacing is set to 0px or higher for all of your fonts.

Don't rely on spacer blocks

Spacer blocks aren't supported in Fluid Engine. Instead, design your mobile layout independently of your desktop layout.

Spacer blocks add empty space to a page, creating minimalist layouts when viewing a site on a computer. On mobile, however, spacer blocks are usually hidden. This can change the look of your mobile site layout in ways you don't intend. Instead of relying on many spacer blocks, consider changing the padding to add more white space.

Ensure mobile styles are enabled (version 7.0)

Mobile styles are always enabled on version 7.1. To learn more, visit How will my site appear on mobile devices?

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 are enabled:

  1. Open the Design panel and click Template settings.
  2. 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 how content displays on smaller screens, and how to optimize certain types of content for mobile compatibility.

Was this article helpful?

Yes No

264 out of 630 found this helpful

Yes No

Tips for keeping your site mobile-friendly