How is responsive design different from adaptive design?
TL;DR
Responsive design usually means one fluid layout that continuously adapts using flexible sizing, media or container queries, and responsive media. Adaptive design usually means choosing among a smaller set of deliberately different layouts or experiences. The terms are informal and real products often combine both; adaptive design does not inherently require user-agent sniffing.
How is responsive design different from adaptive design?
Conventional distinction
Both approaches aim to make an experience work in different contexts, but they emphasize different forms of adaptation:
| Dimension | Responsive design | Adaptive design |
|---|---|---|
| Layout | Fluidly grows, shrinks, and reflows | Switches among predefined arrangements |
| Common inputs | Available inline size, aspect ratio, user preferences | Breakpoint ranges, capabilities, or product-defined contexts |
| Typical implementation | Flexible units, Grid, Flexbox, media and container queries | Distinct templates, component variants, or server/client-selected experiences |
| Main risk | A single fluid composition becomes hard to control at extremes | Variants drift apart or make unreliable assumptions about users |
This is industry terminology, not a strict browser-platform classification. A layout that uses fluid tracks between two major breakpoint-specific compositions could reasonably be described as both.
Practical choices
Responsive techniques are a strong default for content that is fundamentally the same at every size. For example, a product grid can let tracks grow and wrap while responsive images provide suitable resources.
Adaptive variants are useful when a context needs a materially different composition or interaction—for example, a dense editing workspace may expose persistent panels on a wide screen but use an explicit panel switcher in a narrow container. The alternative must preserve access to the same important actions and content rather than hiding them solely because a screen is small.
Avoid device assumptions
Adaptive design does not require detecting an iPhone, tablet, or desktop user agent. CSS media and container queries can select predefined layouts by available space, while feature detection can select behavior by capability. Server-selected variants can be justified for device-specific delivery constraints, but user-agent detection is brittle and caching must account for any request-dependent response.
In either approach, choose breakpoints from content, test text zoom and translations, and avoid equating viewport width with input method. A wide touch device and a narrow desktop window are both normal cases.