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.
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!
See the Pen Responsive Example by CSS-Tricks (@css-tricks) on CodePen.
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.
See the Pen Adaptive Example by CSS-Tricks (@css-tricks) on CodePen.
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 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.
Is Responsive Better Than Adaptive?
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.
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.
Oh dear…this post is quite off the mark.
Responsive design can be fluid or fixed, so can adaptive. The difference is that Responsive design doesn’t care about what browser is used, it responds to the browser size and reflows the layout accordingly.
On the other hand, adaptive design adapts to the browser environment specifically, and may or may not take into account the browser’s current size.
It is essentially the difference between media queries (responsive) and device detection (adaptive), although in a CSS-only realm it is more along the lines of using
@media (min-width: X)(responsive) vs@media (min-device-width: X).https://developer.mozilla.org/en-US/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design says it even better than I did.
Glad I’m not the only person to whom this article felt weird/wrong.
Yeah, you are right.
Yes zzzzBov you’re right, I read the article and thought I was lost.
Responsiveness can be Fixed or Fluid as you pointed out, the article is not really clear.
This is interesting feedback!
While I do agree that there is a distinction in how you describe the difference between both methods, it sounds more like what you’re describing as adaptive design is closer to the definition of Responsive Server Side (RESS).
I disagree with this point and will cite Ethan’s definition of responsive design again:
There is nothing “fixed” about responsive design. It should be fluid in all conditions. Yes, both responsive and adaptive designs can (and often do) use media queries. It’s the lack of relative unit measures in adaptive design that create the difference, resulting in the fixed, snappy adaptive behavior.
That’s my two cents, at least. The points here are well-taken but I do think there is a misunderstanding (or perhaps difference in understanding) of the base definition of a responsive design.
This was always my understanding between the two as well. Responsive is apathetic towards the environment whereas adapative changes because of it.
Geoff I think you may have taken what zzzzBov said perhaps too literally.
What if a layout has a fixed width until a certain point and then becomes fluid, does that break the rules?
According to what I have read the only thing you see which separates what you call Adaptive and RWD is the lack of Fluid grids.
I have seen this crop up again and again, obviously Ethan officially coined the term ‘Responsive Web Design’, Luke Wroblewski coined the term ‘RESS’, but didn’t someone actually coin Adaptive Web Design and reserve it already?
I’m confused. The examples you’ve shown seem to me like they are different forms of responsive design.
Why is the distinction important? What decisions should I make based on this difference? When should I choose one over the other?
All this article seems to do is introduce a new term say “Don’t get it mixed up!” and fail to explain why it is important.
Hey, thanks for chiming in!
Good question. The difference is that one version (responsive) uses relative units (e.g. percentages) to fluidly respond its layout to any browser/device conditions. The other version (adaptive) uses fixed units (e.g. pixels) to adapt to a specific condition.
I’m not sure the article tries to say “Don’t get it mixed up!” but instead admits the difference is easily and often mistaken and attempts (perhaps not effectively in this case) to draw the distinction.
This is not how I’d describe “adaptive” design at all. I don’t know where this came from, but I thought adaptive described adapting to the context of the device the page is being rendered on. So larger buttons for tablet devices. A tablet might have the same screen resolution as a desktop, but desktop doesn’t need the large touchable buttons, where the tablet does.
I thought that’s what “adapting” meant.
That’s definitely part of the equation and I think we’re essentially saying the same thing: adaptive design will snap it’s design into place based on the specific environment (i.e. browser conditions, device, etc.) it is served on, whereas a responsive design will smoothly serve an optimized experience, no matter what the environment happens to be.
So, yes, both responsive and adaptive designs can have larger buttons for larger screens. Adaptive design, however, will determine the size of those buttons according to a specific browser or device condition so it can adapt accordingly.
I thought the same and I’m also confused by this post.
In my opinion:
Responsive is the same layout in a fluid or snappy way responding to the browsers size.
Adaptive is the same but it adapts also to the way the user interacts with the website. Like you say “larger buttons on touch devices”. But that way of adaptive can also be fluid or snappy.
However, I like the way we call “adaptive”. Changing button sizes for touch devices, etc. ;) Whatever name you want to give it :)
When I was trying to figure this out for myself in 2011, I came across a number of articles that essentially aligned with the definitions outlined in this post:
Forget Responsive Web Design
Responsive and Adaptive Web Design: Defined
Responsive Design. I don’t think that word means what you think it means.
Responsive Web Design Demystified
And then Brad Frost came out with an article in 2013 that completely swapped the definitions: defining “adaptive design” as the broad, umbrella term for creating interfaces that adapt to the needs and capabilities of the user, with “responsive design” as a specific technique under that umbrella.
So, at this point, I would agree with Rob Lang that it just isn’t very useful to try and debate this distinction anymore:
If we take this post’s definition of “adaptive design,” then adaptive design is no longer a viable approach to modern web design. There are just too many viewport sizes to cherry pick and target.
If we, instead, take Brad Frost’s definition, or one of the alternate definitions in this post, it just becomes a subtle, never-ending battle over semantics.
At the end of the day, though, we all have a fairly good sense of what responsive design is. I say let’s just let adaptive design fade away as a term.
Very cool thoughts and links! What I like about the responsive web design discussion overall is that it’s evolving, especially as our tools improve and devices change.
https://developer.mozilla.org/en-US/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design describes it as
Which is much closer to how I think of Adaptive Design.
I think the difference between adaptive and responsive is best demonstrated by liquidapsive.com … essentially: Responsive = Fluid + Adaptive (or perhaps Responsive = Fluid x Adaptive!)
Yep I agree with Andrew: http://www.liquidapsive.com/
@zzzzBov you’re thinking about RESS (Responsive Server-Side), however I’ve also heard the term Adaptive used in that instance as well.
My philosophy is to use fluid breakpoints at smaller sizes which then become adaptive fixed sizes at larger screen sizes. Saves a hell of a lot of testing and the designs look much better.
That’s a good philosophy! It’s true that the market for larger screens dwindles at a certain point whereas the number of devices and features at small screen sizes is massive.
Terms and lingo in this industry tend to change meaning or evolve into something nearly completely different sometimes, i.e., the ever-changing definition of a front-end developer.
I think Brad Frosts’ article The Many Faces of Adaptive Design explains both adaptive and responsive design well and it describes the term ‘adaptive layouts’ as the method of snapping to fixed widths.
We just need to scrap all names and terminology and come up with a community wiki defining each one.
Seems like there is an opportunity her to redefine these terms to make them more clear. Why not Fluid or Full Responsive and Stepped Responsive for the examples in this article.
Both examples respond to the changes in media width making them “Responsive”. One is a continual response making it “Fluid” or “Fully” Responsive and the other responds in “Steps” or “Tiers”.
A basic example of the difference would be Bootstraps
.containerand.container-fluidAs for adaptive I would describe it as a “run once” type of responsive. In that when a site is loaded it is determined then an there which layout should be used by either the server or client side determining the initial browser width or device type and choosing which version of the site be displayed.
I agree with most of the commenters here who think this article is a little off the mark. Brad Frost’s article is much better IMHO
http://bradfrost.com/blog/post/the-many-faces-of-adaptive-design/
Clearly, there is some confusion out there.
Responsive = websites respond to browser resizing, period. Where is the “at any give point” part taken from? I have a feeling this part was intentionally added just to have a point to differentiate responsive from adaptive (“adaptive adapts at specific points,” wth?)
The concepts are correctly explained by Mozilla, as linked aboveIMO.
Also, you know your differentiation has a flaw when the objects can be switched and it still sounds perfectly right:
Responsive websites adapt to the size of the browser at any given point.
Adaptive websites respond to the width of the browser at a specific points.
See what I mean?
Take the quote from the guy who wrote the book on Adaptive Design:
“For the record, I do think it’s important to draw a distinction between “adaptive web design” and “adaptive layouts” because “adaptive layouts” implies only the use of media queries, which may not be done in a progressively enhanced way. ”
http://blog.easy-designs.net/archives/on-adaptive-vs-responsive-web-design/
I think a more accurate title to your blog post would be “The Difference Between Responsive and Adaptive Layouts.”
Is there any difference between responsive and adaptive design from an end-user perspective? Most users don’t notice whether a design “snaps” or “flows” at different browser widths because the majority of users don’t change the width of their browser, unless they’re in the web industry.
For example, a user seeing a site on their phone and then completing their journey on their desktop won’t ever see that “flow” or “snap” change. They’ll see a site that works well on both devices, that has responded and adapted to their different device, and then they’ll forget about it when they’re on the next site they need to do something with.
Yes! I had the very same thought. I completely agree.
I totally agree. Who cares if it snaps? The important thing is that the pages look good and are usable at any screen size and on any device.
It might be possible to hand craft media queries for perfect fluidity on a small site, or one that only has a couple of possible page layouts. But for most sites that is not the case – and really not future-proof.
Just as we dont know what the next device will be, we know even less about the needs of content a year from now.
I think there is a distinction between responsive and adaptive designs. This difference should be apparent to the end-user. To my mind ‘responsive’ makes it fit nicely (even if you resize/rotate) whereas ‘adaptive’ presents different features and behaviour dependent on device. Adaptive is device and feature detection. Responsive is viewport detection.
*Except by ‘detection’ I meant ‘dependant’ :)
Well, maybe most users won’t think “Wait, this should be responsive, not adaptive!”, but they might very well be affected by the content not being able to make full use of the space that is hidden in the (sometimes wide) margins around the containers in Adaptive Webdesign. Also, they might turn their handheld devices – resizing happening right there.
An unfortunate use of general terms to define specific technical features, within a diverse and evolving design community. Anyway, my interpretation, with some help from dictionary definitions:
Fluid – “pertaining to a substance that easily changes its shape; capable of flowing.” – i.e. use of relative rather than fixed sizes. Could apply to a fixed size browser experience, where expanding some content makes existing content flow around.
Adaptive – “characterized by or given to adaptation: ‘mutation is ultimately essential for adaptive evolution in all populations'” – i.e. has specific changes, which might include shape, but also ‘mutates’ content for the type of device.
Responsive – “reacting quickly and positively” – i.e responding ‘fluidly’ or ‘adaptively’ to changes in the environment, such as browser rezise. I disagree with the point Karl Brown made, because users do change their browsr size. Small device users change orientation, and desktop users sometimes do run on non-full-screen (remind me of the term for that) and resie windows when they have a few apps open. Personal anecdote: If I’m reading a long op-ed piece I’ll often shrink my browser width to make reading easier.
I think the author is wrong about the concepts and is making things quite complicated.
First, responsive does not have to be fluid. Responsive is the feature that changes the styles of a page by relying on the css media queries (some make this happen with js too). You can make your site fluid or not because all it takes is defining lengths as percent or pixels.
Adaptive is changing the actual html (and in consequence also the loaded css, js and other assets) by detecting the device on the server side. Basically you serve different optimized pages based on the device type.
Therefore responsive, adaptative and fluid can all be working simultaneously on your site.
Responsive is more popular because it is easier. The popular cms like WordPress or Joomla don’t make it easy for building adaptive sites. And in most cases it is really not needed. If your site or application is complex enough to require adaptive, you probably have the development level needed to figure it out.
Does any of it really matter?
It is the end user of the site that is important and as long as the design and functionality hold together across devices and UX and download speeds are good the end user won’t care either way if it is responsive or adaptive. They probably don’t have a clue what it would refer to anyway.
Most of the sites I have put together and most sites I visit actually seem to combine elements of both responsive and adaptive into an overall hybrid form of design.
After reading a few comments here I think there is a lot to be mis-understood in this article/topic.
A lot of commenters are pointing out adaptive design as a way for the design to ‘adapt’ to it’s context. Meaning that buttons on a desktop site might be smaller with less padding than those on the mobile version. The context in which the site is viewed needs to ‘adapt’ to the user and how they are using the site. This argument I agree too.
But, it seems in this article the point that it being called out is the difference between adaptive and responsive in the context of how site’s physically break down. Do they snap to a specific screen size (adaptive) or do they break down when the design falls apart (responsive).
All in all, I believe the points of ‘adaptive’ in regards to functionality of the site should be considered no matter how you choose to introduce media queries.
Spot on. Thanks for reading the post and noticing the difference between what is written and what’s being discussed in the comments.
And yet, if you look at it as Aaron Gustafson (author of Adaptive Web Design) do, Responsive Web Design is a subset of Adaptive Web Design.
AWD is merely another word for progressive enhancement, in which RWD is usually an integral part.
This is the way I prefer to use the term Adaptive Web Design, but most articles on the subject often discuss RWD vs AWD as if they would be different beasts. Like this one article.
I knew Adaptive Webdesign as the technique described here, as well. I also understand Goldilocks to be the same thing: http://goldilocksapproach.com/
Whatever the name, it can be a good choice for handling fixed-sized components on a row – e.g. an image gallery if you want (for whatever reason) your images to always be displayed at a width of exactly Xpx with Ypx between: Once you have enough room to add another 1 or 2 items, adapt the container’s width to allow for those items to be added to the row.
It’s seems like Analogical/Digital. Changing due to a threshold or changing at every moment.
This is the definition I’ve come to here more often than not of responsive and adaptive. The responsive definition is usually very clear in my opinion because there was a definitive book written on the subject by Ethan Marcotte. The confusion is always on the definition of the word “adaptive”. There are a few meanings I’ve heard:
1- separate mobile website using device detection
2-responsive web design minus the fluid grid and flexible images (so only media queries)
3-the RESS definition
When I talk with people at work or at a meetup and they say “adaptive” I always ask what they mean by adaptive because we all have different definitions. And I try to avoid this word in my own vocab. Great article thanks for the clarification.
Popular examples can be – https://m.facebook.com (adaptive) and https://facebook.com (responsive).
But the screenshot (Responsive on top, Adaptive on bottom) is a bit confusing. Of course one can use
@mediawithPXbut%is better in RWD.In my understanding author of this article got it wrong. The core difference between responsive design and adaptive design is that adaptive design sends only the by a specific device needed elements and content to the device. In responsive design everything (for all devices) gets send (from the server to the client). It is like when I am ordering a pizza the whole pizzeria is coming to my front-door instead that only my ordered pizza gets delivered. Adaptive design overcomes this birth defect or responsive design which is the culprit for the code bloat we have seen during the last years. Smart adaptive designs are using responsive design technologies for front-end processed adjustments but free the device from wading through a huge swamp of stuff which is not needed by the requesting device (client).
@Harald I think you got it wrong: Not, that you cannot define Adaptive Design any way you want, but, apparently, the author had another definition in mind – there is not one clear definition of it.
But, more importantly, RWD is hardly responsible for code bloat: You will slightly increase your CSS’ size (and, depending on your specific technique, might use a few more classes in your markup), but in most cases that will be all but irrelevant. What really can make a big difference (especially in RWD) is Adaptive Images – only sending a max480x480 image on a 320×480 screen instead of the original 2MB image)!
@Geoff, FWIW, I think you’re spot on. There is way too much confusion around terms, especially ‘responsive’. It can mean many things. You posted an article around one meaning and got beat up for it by folks who are using that word to refer to other meanings.
I like your article so much I’m going to refer my friends to it. And I’d even like to use your animated gif showing the difference. Are you okay if I republish with attribution?
Looks like this article only added confusion instead of clarifying the difference, in part because the original terms are very poorly chosen. Still, I’m mostly with the author, here’s how I learned the terms:
Responsive: layout (mostly layout, but can also be other things like font size) responds to any view port size. To me that does not necessarily mean media queries, but if often will. A table set to width 100% is responsive, at any viewport size. By the official definition, it is just fluid, not responsive, but I don’t agree, because a fluid design without breakpoints responds to any viewport size. Breakpoints within this overall fluid approach are there to optimize layout and other things at specific points.
Adaptive: layout (and other things) respond (confusing term) only at specific breakpoints, and not in between breakpoints. Resizing between breakpoints may only add white space. Another interpretation of adaptive design is that actual functionality may change at the adaptive breakpoints, having very different designs per breakpoint.
That’s my interpretation. And to add to the confusion: hybrid scenarios are possible.
It’s very good sharing of the topic. You have differentiated well by your writing between two. Appreciating a lot.
While redesigning The Wall Street Journal we created a grid with breakpoints that snaps the design. We used media queries. So the snapping is totally a design choice and if you ever worked with editors you know that they are very picky about how text flows. Dynamic text can do all type of things that might be overlooked. Either way that GIF is wrong.
http://www.wsj.com/news/politics
See how the site snaps, it has 4 breakpoints. All media queries with a js library that moves things around the DOM.
Just saying.
Most of the discussions about this topic are useless.
Because “adapt to” = “respond to”. It’s two words for saying the same thing. So people are trying to give different meaning to it, so it can coexist.
But actually responsive design is adaptive, and vice-versa. Because it’s essentially the same.
These words are new and that’s why we’re having hard times defining them. But putting too much time trying to define it your own way is a loss of time.
It’s like when I see in this article sentences such as “fluid or flexible”. As if it wasn’t just the same thing. If you want to continue to lose your time with definition, please define then : liquid design, relative design, proportion-based design. Or just understand it’s all the same.
The initial philosophy is the one to be remembered (Ethan Marcotte’s original definition).
The rest, is just “DETAILS”. It’s HOW you implement the philosophy. Do I use media queries ? (snap design) or do I make that element fit it’s container ? (“elastic” or whatever you call it).
In real cases, you can’t just say “let’s go for responsive! ohh noo for adaptive!” because based on the definitions given in this article, most of the time, in real cases you’ll have to use both together.
The problem is that people come from the wrong paradigme. They discuss techniques as if they were philosophies. Responsive Web Design (RWD) is a philosophy coined by Ethan Marcotte but, everything else is techniques used to implement that philosophy. Don’t get stuck to those wordy problems.
Note to Chris Coyier : I would love to have a chance to elaborate this point of view in a detailed article, I’s been a long time I tackle these subjects and I have so much more to say, please tell me if that would be possible.
There are 2 types of AWD:
The client-side type: Which is what this article talks about.
The server-side type: Which is what Luke Wroblewski and Aaron Gustafson talk about: Responsive Server Side (RESS). Basically, progressive enhancement coming from the server.
Honestly, I can live with both.
At the end of the day it doesn’t matter which AWD technique we use for our sites, we just need to be damn sure to provide the best UX to our visitors and users. Period.
Great read Geoff. +1