Skip to content
UX Atlas
UI foundationCraft conventionIntermediate

Adaptive Layout

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

Definition

Adaptive design serves different layouts, and sometimes different content, for different contexts. It differs from responsive design, where one layout flexes. The two are frequently combined.

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

On this page
  1. Definition
  2. When adaptation is justified
  3. Adapt to capability, not to device name
  4. In practice
  5. Continue from here

When adaptation is justified

Adaptation is justified when input, context or task differs, not when the screen is merely narrower. Touch versus pointer changes target sizes and removes hover. A phone in a shop is a different situation from a desktop at work, and the primary task may genuinely differ.

It is not justified as a shortcut for a layout that was designed desktop-first and does not reflow. That produces two codebases and a mobile experience that quietly loses features.

Adapt to capability, not to device name

  • Use pointer: coarse and hover: none to detect touch, rather than guessing from width.
  • Use prefers-reduced-motion, prefers-color-scheme and prefers-contrast to respect stated preferences.
  • Use Network Information where available to reduce payload on constrained connections, with a sensible default when it is not.
  • Never use user agent sniffing for layout. It is unreliable and it fails for every device you did not anticipate.

In practice

Touch-specific target sizing

Cross-device products

Increasing target sizes under pointer: coarse addresses the real difference, which is input precision, rather than assuming narrow means touch. Tablets with keyboards and touchscreen laptops both break the width assumption.

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.

Principles behind this

The reasoning this solution is an application of.

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.