Responsive vs. Adaptive Web Design: Which Is Right for Your Site?

Given the prominence of mobile web browsing, the practice of having multiple versions of a site (under multiple URLs) to accommodate all of the different mobile devices out there is already on its way out. The Responsive Web Design (RWD) revolution is in full effect, and in fact is already being expanded upon.

By tweaking a site’s CSS code, RWD allows the pages to adjust to the operating system and layout of any browser, be it desktop or mobile. The advantages of being able to implement such a technique are vast:

• Consistency throughout the different platforms, creating easier navigation and a better user experience
• Dramatic reduction in development time and costs by only having to create and maintain one URL as opposed to several
• Improved SEO by streamlining all pageviews through one URL
• More effective social sharing

However, RWD is not without its drawbacks, the most significant of which is load time. Since images and other high bandwidth features are simply scaled down rather than resized or eliminated outright, elements which may not be vital to user experience can cause poor performance.

Hence the rise of Adaptive Web Design (AWD) as an alternative to RWD. AWD maintains the end goal of creating a site which is applicable to a variety of different mobile platforms and layouts, while improving end user experience through better performance.

Rather than a scalable version of the same site, AWD allows the server to determine how to optimally render pages based on the user’s platform by only delivering elements which are necessary for the experience on that specific device and operating system. Images are resized, elements like JavaScript or Flash may be discarded entirely, and ads can be adjusted, culminating in the user getting a much different version of the site than they would if accessing it from a desktop browser.

As you can see in this example of an adaptive site, Ask.com has greatly altered the layout and functionality of their mobile platform, obviously aware that high-res images and additional content are not as important to their mobile users as fast response times.

With a responsive site like Microsoft.com, however, the mobile experience is more interactive and visually-based, as they know that their mobile users are there to check out their product rather than hunt for quick information or to buy goods.

This highlights the other significant advantage to an adaptive approach. Because it allows for such a different experience between the mobile and desktop versions, sites that want to deliver a different experience for their mobile customers (i.e. eCommerce, airlines, etc.) can do so without sacrificing quality in either version. It can also be tacked on to an existing site, whereas RWD requires rewriting all the original HTML code in the back end.

However, even with the latest advancements in AWD at your disposal, your mobile site’s performance can still be dragged down by the burden of too much data. If a mobile site is transmitting over 500K of content, it’s going to result in slow response time, which will only get worse when factoring in outside factors like network strength and latency.

To test this theory, we selected 15 examples each of Adaptive and Responsive websites out of the Alexa Top 100 rankings (US), and tested the response times using Catchpoint’s 4G and last mile nodes across five major U.S. cities to see how the greater amount of data in responsive sites leads to higher latency. Unsurprisingly, the mobile response times showed a significant variance between AWD and RWD sites:

As you can see, the webpage response times (which measures how long it takes for all of the data on a site to be downloaded) are 40.2 percent faster on average for AWD sites when accessed on wireless networks due to the significantly smaller amounts of data which make up adaptive sites (an average of ~791 KB, compared to ~1.2 MB for responsive sites).

That changes, however, when we look at the times for desktop performance, as there is far less of a difference in the amount of data being transferred.

Business owners should consider putting themselves in their customers’ shoes when accessing their site from a mobile device. Most mobile users are operating on data plans with limits, so having a mobile site which transmits a large amount of data essentially limits the amount of times a user can access your site over the course of their billing cycle (before they start paying overages, anyway).

For example, let’s say you have a standard 1 GB data plan and use half of it on things like sending email, streaming music, posting photos to Facebook, etc. That allows for 500 MB of data, which means that for a responsive site like Microsoft, which transmits ~1.45 MB of data, you’d be allowed roughly 345 pageviews per month. But for adaptive sites like Ask (~100 K) or USA Today (~730 K), that would mean 5,000 and 685 pageviews, respectively.

Determining whether your site should be using a Responsive or Adaptive design structure really depends on the needs of your users. If the goal of the site is to deliver a lot of content to users and doesn’t have much in the way of advanced functionality, then Responsive is probably the best way to go. In other words, if most of your users will be accessing your site from a desktop browser and won’t lose anything by using it on a mobile device, it’s the simplest – and cheapest – option.

However, if mobile is going to be your primary focus while maintaining eCommerce or other complex capabilities, and you can afford the investment of additional time and money to create it, then Adaptive would be the best route.