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.
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.
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.
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 page content size
You can check how much content is on a page using Chrome Developer Tools:
- Open Google Chrome.
- Clear your cache.
- Open the page you want to check in a new tab. In that tab, follow the directions in this guide to open Chrome Developer Tools. (Shortcut: Cmd or Ctrl + Option + J).
- In Chrome Developer Tools, click the Network tab.
Once the Network tab in Chrome Developer Tools is open, use it to look for potential problems:
Click the Size column to sort all of the content on your page by size. This will help you identify the parts of the page that take up the most memory and potentially slow it down on mobile. The larger content will most likely be images. Click on the file's name to see the image. We recommend keeping images under 500 KB, so if any images are significantly larger, that could cause your site to load slowly on mobile.
Then, review the total page size at the bottom of the screen. In the example below, it's shown as "1.0MB transferred." You should aim for 5 MB or less, although 1 MB is the safest size for cellular connections.
Tip: You can resize image files using any image editing software before uploading them to your site.
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.
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.
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.