Experience Optimization, Insights

Adaptive vs Responsive Web Design

The proliferation of devices available today has created a lot of discussion about how to build websites for those devices. It has also created confusion about the two leading approaches of website design: Adaptive and Responsive. Both are very powerful tools in modern web design that have their own purpose, but they are not the same!

Mobile websites used to be simple.  Ten years ago, you created a separate WAP site for phones.  More recently, a slew of mobile-only platforms supported phones. Today, it is no longer a question about serving a site to a phone. There is now a complicated combination of screen sizes, interaction models and resolutions across devices ranging from phones, phablets and tablets to laptops, large monitors and TVs. Soon, target devices will be complicated further by the Internet of Things.  Everything from a car to a refrigerator will have a browser. Each device will have a different pixel density, interaction model, screen size, resolution and aspect ratio.

Screen Dimensions Responsive Web Design Graph

Figure 1 Web Trends Report Q2, NetBiscuits, 2014

Screen Dimensions Responsive Web Design Graph Figure 1 Web Trends Report Q2, NetBiscuits, 2014

Even within the traditional mobile market, devices vary greatly. Optimizing for an inexpensive smart phone supporting 800 pixels will provide a poor experience on new smart phone with a 1980-pixel screen resolution. A tablet–often considered mobile–renders desktop sites better than mobile versions. Furthermore, what defines mobile?  Is a convertible laptop considered a mobile device or desktop computer?

It is no longer possible to build a dedicated application for every combination of resolution, screen size and interaction style.  Enter responsive and adaptive design as solutions.

Adaptive Web Design (AWD) uses server-side device detection and progressive enhancement (PE) to create different experiences for different device types. In short, the webserver looks up the user agent of the requesting device to identify it and changes the response back to the web browser based on the class of device. Changes in the device type change content display or layout.  This approach requires forethought into the classes of devices that will be supported and custom-programming to each device class.

There are several strengths to adaptive design. Two that stand out are the ability to easily deliver targeted content to a specific device and the ability to manage page size on smaller devices. If the back-end content management system leverages a clean, componentized content architecture, it should be easy to deliver specific content to specific devices or even shorter content for smaller devices. This process may also include the delivery of device-optimized images that can significantly reduce bandwidth.

The challenge with AWD is the need to program each device type in advance.  The server needs to know about each device type, categorize the devices and have code to address each category of device.  An adaptive approach may also provide challenges with caching technologies because a page is different for different users.

Screen Content Graph AW_9_2014

Screen Content Graph Adaptive Web Design

 

Responsive Web Design (RWD) uses client side (browser) CSS3 and Media Queries to adapt a fluid grid system to the device as the primary means to support different devices. There is no need to develop to specific sizes as the display continuously adapts. Similar to AWD, media queries can show or hide content or alternate image sizes but the logic is implemented in the web browser. Many responsive frameworks exist to support the responsive development grid system but custom coding is still required to address distinct differences between specific elements on mobile and desktop such as navigation.

The relative simplicity of RWD is its strength.  In an ideal case, the grid system is set up and content is fluid within that grid. One design works across all devices. As the device gets narrower, the content gets longer. RWD allows for conditional break points where needed to allow display changes based on width.  The most common need for the conditional display logic is to alter menus between a traditional desktop and mobile style.

Websites built with RWD can be bloated, especially for mobile devices, because the logic is implemented on the client side. This means that a full page is often delivered to the browser and then filtered, leading to large download sizes. Using a mobile first design and build approach can get closer to AWD download sized but it takes a conscious effort. Also, where RWD is very simple for simple pages, it can become difficult to define the fluid behavior of very modular or complex sites.

It is important to note that both of these models represent a single-system approach to an array of devices. RWD uses a flexible grid system while AWD has predefined states.  Both approaches result in one website to manage and not multiple platforms. In both cases, the display changes to better support the device. A single system is easier for marketing teams to manage and for developers to update, while providing a consistent experience for customers.

In the end, the two approaches are not exclusive of each other. Both may be used together to optimize customer experience across an array of devices. Use AWD and a component content architecture to target content by device and optimize downloads but not to significantly alter the presentation layer.  Use RWD fluid grids to optimize the experience per device without requiring pre-defined experiences. This best-of-both-worlds approach can provide a more intuitive web experience for both your team and your customers.

Back To Posts