progressive enhancementresponsive, or
This article was written in 2013. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.
What is the difference between responsive web design and adaptive web design? It’s a bit of a boring question, but I think we need an answer to it, since these terms are both used, and people mean different things by them. It causes confusion.
Responsive web design
In his book, Ethan Marcotte — the person who coined the term — writes that responsive web design
takes three core ingredients:
- A flexible, grid based layout
- Flexible images and media
- Media queries
So basically, if we use the term as Ethan proposed it, responsive web design is about fluid layout for different screen sizes and related technical issues and solutions. I know many people use a much broader definition.
Adaptive web design
Around the same time that Ethan Marcotte published his book, Aaron Gustafson published another book called Adaptive Web Design. When I bought it, I thought it would be about the three points outlined above, about layout basically. But I didn’t really pay much attention to the subtitle of the book, which reads Crafting Rich Experiences with Progressive Enhancement. In this book, the term adaptive web design is used as an exact synonym for progressive enhancement.
If I ask people what they mean when they use these terms I get as many different answers as there are people. Some reverse the terms and say that adaptive is just about layout and responsive is about everything. Others say responsive is about fluid grids, while adaptive is about media queries with fixed grids in them, both very limited definitions. And the opposite definition is used too, of course.
I don’t think there needs to be a difference between the terms. If it’s up to me, both responsive web design and adaptive web design are synonyms for progressive enhancement. I think Ethan’s definition is a little outdated and unnecessarily restrictive. I don’t think there’s a reason anymore to just talk about optimising layout, we should talk about optimising other features, and interactions too.
But what is it?
But, as is often the case, I could be wrong here. It could be that I haven’t thought about it long enough or that I don’t understand the reasons behind more restrictive definitions. I’d love to hear your opinion, since I’d love to be able to use these terms without causing confusion. Comments are open.