How to design a responsive web layout

Start with the narrowest frame and widen up

A responsive layout is easier to build from the inside out. Start in the narrowest frame you support, the iPhone 14 preset at 390×844, and get the content working there. At that width there is no room for a second column, so every element has to earn its width and the hierarchy gets decided by the content rather than by the space available.

This is the opposite of the instinct to design on a desktop canvas, where everything fits and nothing has to be prioritized. The narrow frame forces the question of what matters, and the wider frames are then a matter of adding room back rather than deciding what to remove.

Finish the narrow version before you widen anything. A half-finished phone layout widened to 1440 pixels shows you the wide problems on top of the narrow problems, which is two sets of fixes instead of one.

• Build at 390×844 first, on the iPhone 14 preset
• Every element fits a single column before you widen
• Finish the narrow version completely before switching presets

Note: Building narrow first is a discipline, not a rule the app enforces. Nothing stops you starting at 1440, you just end up with a wide layout and a narrower problem to solve later.

Widen the frame and watch the columns reflow

Switch the frame preset to Tablet at 820×1180 and watch what happens to the content. The text block should still be readable, the row of cards should still be a row, and the gap between them should not triple. If the content stretches edge to edge at 820, the frame is doing the work your layout should be doing.

Auto-layout is what makes this predictable. Set the direction to vertical or horizontal, set a gap between 0 and 96, set padding between 0 and 96, and set the cross-align to stretch where children should fill the row. The same container then behaves sensibly at 390 and at 1440 without a second layout.

When a row of cards needs to become a grid, you need a second container inside the first one: the outer container is vertical, and it holds a horizontal row or one group per line. Build that nesting deliberately, because a container that holds children is what carries the reflow.

• Auto-layout direction, gap 0–96, padding 0–96, cross-align stretch
• Outer container vertical, inner group horizontal for a row of cards
• Text blocks keep a maximum reading width, not the full frame

Note: A container whose width or height is left at zero hugs its children, which is useful for a button that should be as wide as its label and wrong for a section that should span the frame.

Pin headers and sidebars with constraints

Some parts of a layout do not reflow, and they need to say so. A header stays at the top, a sidebar stays at the left, a sticky action stays at the bottom. In App Builder that is a constraint, and constraints are what separate a layout that adapts from a layout that happens to look right at one width.

The horizontal constraint set is left, center, right, stretch and scale, and the vertical set is top, center, bottom, stretch and scale. Stretch does the adapting work: a header that stretches keeps its padding and fills the new width, while a header pinned left stays at its old width and leaves a gap on the right.

Use scale sparingly. A scaled element changes size with the frame, which is right for an image placeholder and wrong for a text block, because the text stays the same size inside a bigger box. The responsive constraints guide covers the same reasoning outside the editor.

• Header: horizontal stretch, vertical top
• Sidebar: horizontal left, vertical stretch
• Primary action: horizontal right or stretch, vertical bottom
• Scale only for elements where a changing size makes sense

Check the same screen at 390, 820 and 1440 pixels

Three widths catch most problems: 390 for the phone, 820 for the tablet, 1440 for the desktop. Put the same screen in all three and compare them side by side rather than one at a time. The comparison is where you see that the desktop version has become a stretched phone version with a lot of empty space.

The Desktop preset is 1440×900, the Laptop preset is 1280×800, and the web frame default is 1280×800. The minimum frame size is 120×120, so you can also drop something very small to find out how the layout behaves when there is almost no room at all.

Check the 8 px placement snap grid as you go, because a layout that looks aligned at one width and ragged at another usually means something was nudged rather than placed. The snap grid and the toggleable layout-grid overlay are in the App Builder toolbar.

• 390×844, 820×1180 and 1440×900 for every screen you build
• Compare the three side by side, not one after another
• Use the 8 px snap grid instead of nudging with the arrow keys

Note: App Builder previews a design by resizing a frame. It does not run your layout in a live browser, so breakpoints are something you check by hand at each preset rather than something the app tests for you.

Decide what reflows, what scrolls away and what hides

Every element falls into one of three groups: it reflows, it scrolls, or it hides. Deciding the group for each element before you build is the actual work of responsive design, and deciding afterwards means untangling a layout that was never designed to answer the question.

Content reflows: text, images, cards, lists and forms. Chrome scrolls: a long list, a wide table, a block of code. Navigation hides: a sidebar that becomes one icon, a secondary column that disappears below a threshold. The mobile app screen guide applies the same three-way split to phone layouts.

Write the rules down as sentences, because they will be asked about later. Below 820 the sidebar hides and the content goes full width. Between 820 and 1280 the sidebar is narrow and the content keeps a maximum width. Above 1280 the content centers inside the frame.

• Reflow: text, images, cards, lists, forms
• Scroll: long tables, wide code, feeds
• Hide: secondary columns, extra actions, filters
• Write each rule as a sentence with a number in it

Keep the spacing rhythm identical at every size

The spacing should not change with the width, only the arrangement. If the gap between cards is 16 pixels at 390 and 32 at 1440, the wide version reads as a different design rather than a wider one. Set the gap once in the auto-layout inspector and let it apply at every size.

Padding works the same way. A page with 16 pixels of padding at 390 and 64 at 1440 looks like two products. The exception is the outer frame, where extra width is sometimes used to center a content column rather than to pad the edges of the page.

The 8 px grid makes the rhythm checkable. If every gap and every padding is a multiple of 8, the layout holds together when you change one number, and the change shows up as a consistent step rather than a random adjustment. The spacing and 8 point grid guide has the scale in more detail, and the complete Canvasola guide covers the app as a whole.

• One gap value and one padding value, applied at every width
• Extra width centers the content instead of padding the edges
• Every gap and padding a multiple of 8

Note: Auto-layout gap and padding are both clamped between 0 and 96 in the inspector, so a rhythm built on 8-pixel steps fit comfortably inside those limits.

A checklist you can reuse

• The layout is complete at 390×844 before any wider frame was checked
• Auto-layout drives the arrangement, with gap and padding set in the inspector
• Headers, sidebars and sticky actions use stretch, top, left or bottom constraints
• The same screen has been compared at 390×844, 820×1180 and 1440×900
• Every element is labeled as reflow, scroll or hide
• Spacing and padding are identical at every width and are multiples of 8
• The break-point rules are written down as sentences with numbers in them

Common mistakes to avoid

• Designing wide and shrinking later. A layout built at 1440 pixels usually has to be rebuilt at 390, because the wide version never had to decide what mattered. Build the narrow frame first.
• Stretching every element. Content that stretches to the full frame width at 820 is a sign the layout has no structure. Use auto-layout and a maximum reading width instead.
• Sizing with scale constraints. A scaled text block grows its box but not its type, which reads as a mistake. Reserve scale for elements whose size is meant to change.
• One spacing scale at 390 and another at 1440. When the gap changes with the width, the wide version stops looking like the same product. Set the gap once and let the layout reflow inside it.
• Skipping the tablet width. The 820-pixel width is where most layouts break, because a two-column arrangement either fits or it does not. Check it before you check the desktop.

Frequently asked questions

What is the best width to design a responsive layout at?

The narrowest width your users will meet, which for most products is around 390 pixels. The iPhone 14 preset in App Builder is 390×844. If the design only works there and needs rewriting at 820, the layout is not responsive, it is a phone layout with extra steps.

How do I simulate a breakpoint in App Builder?

By changing the frame preset. The frame inspector offers iPhone SE 375×667, iPhone 14 390×844, iPhone Pro Max 430×932, Android 412×915, Tablet 820×1180, Laptop 1280×800, Desktop 1440×900 and a custom size. The frame resizes, and auto-layout and constraints decide what happens to the content.

Should the gap change at wider sizes?

Usually not. Keep the gap and the padding the same at every width so the design reads as one system, and use the extra room to center the content or to give a column more space. If a gap genuinely needs to grow, write down the number and the width at which it changes.

Can I test my layout in a real browser?

Not directly. App Builder previews a design by resizing frames, and the static HTML and CSS export renders the screens without any JavaScript, so the page does not reflow the way a live site would. Use the exported HTML to check the finished result, and the frame presets to check the layout rules.

This guide is part of the app builder guides collection. For the wider product tour, read the complete Canvasola guide, and keep the keyboard shortcut cheat sheet open while you work.