Layout & Principles · Layout & Grids
Responsive vs Adaptive Design
also known as RWD vs AWD
Responsive design uses flexible grids and media queries so the layout continuously flows and reshapes to any screen size. Adaptive design detects the device and serves one of several fixed, pre-built layouts made for specific widths. Responsive is one flexible design that stretches; adaptive is several distinct designs that switch.
Don't confuse it with
Responsive = one fluid layout that continuously adapts to any width. Adaptive = multiple fixed layouts chosen at set breakpoints. Fluid layout is the underlying technique responsive design relies on for smooth resizing.
In the wild
A responsive site smoothly shrinks its columns as you drag the window; an adaptive site jumps between a phone version and a desktop version.