The past few years have seen an explosion in mobile usage. While desktops used to rule the roost, everybody is viewing the world through their phones now. If you break down a typical website's analytics, you shouldn't be surprised if anywhere from 40-50% of the users are visiting the site through their phone or tablet. Depending on what you sell or what kind of audience you attract, particularly if you slant towards younger demographics, those figures can shoot up even higher!

A big part of being a web designer over the past few years has been trying to make that transition work. Trying to design web pages that are attractive and easy to navigate whether you're at home on your gorgeous 25” 4K monitor, or just checking in on the site using your iPhone while waiting in line at the grocery store. Obviously, this is no small task, think of it like trying to design an image that would look as good as a poster as it would as a postage stamp.

This is where adaptive and responsive web design comes in. Both schools try to solve the same problem, but approach it in different ways. So what exactly is the difference between them?

Adaptive web design tries to solve the issue of users accessing sites from a variety of devices by offering multiple-layouts to the same content. The older of the two schools, adaptive web design has been around for the last decade. Anytime you've used a .mobi URL, or were directed to the "mobile version” of a website, that's adaptive web design in action

Adaptive web design offers a completely different experience depending on which device you're using. The advantage of this is that the experience is completely tailored to that device. Desktops can make full use of their big screens to fit in tons of written content and navigable menus as well as big images and splash pages. The mobile version can be streamlined and sleek, offering the most essential content and options while cutting out the cruft and fancy touches that bog down a mobile experience. 

The downside is you just doubled your workload. Adaptive design gives you a lot of control, but at the end of the day it also means designing more pages. You also run the risk of making one version the "inferior” version. If you pump a ton of time and money into making a fantastic site for desktop users and rush out a bare bones mobile version as an afterthought, people can tell. If half your users are having a great time at the expense of the other half getting a clipped and shoddy experience, you're not doing your job right. 

As different devices, formats, and alternative ways of accessing content have become more prevalent, adaptive design has waned as an effective solution for making a site mobile friendly. Overwhelmingly, developers are turning to its successor - responsive design.

Responsive web design strives to give all users the same overall experience. While the layout and menu items will change depending on the device being used, there are no separate URLs or redirected pages and everyone sees the same content. The website elements respond to the device they're on and resize to adapt for any possible screen and input configuration. 

I find a helpful way to think about responsive web design is to picture a site's content as a liquid and different devices as different kinds of containers. Whether you pour the content into a mug, a tumbler, or a fishbowl, it's still the same content, its just changed it's shape to accommodate the device its held in.

Responsive web design can be more complicated to initially set up, but also has a longer lifespan. Instead of having to make and update multiple versions of any new content you make in the future, you can just add it to the site and depend on the responsive design to make it work across devices. It also naturally adapts as new devices, screen sizes, and resolutions come out. An adaptive page design that was made for the smart phones of 2008 may or may not look good on today's devices. With responsive design, the content just pours right in.

With these advantages in mind, responsive design is definitely the way to go to make your site mobile friendly, and you definitely want to be mobile friendly these days. Not only are more and more people accessing the net through their phones and other devices, but Google has made recent changes to its page ranking system to penalize sites that are not mobile friendly. Even if your site scores high marks for content, relevancy, and backlinks, the lack of a mobile solution might prevent your page from showing up on the first or second page of Google's results.

If you're building a website, you want to be where people are browsing. In 2016, that means being available on as many devices as possible, and that means you'll want to build with responsive web design.