Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Responsive Layout

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

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 page
  1. Definition
  2. Order of preference for adaptation
  3. Things that break at small sizes
  4. In practice
  5. Sources
  6. Continue from here

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.

In practice

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.

Sources

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

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.