What’s the Difference between Adaptive and Responsive Website Design?

designing for everything...

Adaptive v. Responsive Web Design
Why one might be better for you

Did you know that mobile website designs come in two flavors? Did you know there is a reason for that? Did you know that these choices have a major effect on how much work you have to do to maintain your site and how your customers interact with you? If you’re not sure which is right for your business, read on…

I lied, you actually have three choices in the way your website appears to consumers on their smartphones:

The Postage Stamp: That’s when you do nothing and your full-size regular everyday run of the mill website is just small. The buttons are smaller than your fingers, and the text is about the same size as warning label on a bottle of over the counter stool softener. This really isn’t an option any longer.

Adaptive Website Design: This is where your website changes to one of several pre-set sizes (desktop, tablet, smartphone) based on the “width” of the browser as viewed on the device that’s being used at the time. Essentially you need to design at least 3 different websites based on each type of device. And yes, you have to manage changes separately on each of them.

Responsive Website Design: This is where the website automatically “responds” to the size of the browser at any given point, regardless of what the browser width may be. The site adjusts its layout, and sometimes even its functionality based on the screen size it’s being viewed on. Since there is only one website that has to adjust itself to all the different possibilities, the web designer really has to think this through.

Why Would You Choose One Over the Other?

Adaptive Design Choice: By the time mobile websites became a factor, there were already billions of websites out there. The path of least resistance was to create a mobile version without having to disturb the full-size website. Thus the birth of adaptive website design.  

Adaptive is harder to maintain on websites that are updated frequently (because you have to update multiple versions), however they may be good when a completely different experience is optimal.

For example, most people would probably prefer to buy their airline tickets on a full-size desktop computer where they can compare prices, layovers, choose seats from a diagram, etc.  Once they are on the road however, they are no longer purchasing tickets, but checking flights and looking for ground transportation and airline contact information. In that case an airline might opt for adaptive design because the user’s needs and circumstances have changed, and the completely independent experience of adaptive design might better meet their needs.


Addressing how you handle your mobile website is only one of many things to consider regarding your web presence. Download the free 25 Website Must Haves for Driving Traffic, Leads & Sales eBook to get a handle on the other 24 things you should be thinking about.


With adaptive design you can create a completely different and optimized user experience for different situations. You can also use completely different images for each screen size. With Adaptive you can use images that are properly sized for a smartphone, where with Responsive you would get a smaller version of the large image (which may not be ideal when shrunk down).

There are even aps out there that allow you to quickly create a separate mobile version of your website without disturbing your original site. Keep in mind that you will still have multiple versions of your website that must be updated and maintained separately. Information on your website(s) can quickly become out of sync.

Responsive Design Choice: Generally preferred for most websites these days. Enough so that designing for the smartphone experience is now dictating what websites look like on the desktop version. Recently you may have noticed websites with longer scrolling pages and large images and large headlines and less copy when you’re on a full-size pc or laptop. Looks like they might be ideal for scrolling up and down with your fingers? No accident. That site was designed for mobile first.

The advantage of Responsive Web Design is it allows you to offer the entire content of your website in a user friendly presentation for all devices. A good designer can even fine-tune the experiences across different devices by pre-program the user experience as it morphs from screen size to screen size by choosing which elements to hide and how they align. A good designer can even program different elements to swap out at different screen sizes. And you only have one website to maintain.

With more than half of Internet searches being conducted on mobile devices, you have to address how your own website appears to your customers wherever, and whenever they are visiting you. Displaying a postage stamp sized website is no longer an option.

Hubspot
Top Content Marketing Agency 2017
WSI Certified Agency
HTML5
 
sharpspring-login