Responsive vs. Adaptive Web Design

I think we can all pretty much agree that making sure your site is fully optimized for mobile devices is industry standard at this point. But within that statement, there are a couple of approaches to making this happen. We’ve been fielding a lot of questions about the difference between adaptive and responsive web design recently. So, this in this post I’ll attempt to demystify the two a bit.

Responsive Web Design
The greatest advantage to a responsive design is in its name; the website itself responds to the mobile device that is attempting to reach the website. With the help of excellent and seemingly magical coding (ie: media queries), it responds to the user who beckons its content. Usually, the website responds with a beautiful rendition of the original website — with all images, links, content, and even ads in their rightful, usually stacked order.

The Major Responsive Drawback
As RWD enthusiasts, we don’t really have many complaints on this front, but if we had to pick one, it would probably be that load time can be a little slower. RWD requires the resizing of the site’s largest images. In practice though, we’ve found this to be minor on the barrier to entry scale.

Adaptive Web Design
How the adaptive framework differs from the responsive is that, in a sense, there is an entirely new website built for each device. Rather than reorganizing all the copy and content on your website to fit a little screen, with adaptive design you build a completely separate site (and site assets) for each breakpoint (device size). The best instance in which to use adaptive design is when you have a site that you don’t want to rebuild, but for which you need a mobile-friendly version.

The Major Adaptive Drawback
Adaptive web design requires content micromanagement across multiple devices – for each set of files. For example, if you change the first sentence on the desktop template of your About page, you will have to change it on the tablet and phone templates as well.

Final Conclusion
It’s our thought that you can do nearly everything with RWD that you can with adaptive design, and in a much more streamlined manner. The fact that you only have to manage one site and one set of assets with RWD typically wins out. We’re big responsive folks over here.

There is an excellent team at Visual.ly who did what they do best and put together an infographic to help you navigate the choices of responsive and adaptive website designs. Check it out to go deeper into the discussion and be sure to tell us your thoughts in the comments below.