The Difference Between Responsive and Adaptive Design

This is a question that comes up more regularly than you might expect. 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.

The Short Explanation

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!

Adaptive websites 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:





                            Responsive on top, Adaptive on bottom

Notice how the responsive example flows with the environment whereas the adaptive snaps into place at a defined environment.

The Longer Explanation

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.

The Bottom Line

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.