Over a million developers have joined DZone.

Adaptive vs. Responsive Web Design: Quantifying the Difference on Mobile

· Java Zone

Discover how AppDynamics steps in to upgrade your performance game and prevent your enterprise from these top 10 Java performance problems, brought to you in partnership with AppDynamics.

Originally written by Robert Castley

Much has been written recently about Adaptive Web Design (AWD) vs. Responsive Web Design (RWD), with pros and cons of both being highlighted.

For those new to these methodologies, here is a short summary of both approaches:

Adaptive Web Design Responsive Web Design
Server or Client-side to detect the device CSS ‘media queries’ to detect the device
Serves separate HTML, using CSS to modify the page based on screen size ‘Fluid CSS Grids’ are resized to fit the device screen
Site content is pre-selected and mobile optimized assets are downloaded All assets are downloaded whether they are required or not
Multiple templates for each device Single template
Images are optimized for device resolutions Images are resized to fit the device

With all of the above in mind, we decided to undertake a little experiment to see how well both performed when monitored from a mobile device profile. The sites were monitored from four backbone locations in New York and another four in San Francisco.

Testing, testing, one, two…

In order to give both approaches a level playing field, we built two identical sites using the popular CMS, WordPress. Both sites had the same dummy content loaded, including images and text. At this initial point of the experiment, no additional optimization was done to either site and all the default settings were used.

WordPress comes with a RWD based template called ‘TwentyFourteen’ as standard. This template gives a magazine-style layout to your site and is highly configurable. An online demonstration of this template can be found here.

When visiting this demonstration site, resize your browser window and see how the site adapts to the resolution changes using the CSS ‘media queries.’

If you are using Chrome or Safari you can switch to mobile device emulation. In Chrome, go to Tools -> Developer Tools -> Emulation and select a device.

Adaptive Responsive Chrome

In Safari, enable the Develop menu in Preferences and then go to Develop -> User Agent and select a device.

Adaptive Responsive Safari

In order to implement the AWD approach, we used a WordPress Plugin called WiziApp. The plugin serves up a mobile theme to users that access the site from mobile devices, and also offers advanced configuration options to further streamline the mobile experience.

By using the AWD approach, you can assign more control over how the page is loaded. With the WiziApp Plugin, it will not load all the posts on the homepage we are monitoring. Instead, it implements a ‘Show more’ option at the bottom of the device screen. This prevents the loading of all the homepage content upfront. Implementing a ‘load on scroll’ would also have worked nicely.

Adaptive Responsive on mobile

Round One: Default, Unoptimized Sites

It will come as no surprise that both sites performed identically from a desktop perspective, as both used the default WordPress template. But as soon as you switch to a mobile device or tablet, the difference is crystal clear. Again, please note that at this stage no additional optimization has been done and defaults are being used.

Metric (Defaults) Adaptive Responsive
Response 568 ms 1,202 ms
Document Complete 1,536 ms 4,086 ms
Webpage Response 2,889 ms 4,860 ms
Bytes Downloaded 2,474,326 kb 4,229,362 kb
Objects Downloaded 20 61

The clear winner here on all accounts is AWD. The AWD template is quicker, downloading less data bytes and fewer objects, while the RWD template is downloading everything that a desktop user would receive. If you were out and about using a 3G/4G connection, that is a lot of megabytes and would lead to a very painful and slow online experience.

Put Your Images on a Diet

The initial dummy data that was used to populate the site was very image heavy and the images had not been optimized for either desktop or mobile use. A quick install of the WP Smush.it Plugin allowed for a Bulk Smush.it of the images used. Also, the Imsanity Plugin was used to bulk resize the images from their original imported sizes. These steps were replicated across both of the sites. So what is the experience for our mobile users now?

Metric (Image Optimization) Adaptive Responsive
Response 554 ms (-2.46%) 1,151 ms (-4.24%)
Document Complete 1,462 ms (-4.82%) 2,853 ms (-30.18%)
Webpage Response 1,801 ms (-37.66%) 4,251 ms (-12.53%)
Bytes Downloaded 514,144 kb  (-79.22%) 1,504,168 kb (-64.44%)
Objects Downloaded 20 (0%) 61 (0%)

The optimized images clearly had a significant effect on both formats, particularly in the amount of data that was downloaded. But once again, AWD comes out as the clear winner, with a document complete that is nearly twice as fast and an even greater disparity in the amount of bytes downloaded than we saw with the un-optimized images.

Squeezing the Juice

One final last optimization to do is the concatenation of CSS and JavaScript to reduce the number of objects being downloaded. As the AWD template already has a low number of objects, the impact of this exercise won’t be so significant. Using another WordPress Plugin called Autoptimize and a few mouse clicks later the optimization of HTML, JavaScript and CSS was complete for both sites.

Metric (CSS & JavaScript optimization) Adaptive Responsive
Response 463 ms (-18.49%) 1,136 ms (-5.49%)
Document Complete 1,041 ms (-32.23%) 2,004 ms (-50.95%)
Webpage Response 1,098 ms (-61.99%) 3,562 ms (-26.71%)
Bytes Downloaded 460,950 kb (-81.37%) 1,498,634 kb (-64.57%)
Objects Downloaded 15 (-25%) 52 (-14.75%)

Once again, the Adaptive template remains significantly faster and more efficient than its Responsive counterpart. It’s still nearly twice as fast with regard to the document complete, and the gaps in the amount of data and number of objects being downloaded are even greater with the additional optimization.

Sure, there are many more optimization techniques we could have employed, but even optimizing both sites identically, the experiment shows that Responsive never even came close to catching up with Adaptive, although it saw massive gains itself in document complete and page weight.

At the end of the day, it’s all about customer satisfaction, and by giving your customers the site that they need for their respective devices, the happier they will be. If you go to a restaurant and you are a vegetarian you don’t want to be offered filet mignon. It’s the same with your mobile users; give them what they asked for – an optimized mobile experience.

While Adaptive will be more difficult to implement, it will be better for your end users. You will retain their stickiness and loyalty, and help them to not walk into lamp posts while they look at their device screen waiting for your content to load.

The Java Zone is brought to you in partnership with AppDynamics. AppDynamics helps you gain the fundamentals behind application performance, and implement best practices so you can proactively analyze and act on performance problems as they arise, and more specifically with your Java applications. Start a Free Trial.


Published at DZone with permission of Mehdi Daoudi, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}