Responsive Design

Site Editor's built-in responsive design automatically adjusts your content and images to fit different devices and screen widths. Using the Device View controls in both Site Editor and Preview Mode, you can preview your site as it will appear on a desktop, laptop, tablet, or phone.

  • Edit Mode: Switch between Device View controls at the screen's top.
  • Preview Mode: Click Preview in the top-right corner of the screen to see how your website will appear to visitors. Please refer to the Preview and Publish a Page article to learn more.

You can edit the site in both modes. In Preview mode, editing is limited: you can only edit layout elements (text, headings, photos, buttons) from the editing menu that appears once you select the element.

What is Responsive Web Design?

Responsive web design is a technique that optimizes web pages for easy use across various devices. With people accessing the internet from desktops, smartphones, and tablets, ensuring a website's adaptability to different screen sizes, resolutions, and display options is essential. The goal is to create a website that is easy to read and navigate regardless of the device used to access it.

Why Is Responsive Web Design Important?

Effective website design is essential for reaching a wider audience. A theme that doesn't adapt to mobile devices can significantly limit your marketing campaign's potential. While websites were once designed primarily for desktops, today, catering to all devices is crucial for maximizing revenue.

How Published Sites Appear on Retina Screens?

Site Editor's templates are high-density and ready for Retina display.

Images

We store up to five versions of an uploaded image with different dimensions. Site Editor automatically selects the best image size to fit the visitor's screen.

  • Non-Retina screens: the largest image needed to fill the image's container without stretching it.
  • Retina screens: the image will be shown twice as large as needed.

Icons

Icons are scaled to fit your template without losing image quality:

Text

Text on Site Editor's sites scales for Retina screens without quality loss: