Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Keeping your Squarespace site mobile-friendly

Squarespace offers built-in styles that optimize sites for mobile devices. However, what you add to your site beyond its template is up to you. By regulating page content, using Index Pages carefully, and testing on multiple devices, you can ensure your site looks great and loads quickly on all platforms.

This guide features our best practices for keeping your site mobile-friendly.

Test your site's mobile compatibility

Check how your site performs on mobile devices with Google's mobile-friendly test.

Preview how your site appears on mobile devices using Device View.

Minimize content per page

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 (rather than broadband connections), so requesting large amounts of data can overwhelm them. To avoid issues, minimize the amount of content on individual pages.

Since load times depend on the device and connection, there's no exact limit. However, we suggest aiming for under 5 MB per page. Pages with more than 1 MB of content may load slowly on cellular connections, so the smaller, the better.

To check a page's size, see the steps below.

Follow these tips to avoid excessive content on individual pages:

Use blog excerpts

A blog excerpt is a snippet or summary of post followed by a "Read more..." link that leads to the full post. When a Blog Page has excerpts, mobile browsers don't have to load all content from every post on the main page.

To learn how to add excerpts to blog posts, visit, Using blog excerpts.

Reduce image size

They say a picture is worth a thousand words. When it comes to file size, this is certainly the case. Multiple large image files can cause issues on mobile devices using a cellular connection.

We recommend keeping images below 500 KB with a width of 1500 pixels to 2500 pixels. For more tips on images, visit Formatting your images for display on the web.

An image compressor like JPEGmini can help reduce file size without sacrificing quality.

Minimize images per page

Since mobile devices download all page content at once, image size is cumulative. This means that image-heavy pages can take a long time to load without some pruning.

For example, if a gallery has ten 500 KB images, a mobile device will load 5 MB of content at once.

Think of Gallery Pages and Blocks as display cases rather than total inventory. By rotating in new content, you can display a sample of your best images then link to other Gallery Pages for the rest.

To learn more about linking to other pages, visit our guides on text links and clickthrough URLs.

Limit embedded content

As with images, embedded content like YouTube or Vimeo videos can increase load times. Limiting embedded videos per page will help mobile devices load the page faster. Clickthrough URLs and Index Pages are a great way to spread video content between multiple pages.

Check page content size

Check your page content size to identify the parts of the page that take up the most memory and potentially slow it down on mobile.

Limit content in Index Pages

Index Pages contain multiple pages, which can quickly add up on a site. For single-page Index Pages (like Marquee and Pacific), every page loads simultaneously, potentially creating issues on mobile devices. 

The single-page Index design is intended to be clean and simple. It's better to provide short, high-impact information to your visitors as they scroll down rather than overwhelm them with excessive content.

The single page Index on our Pacific demo site is a great example of an effective Index Page. It only contains five Regular Pages and a gallery. The images are all optimized, and there are only four images total. 

Again, there's no hard rule about how much content each page in an Index should have. An Index Page full of Regular Pages and Text Blocks will load faster than an Index Page full of galleries, video, and embedded content.

By keeping large content and the number of pages to a minimum, you can help your Index load quickly on mobile devices. If you'd like to supply more information, you can use a text link to direct visitors to a regular page with additional content.

Best practices

An Index should never have more than 25 galleries. A gallery collection should never have more than 50 images. If you have a lot of content, it's best to categorize, organize, and ruthlessly edit. This will help your site load quicker and allow your viewers to find what's important, rather than be overwhelmed by everything all at once.

In a stacked Index like Pacific, you can use Summary Blocks to lead to galleries instead of gallery after gallery all showing everything. For help with the Summary Block, visit Using the Summary Block

Check letter spacing

If the letter spacing of a font is set to less than 0px, the letters may overlap on a mobile device. Ensure that Letter Spacing is set to 0px or higher for all fonts in the Style Editor. 

Functionality varies

Device memory

Memory capacity is tied to a device, not to a mobile browser. Newer phones will handle large sites better, and using a wi-fi connection will improve load time over most cellular networks.

Display size

The built-in mobile style optimizes your content for mobile devices, but this feature is only active at certain display sizes. For a tablet in landscape mode, the site may load without mobile styles, causing issues that aren't present on a standard smartphone.

Was this article helpful?
38 out of 72 found this helpful
Keeping your Squarespace site mobile-friendly