An approach to interface design that creates distinct fixed layouts optimized for a defined set of breakpoints or device types, rather than one continuously fluid layout. Unlike responsive design, adaptive designs detect the user's context and serve a specific pre-built version — useful when experiences need to be fundamentally different across platforms, not just reflowed.
Common contexts
- Building a separate mobile checkout flow with tap-optimized targets and fewer form fields
- Serving a stripped-down, text-first version to users on slow connections in emerging markets
- Designing a desktop dashboard with dense data tables that would be unusable if simply reflowed
Use when
Choose adaptive design when the tasks users complete on mobile are genuinely different from desktop — not just the same content in a smaller frame. If the interaction model, input methods, or information density need to change fundamentally, a pre-built adaptive layout will always outperform a fluid responsive one.
Avoid when
Adaptive design creates a maintenance burden that compounds over time — every new feature must be designed, built, and tested twice. Avoid it when the only real difference between contexts is screen size, or when the team doesn't have the resources to maintain divergent codebases without one falling behind.
The question isn't 'can we reflow this for mobile?' — it's 'would a mobile user even want to do this task on their phone?' If the answer is no, you may need an adaptive experience, not a responsive one.
Real-world examples
- Amazon's mobile site serves a distinct layout built specifically for small screens rather than simply scaling the desktop version down.
- The BBC News website delivers different fixed-width templates to phones, tablets, and desktops to optimise load times and readability on each device class.
- Microsoft's older MSN portal used server-side device detection to serve lightweight HTML to feature phones while full-featured pages went to desktops.