Responsive vs Adaptive in a One Web Approach

Today we’re living in a “post-PC world.” For web developers, this means that 30% to 50% of yourwebsite traffic now is now coming from mobile devices, and then very soon desktop and laptopusers are going to be in a minority on the web.

This is a tectonic shift in user behavior, and it’s happening right before our eyes. Responsive andadaptive design techniques now rule the day in what the W3C is calling a One Web approach.

One Web, according to the W3C, means making the same information and services available tousers regardless of the device they’re using. For developers, this means that taking a One Webapproach will ensure that not only does your website work on the smartphones and tablets of today,but that it is future-proofed to work on the unimagined screens that will be here tomorrow.

There are three popular approaches today to developing a One Web site. One is to use a responsivedesign, second is client-side adaptive designs; and the third uses server-side adaptive designs. Anyone of these is not better or worse than the other. Each has strengths and weaknesses on its own, andthe wise web developer needs to consider the benefits and drawbacks of each before he picks theone that works best for his next project.Responsive Web Design

RWD is the most common One Web approach. It uses CSS media queries to modify thepresentation of a website that’s based on the size of the device display. The number of responsivesites is continuing to increase rapidly.

A key advantage of the RWD approach is that designers can use a single template for all devices,and only use CSS to determine how content will be rendered on different screen sizes. Also, thosedesigners can still work in HTML and CSS, the technologies they’re already familiar with. Inaddition, there’s a growing number of responsive-friendly, open-source toolkits like Foundation orBootstrap which help simplify the process of putting together responsive sites.

There are, however, a few shortcuts to a sound responsive design. By going responsive,organizations often need to undertake a complete site rebuild. This presents a problem in the designand testing phase, as it can be difficult to customize the users experience for every possible deviceor context.

Responsive web design works best when it’s combined with a mobile-first approach, with themobile use case prioritized during development, and then using progressive enhancement to addresstablet or desktop use cases.

Performance can also be a problem for responsive sites. When designing for e-commerce sites,responsive pages can wind up larger than one might expect because the responsive approach tries tocover all devices. Since your user is only using one device, you are forcing them to have to wait forall of the page elements and resources for everybody else to load before they can use it. In simpleterms, performance affects your bottom line. With smartphones, the conversion rate can drop bythree or four percent when users have to wait for just one second. By the time the three second markcomes around, almost sixty percent of users will have left your site completely.

Even though responsive design is quickly becoming the de facto standard, it also is creating newchallenges for online businesses. These include how to handle images, how you should optimizemobile performance, and it often means that sites need to be rebuilt from the ground up based on amobile first approach.

Client-Side Adaptive

Building on the principles of responsive design, Adaptive design delivers user experiences targetedat specific devices and contexts. Adaptive design uses JavaScript to enrich websites with advancedcustomization and functionality. For example, adaptive websites will deliver Retina-quality imagesonly to iPad Retina displays, while standard-definition displays receive standard lower-qualityimages.

There are two approaches to using adaptive design. One is where the adaptations occur just on theclient side, in the user’s browser, and the other where the web server does heavy lifting, detectingthe various devices and loading the right template. One of the strengths of the adaptive templateapproach is the ability to reuse a set of HTML and JavaScript across other devices, therebysimplifying change management and testing.

You don’t have to rebuild your site all the way from the ground up with a client-side adaptiveapproach. Instead, you can build on existing content and still deliver a mobile-responsive layout.With expert developers, this approach can also enable them to specifically target a particular deviceor screen resolution.

Unlike responsive design, adaptive templates will ensure that just the required resources are loadedby the client’s device. Since device and feature detection shifts to the mobile device itself, CDNnetworks, like Edgecast and Akamai, can use most of their caching functionality and not disrupt theuser’s experience.

The client-side adaptive approach has a higher barrier to get over than responsive design.Developers have to have a solid grasp of JavaScript in order to use this technique. There’s also theproblem with a site’s existing templates as the foundation. Because the client-side adaptations actsomewhat like a layer on top of your existing code base, you’ll need to maintain them as your sitedevelops.

Server-Side Adaptive

The server-side adaptive approach can be achieved in a variety of ways, through server-side pluginsand using custom user agent detection. Server-side adaptive typically offers distinct templates foreach device, enabling more customization, plus it keeps device-detection logic on the server, which

enables smaller mobile pages that load somewhat faster. In addition, there are numerous server-sideplugins that are available for common CMSs and eCommerce systems.

This approach is not for the faint hearted, it will typically require significant changes to your back-end systems, which, in turn, can result in a lengthy and costly implementation. The requirement formanaging multiple templates raises ongoing maintenance costs. And finally, this approach canencounter some performance issues when servers are under a heavy load. When performing mobileuser agent detection on the server, a lot of common caching mechanisms that are deployed by CDNswill need to be turned off. This will result in a slower user experience for your mobile and desktopvisitors.

Many companies still wrestle with the basics of responsive, and they are not ready to confront moresophisticated flavors of adaptive. Competition and mobile traffic, however, will drive moreorganizations to try all three approaches, and they’ll pick the one that works best for their users.