Responsive Squarespace Design On Mobile
Squarespace's built-in responsive design resizes your content and images to fit different devices and screen widths. With responsive design, visitors can automatically view your site in many ways, so you don't need to create and maintain separate sites for every potential device, browser, and display width.
The answer to common questions like “Why is my banner cropping on mobile?” or “My background image is distorted. How do I fix it?” lies in understanding responsive design, and choosing images that can adapt to the shape of different browsers and devices.
Image best practices
Imagine a narrow rug that fits perfectly on the floor of a narrow room. If you move the rug into a smaller room, or even just turn it sideways, it won't fit properly.
Images, especially banner and background images, work the same way. Responsive design helps your "rug" change size and shape. For the best effect, select and set up each image so it looks good in as many "rooms" as possible.
When choosing an image to upload, keep in mind:
Image size
We recommend uploading images that are at least 1500 pixels along their longest edge. This gives the best combination of image resolution and mobile loading time.
We don't recommend using images that are more than 2500 pixels along their longest edge. Images larger than this can cause issues on mobile devices.
It helps to choose images that are roughly the same shape as the space in which they'll appear, such as using a wide image for a banner. Learn how the container shape affects cropping.
Image content
Abstract patterns and images without text or borders work best.
For background images, repeating patterns give the greatest flexibility.
Change the focal point to control how the image centers.
If it's important that a specific area of the image (like a person or object) isn't cropped, it can help to add a "bleed" area around the edges, so that cropping is less noticeable.
Text best practices
Text resizes automatically to fit the screen.
Tips:
Add text as a caption, overlay, or directly on the page, rather than using images that contain text. This will reduce cropping issues as fonts scale with the browser width. Search engines can also index it for results.
Some templates offer fine-tuned control over how text resizes on mobile devices.
Content rearranges on mobile
In general, content stacks vertically on mobile. This makes your site easier to navigate and helps images and text stay visible in a smaller, narrower browser.
To learn more:
See Squarespace’s general rules for how your site looks on a mobile device.
Learn how pages and block layouts change on mobile.
Content responds differently on Retina screens
Your site's appearance on Retina and HD screens depends on the original size of the images you uploaded to your site.
When you upload an image, Squarespace stores up to seven versions of it, each with a different width. Squarespace’s built-in responsive design automatically detects the visitor's screen and picks the best image size to fit it. On Retina screens, Squarespace will show an image twice as large as needed.
Note: Images loaded through Site Styles, such as background images, are the exception to this rule. For these images, Squarespace always show the original image at its full size.
Here are some other image types to consider:
Logos: Uploading a large image file (twice the size needed) for your logo can improve its appearance on HD and Retina screens. However, this may cause blurring on other screens and some browsers, such as Internet Explorer. Consider your site's audience and use a logo size suitable for the majority of your visitors' screens. You can change the logo's height in most templates.
Icons: Most icons in our templates, like menu icons, social icons, and Share buttons, scale without a loss of image quality because they're web font or SVG-based. Some older or discontinued templates have image-based icons that don't scale on Retina displays.
Text: Any text added to your site will scale for Retina screens without a loss of quality.
Compare on different devices
Comparing your site on mobile versus desktop is a good way to see how your site adapts to different browser shapes. As you make major changes on your site, it's a good idea to keep your phone close by, with your site open in its browser. When you save big changes on a desktop computer, refresh the browser on your smartphone to see the effect.
Testing changes on your mobile device gives the most accurate display and is the only way to explore portrait and landscape orientations. For a quick preview as you’re editing on a desktop, use Device View.