responsive

Relative size is the fastest signal of importance and the easiest one to overuse.

UI foundation · Visual design

How the parts are arranged on the whole surface, which determines where the eye goes and in what order.

UI foundation · Visual design

A fixed set of sizes derived from one ratio, so type decisions become selections rather than inventions.

UI foundation · Typography

One file containing a continuous range of weights and widths, usually smaller than the static weights it replaces.

UI foundation · Typography

Type that adapts to viewport and container without breaking user zoom or the accessible minimum.

UI foundation · Typography

A shared structure that makes alignment automatic and layout decisions repeatable.

UI foundation · Layout

The constraint that stops content spreading to unusable widths, and increasingly the unit that components respond to.

UI foundation · Layout

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

UI foundation · Layout

Distinct layouts for distinct contexts, justified when the task genuinely differs rather than merely the screen size.

UI foundation · Layout

The widths at which the layout changes, chosen from where the content breaks rather than from a device list.

UI foundation · Layout

The conventions phones have settled on, what each one is actually for, and where they break.

Pattern · Structure

Content must work at 400 percent zoom without horizontal scrolling, which is the same as working at 320 pixels wide.

Accessibility · Perceivable

Text must scale to 200 percent without breaking, which means never sizing type in absolute units.

Accessibility · Perceivable

Hiding columns on small screens made the table tidy and removed the data field staff had opened it to see.

Case study · Data products