Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Responsive design

Squarespace's built-in responsive design resizes your content and images to fit different devices and screen widths. This allows visitors to view your site in many ways, rather than creating and maintaining 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.

sizes.gif

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 these tips 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.

bleed-areas.png

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 and allow fonts to scale with the browser width. It also allows search engines to 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:

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 allows you to explore portrait and landscape orientations. For a quick preview as you’re editing on a desktop, use Device View.

Was this article helpful?
8 out of 17 found this helpful