LambdaTest Community

Find answers, support, and inspiration from other users

LambdaTest Community

What is the difference between responsive and adaptive design?

Please anyone can tell me the difference between responsive and adaptive design?

Up Vote Down Vote 0 Votes
Posted 3 months ago


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.

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.

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.

  • 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.

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.

Up Vote Down Vote 0 Votes
Posted 2 months ago