Adaptive vs. Responsive, what’s the difference?

There seems to be some confusion about these terms and what they mean, so here’s my thoughts on the subject and few links to back them up. I’m usually not very keen when it comes to debating over what something is called, but this time I wanted to make it clear, as I hear this question quite often.

“Responsive design” is a subset of a larger concept which is called “Adaptive design”. When talking about responsive we refer to the layout only (Ethan Marcotte, fluid grids, flexible images & media queries).

“Adaptive design” on the other hand includes much more than just fluid layout. In practice it means the same thing as progressive enhancement, which means in short, that we aim to deliver the best possible experience to the widest possible audience. Also: “Adaptive design” shouldn’t be mixed with “Adaptive layout” which is a completely different thing.

Finally, “Adaptive layout” means a layout done by combining multiple fixed widths. Right now, I feel that Adaptive layout — when done right and when fixed widths are combined with fluid widths — is one form of responsive design and not just an alternative to it. Zeldman shared a bit similar idea in his blog post from 2011.

Adaptive design explained

Links/sources:



Update v1. If my post made things look more complicated than they actually are, then this all in short: Resposive design is a subset of adaptive design. Responsive design = fluid layout only, while adaptive design = fluid layout + progressive enhancement.

← Blog