Tips for keeping your site mobile-friendly

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

Last updated August 8, 2024

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.

image2.jpg

Don't rely on spacer blocks

Accessing this feature

Spacer blocks aren't supported in Fluid Engine. Instead, design your mobile layout independently of your computer 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.

Enable AMP for blog pages

If you use Squarespace for blogging, enable Accelerated Mobile Pages (AMP) to improve their loading speed.

Ensure mobile styles are enabled (version 7.0)

Accessing this feature

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.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.

Tips for keeping your site mobile-friendly