Responsive Web Design vs. Adaptive Web Design
Let there be no doubt – we live in the Age of the Customer. Multi-channel and multi-device behavior now dictates that a business must deliver digital experiences that match every possible user context.
It’s no longer viable to focus on platform optimization with a siloed approach (a separate desktop vs. mobile strategy). Research from Google has found that 90% of people move between devices to accomplish a goal. Thus, a user experience must incorporate all contexts: an experience that begins on mobile must be able to transition onto desktop or tablet and back effortlessly.
Currently, responsive web design (RWD) is a popular method to accomplish this. RWD allows web applications (websites) to correctly format on any screen size.
Here’s how RWD works:
- RWD page layout is defined via a grid format with rows, columns and breakpoints
- The same app code is sent from the server, regardless of the requesting device
- At the user’s device, the RWD grid collapses and rearranges according to predetermined sequence to meet a given viewport’s dimensions
Responsive web design can be effective but is difficult to do well. RWD apps must balance the rich functionality desired for desktop usage with the ability to function on the smaller, less powerful mobile devices. Thus, compromises must be made. If an app is clearly made with desktop users in mind, with all the bells and whistles that come with today’s immersive web experiences, it’s likely to fail on mobile because it’s too slow, too busy, or too difficult to use.
How Does RWD Compare to AWD?
Web technology is constantly disrupting and replacing the status quo, especially with a fast-moving sector like mobile. (Remember those early m.dot mobile sites?) Responsive web design is the current choice for many leading companies. However, there is already a new kid on the block – adaptive web design (AWD).
Responsive web design and adaptive web design are similar. Both are based on a web app that uses a single url, and automatically adapts to a full range of devices.
The major difference is that adaptive web design apps are able to detect information about the device requesting the page. This might include scren size, OS, network connection, or location. Then, this intelligence is used to define the app itself, sending more, less, or different content depending on the individual context. For instance, an application with a heavy background video will select to exclude this asset from the lighter versions of the app that are sent to mobile devices. In this way, the common issue where bloated RWD apps drag down mobile performance is solved.
Which Solution is Right For You?
Choosing AWD can pay big dividends. According to Website Magazine, retailer Avenue32 saw “a 400 percent increase in smartphone and tablet orders, a doubling of mobile traffic, and average mobile transactions increase by 270 percent,” after a move to AWD.
This is not to say that RWD is obsolete, however. Far from it. Plenty of apps do not require significant interactive functionality or rich media, and can more easily balance the demands of mobile vs. desktop experiences. These apps can leverage the well-defined methods and frameworks for RWD and arrive at their desired app experience much more affordably and quickly. By comparison, AWD is uncharted waters, and with its sophisticated server-side configurations it can be a costly and resource-intensive endeavor.
That being said, in the “age of the customer” organizations of all stripes are rushing to expand functionality and richness in web experience, so we predict that more will choose AWD in the coming months and years.
The Imperative: Exceed User Expectations
Modern users expect stellar performance and an engaging experience regardless of their device or contexts. This we know. But, there are multiple avenues a business can take to win in an omni-channel environment. When considering an omni-channel strategy, the newest white paper from Yottaa, Adaptive Web Design and the Changing Mobile Environment, is an ideal place to start.