About Powered

Powered by Battery is a web site for entrepreneurs searching for ideas, insights and introductions to help them grow their businesses. The site contains content from team members at Battery Ventures as well as our family of companies. For more information or to contribute, contact becky@battery.com.

Search
Type & hit enter to search
h

Adaptive vs. Responsive Web Design: Which One is Right for Your Business?

Given the rise of mobile Web browsing, the practice of maintaining multiple versions of a website, under multiple URLs, to serve people using various mobile devices is already on its way out. The responsive Web design (RWD) revolution is upon us in full force, and in fact is already being expanded. But what does it mean for your business?

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

  • Consistency throughout the different platforms, and creating easier navigation and a better user experience;
  • Dramatic reduction in development time and costs, since organizations are creating and maintaining just one URL as opposed to several;
  • Improved SEO by streamlining all pageviews through one URL; and
  • 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—like big photos or graphics—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 works on 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; this approach delivers only 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. This allows the user to get a much different version of the site than he or she 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 its mobile platform, obviously aware that high-res images and additional content are not as important to mobile users as fast response times for searches.

Catchpoint1Graphic

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.

Catchpoint2Graphic

This highlights the other significant advantage to the 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. e-commerce companies, airlines, etc.) can do so without sacrificing quality in either version. AWD also can be tacked on to an existing site, whereas RWD requires rewriting all the original HTML code on the back end.

However, even with the latest advancements in AWD at your disposal, your mobile site’s performance still be impacted 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 adaptive and responsive websites out of the Alexa Top 100 rankings (US), and tested their response times using Catchpoint’s 4G and last-mile nodes across five major U.S. cities to see how the greater amount of data on responsive sites leads to higher latency. Unsurprisingly, the mobile response times showed a significant variance between AWD and RWD sites:

Catchtpoing3Graphic

As you can see, the Weg-page response times (which measures how long it takes for all of the data on a site to be downloaded) are significantly faster for AWD sites—40.2% faster–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 response times for desktop performance, as there is far less of a difference in the amount of data being transferred.

Catchpoint4Graphic

Business owners should consider putting themselves in their customers’ shoes when accessing their company’s 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’s, which transmits ~1.45 MB of data with each download, you’d be allowed roughly 345 page views per month. But for adaptive sites like Ask (~100 K) or USA Today (~730 K), that would mean 5,000 and 685 page views, 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 your site is to deliver a lot of content to users and not much 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 e-commerce 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.

Craig Lowell is the content marketing editor for Catchpoint, a Web-performance monitoring company based in New York.

Craig Lowell

Start the conversation