UX Glossary · A
Adaptive design
Serving one of several fixed layouts based on the detected device, rather than one layout that flexes.
Adaptive design builds several distinct fixed-width layouts and delivers whichever one matches the device it detects. A site might hold separate layouts for 320, 768, 1024 and 1440 pixels and serve the closest match.
This is the older of the two approaches and is often contrasted with responsive design, where a single fluid layout reflows continuously across every width.
Where each one wins
Adaptive gives tighter control. Each layout is designed deliberately for its context, so nothing has to work at every possible width, and the version sent to a phone can omit heavy assets entirely. That matters on slow connections.
The cost is maintenance. Four layouts is four things to update, and a device that falls between two of them gets whichever is closest rather than something designed for it. Responsive has largely won for this reason, helped by CSS grid and container queries making genuinely fluid layouts easier to build than they were in 2010.
In practice
Most work today is responsive with adaptive touches: one fluid layout, plus a few decisions that switch outright at a breakpoint rather than scaling. A navigation that is a horizontal bar on desktop and a drawer on mobile is an adaptive decision inside a responsive layout.