One Web, according to the W3C, means making the same information and services available to users regardless of the device they’re using. For developers, this means that taking a One Web approach 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.

1. 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 your
website traffic now is now coming from mobile devices, and then very soon desktop and laptop
users 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 and
adaptive 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 to
users regardless of the device they’re using. For developers, this means that taking a One Web
approach 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 responsive
design, second is client-side adaptive designs; and the third uses server-side adaptive designs. Any
one of these is not better or worse than the other. Each has strengths and weaknesses on its own, and
the wise web developer needs to consider the benefits and drawbacks of each before he picks the
one 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 the
presentation of a website that’s based on the size of the device display. The number of responsive
sites 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, those
designers can still work in HTML and CSS, the technologies they’re already familiar with. In
addition, there’s a growing number of responsive-friendly, open-source toolkits like Foundation or
Bootstrap 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 design
and testing phase, as it can be difficult to customize the users experience for every possible device
or context.

2. Responsive web design works best when it’s combined with a mobile-first approach, with the
mobile use case prioritized during development, and then using progressive enhancement to address
tablet 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 to
cover all devices. Since your user is only using one device, you are forcing them to have to wait for
all of the page elements and resources for everybody else to load before they can use it. In simple
terms, performance affects your bottom line. With smartphones, the conversion rate can drop by
three or four percent when users have to wait for just one second. By the time the three second mark
comes 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 new
challenges for online businesses. These include how to handle images, how you should optimize
mobile performance, and it often means that sites need to be rebuilt from the ground up based on a
mobile first approach.
Client-Side Adaptive
Building on the principles of responsive design, Adaptive design delivers user experiences targeted
at specific devices and contexts. Adaptive design uses JavaScript to enrich websites with advanced
customization and functionality. For example, adaptive websites will deliver Retina-quality images
only to iPad Retina displays, while standard-definition displays receive standard lower-quality
images.
There are two approaches to using adaptive design. One is where the adaptations occur just on the
client side, in the user’s browser, and the other where the web server does heavy lifting, detecting
the various devices and loading the right template. One of the strengths of the adaptive template
approach is the ability to reuse a set of HTML and JavaScript across other devices, thereby
simplifying change management and testing.
You don’t have to rebuild your site all the way from the ground up with a client-side adaptive
approach. 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 device
or screen resolution.
Unlike responsive design, adaptive templates will ensure that just the required resources are loaded
by the client’s device. Since device and feature detection shifts to the mobile device itself, CDN
networks, like Edgecast and Akamai, can use most of their caching functionality and not disrupt the
user’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 the
problem with a site’s existing templates as the foundation. Because the client-side adaptations act
somewhat like a layer on top of your existing code base, you’ll need to maintain them as your site
develops.
Server-Side Adaptive
The server-side adaptive approach can be achieved in a variety of ways, through server-side plugins
and using custom user agent detection. Server-side adaptive typically offers distinct templates for
each device, enabling more customization, plus it keeps device-detection logic on the server, which

3. enables smaller mobile pages that load somewhat faster. In addition, there are numerous server-side
plugins 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 for
managing multiple templates raises ongoing maintenance costs. And finally, this approach can
encounter some performance issues when servers are under a heavy load. When performing mobile
user agent detection on the server, a lot of common caching mechanisms that are deployed by CDNs
will need to be turned off. This will result in a slower user experience for your mobile and desktop
visitors.
Many companies still wrestle with the basics of responsive, and they are not ready to confront more
sophisticated flavors of adaptive. Competition and mobile traffic, however, will drive more
organizations to try all three approaches, and they’ll pick the one that works best for their users.