Skip to content
UX Atlas
Plate FND·043 · UI foundationGrid D2 · Rev. 2026-08-14

Responsive Layout

One layout that reflows across sizes, ideally driven by content limits rather than by device categories.

UI foundationCraft conventionFoundational

Definition

Responsive design, as defined by Ethan Marcotte in 2010, combines a fluid grid, flexible media and media queries so a single layout adapts to any viewport. Modern CSS allows much of this to happen intrinsically, without explicit breakpoints.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2Order of preference for adaptation
  3. 3Things that break at small sizes
  4. 4What breaks first as the viewport narrows
  5. 5In practice
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Any web layout.
  • Testing accessibility compliance.
  • Reviewing behaviour at 400 percent zoom.

Common mistakes

  • Designing desktop first and discovering the priority order too late.
  • Horizontal page scroll at small widths.
  • Hover-only interactions.
  • Testing at the standard breakpoints only, and never at the awkward widths between them.

Order of preference for adaptation

  1. 1.Intrinsic sizing: minmax, auto-fit, min and clamp. The layout adapts continuously with no breakpoints at all.
  2. 2.Container queries: components respond to their own available width.
  3. 3.Media queries: reserved for genuine structural changes, such as a sidebar becoming a drawer.
  4. 4.Separate templates: only when the task itself differs by device, which is rare.

Things that break at small sizes

  • Fixed-width elements, especially tables and code blocks. Give them their own scroll container.
  • Long unbroken strings such as URLs and identifiers. Use overflow-wrap.
  • Absolute positioning that assumed a wider parent.
  • Hover-dependent interactions, which do not exist on touch.
  • Fixed headers and footers that consume most of a short viewport, particularly with a keyboard open.

What breaks first as the viewport narrows

ElementFailureResponse
Data tableHorizontal scroll, or unreadable compressionCards per row, or a prioritised subset of columns
Multi-column formAmbiguous orderSingle column, always
Long navigationOverflow or wrap into three linesPriority plus overflow, or a drawer
Fixed-width mediaOverflow past the viewportIntrinsic sizing with a maximum
Side-by-side comparisonNothing fitsStacked with a sticky attribute column
Long unbroken stringsHorizontal scroll from one URLWrapping rules that allow anywhere breaks

In practice

  1. i.

    Tables at 320px

    Data display

    A table wrapped in a focusable, labelled scroll container keeps every column intact and remains usable by keyboard. Collapsing columns hides data the user came for.

  2. ii.

    The table at 320 pixels

    Reflow as a requirement

    Eight columns of financial data cannot become one column of eight rows without losing the comparison. The honest answers are a prioritised subset with a detail view, or a scrollable region with a pinned first column, and both are design decisions rather than CSS ones.

Local chart

FND·043 · Region II · Grid D2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Data TableCMP·025 · APPLIED THROUGHMobile Interaction PatternsPAT·027 · APPLIED THROUGHWebflowTOOL·005 · OFTEN USED WITHPutting a Data Table on a PhoneCASE·005 · PRACTICAL EXAMPLEMobile UX ChecklistCHK·003 · CHECK YOUR WORKWeb UX ChecklistCHK·011 · CHECK YOUR WORKBreakpointTERM·044 · SHORT DEFINITIONContainer QueryTERM·070 · SHORT DEFINITIONResponsive DesignTERM·043 · SHORT DEFINITIONViewportTERM·045 · SHORT DEFINITIONReflow and ZoomA11Y·013 · RELATED CONCEPTAdaptive LayoutFND·044 · RELATED CONCEPT

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  1. [1]

    Responsive Web Design

    E. Marcotte, A List Apart, 2010

  2. [2]

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A Mobile App

Applied through

Where this shows up as a concrete interface decision.

Often used with

These usually appear in the same screen or the same decision.

Practical example

A worked decision where this was the deciding factor.

Check your work

Review passes that test whether this was done properly.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.