Last Updated on April 15, 2014
Adaptive is in reaction to devices – responsive is in anticipation of devices.
Source: http://www.amberweinberg.com/is-it-adaptive-or-responsive-web-design/
There seems to be a lot of confusion in the industry among both us web folk and clients about the differences between adaptive and responsive web design. I’ve even seen someone go so far as to say they’re both the same thing. They’re not. For the most part, clients could care less what way you go about mobile – as long as it works for them. However, there’s a major difference between the two, both in terms of coding and in terms of future-proofing the site.
The sort end of it: adaptive design works with device widths or viewports, responsive works through any width. Here’s good example of an adaptive site and a responsive site. The easiest way to tell if a site is adaptive or responsive is to start resizing your browser. If the site continuously reflows: it’s responsive. If the site stays the same and then jumps to different layouts at certain points: it’s adaptive.
While adaptive design is quicker and easier to implement, it’s generally a bad practice to go about. It caters to today’s devices only and doesn’t make provisions for new devices with different widths that may be released tomorrow. Responsive on the other hand, works with every width between the smallest and largest versions. While this means much more work on the developer’s part to ensure there are no breakpoints within the site, it also means the website is much more likely to work properly on any new device.
Responsive design does NOT have breakpoints set specifically to today’s devices. It’s breakpoints are set to when the site actually breaks in design. Adaptive on the other hand, is based on actual device widths. Responsive and adaptive web design are all about CSS and media queries. The addition of JS to help this along, while not a good practice for other reasons, does not define what adaptive and responsive web design are. It’s all about the CSS in this point and time. Everything else a developer uses just helps one of these one.
While adaptive design is not the ideal way to go, it has it uses. If a client comes to you and wants a mobile friendly site, but doesn’t want to pay for an entire recoding, it ‘s better to make the site work at today’s current viewports than to try and force the site to be fully responsive. Also, sometimes the client’s budget doesn’t allow for a full responsive site. Other than those scenarios though, there shouldn’t be any reason to implement this.
The difference between the two are clear. Adaptive is in reaction to devices – responsive is in anticipation of devices.
