Responsive vs Adaptive Design

 

Now more than ever, the next greatest innovation for the internet is always just around the corner. The buzzword I’m starting to hear most often is “responsive”.

Most people know of responsive web design as something that will look good on any platform. While this is true, there’s a completely different style of web design, called adaptive web design, that is equally as important in the mobile internet game. As these styles of mobile-conscious web design become the norm, it is important that we know which style will suit our needs and desires.

So here’s the gist for Responsive websites:
They are about creating the optimal viewer experience for any possible platform. They are based on a fluid grid that has been coded to “respond” to any size or layout change, and will morph to jump through whichever hoop you need them to jump through. What I like about responsive websites is that they feel right. As mobile consumers, we physically interact with websites without even thinking about it. We pinch. We expand. We rotate. We swipe. Heck, I even caught my 2 year old niece swiping with the finesse of an Apple fanboy! To me, responsive websites are the hard code answer to this phenomenon. They will rearrange themselves how you want them to be, and they’ll do it seamlessly. Check out these links to see some great examples. And make sure you look on all of your devices (that’s really the whole point).

http://delaneau.com
http://www.catalogue.bonobojeans.com
http://joyintermedia.com

So what about this whole “Adaptive” thing?
Adaptive websites are also all about making sure your website is the best it can be on all devices. But they go about this in an entirely different way. Instead of creating one layout that will look good on anything, adaptive web designers design one layout for your iPhone, one for your tablet, one for your mom’s Android, and one for grandma’s Nook. When someone plugs in a URL, the code detects what device they are using and pulls the proper layout for that device. This way, designers can optimize for their exact audience. On an iPhone? A designer might prefer to prioritize the “Find a Location” feature in their design, since their audience is on the go. So when you have more hoops to jump through, one website doesn’t have to morph to jump through multiple hoops, like in responsive. Instead, you have a website that will fit each hoop.

So which should I choose?
Both responsive and adaptive websites have their benefits. In my opinion, responsive websites are going to be your best long-term investment, as you shouldn’t need to do too much maintenance and they will change with emerging technology. However, they are harder (and more expensive) to create because you will need a design that is flexible enough to change into so many things. And they take longer to load since you are pulling up a much larger piece of code. Adaptive websites will need to be updated as new screen sizes become popular in the market, but do not need to be as initially flexible as responsive designs. Since they are one design per device, their load times can be lightning fast compared to responsive designs. Finally, because all of these layouts are technically different URLs, adaptive websites aren’t the easiest for search engines to find.

Pros and cons of both aside, it’s probably time to take a long, hard look at that old fixed width website and think about upgrading. 

P.S. If you’d rather just look at some great GIFs explaining all of this, check out this article that one of our great designers shared with me.