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 plate
Reach for this when
- The task genuinely differs by context.
- Input capability changes the interaction model.
- Serving both native and web surfaces.
- The interaction model genuinely differs between form factors, not just the available width.
Common mistakes
- Feature reduction on small screens.
- User agent detection.
- Two codebases that drift apart.
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.
Adapting to capability
Do
- Detect capability, such as pointer type or hover support, rather than device name.
- Keep feature parity across form factors. Different arrangement, same capability.
- Increase target sizes for coarse pointers rather than assuming a phone.
- Treat a touchscreen laptop as both, because it is.
Do not
- Branch on user agent, which is wrong within a year and wrong for edge devices immediately.
- Ship a reduced mobile version and call it responsive.
- Assume small screen means hurried, or large screen means unhurried.
In practice
- i.
Touch-specific target sizing
Cross-device productsIncreasing 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.
- ii.
The tablet that had a mouse
Why device names failA layout keyed to tablet width applied touch target sizing to a device driven by a trackpad, and hover-only controls to one without a pointer. Querying pointer and hover directly answered both cases correctly.
Local chart
FND·044 · Region II · Grid C2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
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
Applied through
Where this shows up as a concrete interface decision.
- Mobile Interaction PatternsPAT·027 · Pattern
Practical example
A worked decision where this was the deciding factor.
- Putting a Data Table on a PhoneCASE·005 · Case study
Check your work
Review passes that test whether this was done properly.
- Mobile UX ChecklistCHK·003 · Checklist
Short definition
The one-paragraph version, for when that is all you need.
- Inclusive DesignTERM·082 · Term
Related concept
Connected closely enough to change how you apply this.
- Reduced MotionA11Y·012 · Accessibility
- Target SizeA11Y·011 · Accessibility
- BreakpointsFND·045 · UI foundation
- Responsive LayoutFND·043 · UI foundation