Responsive design demystified

Responsive design means building one site that looks and works well at every screen size — from a 320 px phone to a 2560 px ultrawide monitor. This article explains the core concepts and shows how Site Designer’s visual tools map to each one.

One HTML document, many presentations

A responsive site is built from a single HTML document. What changes between screen sizes is the CSS — layout rules, font sizes, and spacing that adapt to the available space. The content stays the same; only the presentation shifts.

This separation is powerful: you write the markup once and teach the browser how to display it differently depending on context.

Why responsive design matters

Mobile devices account for more than 55% of global web traffic. A site that only looks good on a desktop is broken for the majority of your visitors. Beyond user experience, Google uses mobile-first indexing — meaning the mobile version of your site is what Google primarily uses to rank you in search results.

Breakpoints and media queries

A breakpoint is a specific viewport width at which your layout should change. A media query is the CSS rule that applies styles only when that condition is true. For example:

/* Base styles apply to all sizes */
.container { flex-direction: column; }

/* At 768 px and wider, switch to a row */
@media (min-width: 768px) {
  .container { flex-direction: row; }
}

You don’t write these media queries by hand in Site Designer. Instead, you enter breakpoint mode, make your visual edits, and Site Designer generates the CSS behind the scenes.

How Site Designer handles responsive design

Site Designer’s responsive workflow has two main tools:

• The width slider (Responsifier): A draggable slider at the bottom of the canvas that lets you preview your design at any viewport width without changing any styles.
• Breakpoint mode: An editing mode you activate to make style changes that only apply at a specific viewport width and below (or above, depending on your strategy).

Together these tools give you a visual, code-free way to build fully responsive layouts.

Mobile-first vs. desktop-down

There are two philosophies for building responsively:

• Mobile-first: Write base styles for small screens; use min-width queries to enhance the layout as the viewport grows.
• Desktop-down: Write base styles for large screens; use max-width queries to simplify as the viewport shrinks.

Site Designer defaults to desktop-down, which matches the natural workflow of designing on a large monitor. You can switch to mobile-first in Project Settings. Both strategies produce the same result — they differ in which size you start from.

Next steps

Work through the articles in this section in order. Start with the width slider to learn how to preview your design at any size, then move on to custom breakpoints and breakpoint mode to start making responsive edits.