This is a question that comes up more regularly than you might expect. We see it pop up in the CSS-Tricks forums from time-to-time. It’s also a common question I’m asked when teaching introductory web design.
And it’s a good question!
Responsive web design has become a household term since it was coined by Ethan Marcotte on A List Apart in 2010; so much that we may take our understanding of it for granted. The concept of a responsive website is one of the greatest CSS “tricks” in the books and important enough to step back from in order to both remind ourselves what makes a “responsive” website and how it’s different from an “adaptive” one.
So, with that, let’s look at the difference.
Responsive sites and adaptive sites are the same in that they both change appearance based on the browser environment they are being viewed on (the most common thing: the browser’s width).
Responsive websites respond to the size of the browser at any given point. No matter what the browser width may be, the site adjusts its layout (and perhaps functionality) in a way that is optimized to the screen. Is the browser
300px wide or
30000px wide? It doesn’t matter because the layout will respond accordingly. Well, at least if it’s done correctly!
adapt to the width of the browser at a specific points. In other words, the website is only concerned about the browser being a specific width, at which point it adapts the layout.
Another way to think about it is the difference between smooth and snap design. Responsive design is smooth because the layout fluidly adjusts regardless of what device it is viewed on. Adaptive design, on the other hand, snaps into place because the page is serving something different because of the browser or device it is viewed on. This animation illustrates the difference in behavior:
Notice how the responsive example flows with the environment whereas the adaptive snaps into place at a defined environment.
The difference between responsive and adaptive sites goes a little deeper than the simple examples above. You might even think of it as a difference in philosophy.
Let’s consider the crux of Ethan’s original definition of responsive web design:
Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.
Notice the operative words fluid and flexible. Responsive design is a means of becoming device agnostic in the sense that it seeks to create an optimized experience for any screen. This thinking challenges us to create sites that shift context according to how a site is being consumed on any given occasion. That means our containers should be fluid (as in using percentages as unit measures), the assets we serve should be flexible (as in serving the right assets to right devices at the right time) and our media queries defined where content breaks (as opposed to the width of a specific screen size, say iPhone).
Compare that with an adaptive way of thinking, which is neither fluid nor flexible, but looks for specific points at which to adapt. While it might be difficult to adapt a website on all the various devices out there, there’s a roundup of device-specific media queries you can refer to.
Update: There has been a lot of awesome conversation in the comments about the difference between responsive and adaptive design. The important takeaway is that the difference comes down to more than media queries and pixel units. The animated GIF example earlier in the post is one way to illustrate the difference as those terms are recognized here, but this post also provides a nice series of illustrations to drive the point further.
I’m not even going to go there. I believe it’s a difference in philosophy, just as responsive web design is from mobile-first responsive web design. You choose the best tool for the project at hand.
Are you forced to choose one over the other? The choice might be easier if you know that you have specific devices your site must support. You might decide that iPhone 6 is the only device that matters and adapting to it wold be a lot easier and more efficient than accounting for other devices. On the flip side, a responsive design is a good strategy for future-proofing a site against the possibility of any (perhaps even unreleased) device on the market.
Both responsive and adaptive designs are the same in that they are methods for dealing with the reality that websites are often viewed on different devices in different contexts. They just happen to go about it in their own ways.
Remember: the web is responsive by nature. It doesn’t need to respond or adapt to any devices until we start designing it.
If you’re looking to dive into responsive design, the best thing to do is practice. There is no shortage of resources out there to help you get started, so have at it! Here are a few to get you started:
- This is Responsive: A collection of examples, patterns and resources curated by Brad Frost.
- ResponsiveDesign.is: Another treasure trove of resources, in addition to articles and a podcast!
- Responsive Web Design Podcast: Speaking of podcasts, here’s one co-hosted by Ethan Marcotte and Karen McGrane.
- Responsive Web Design, by Ethan Marcotte: Ethan literally wrote the book on it and did so with the utmost clarity.