Responsive vs Adaptive Web Design: Better Together

Responsive web design (RWD), the ability for your web application to "respond" to the size of the viewport (traditional screen size vs mobile screen size) is a commonplace practice today. Responsive design leverages client side, front-end UI frameworks to hide, show, stack, shrink and grow elements on the screen in a way that is appropriate for the size of the device's screen. In essence, it is many user interfaces in a single code base.

Adaptive web design (AWD), a (seemingly) alternative approach to RWD is a server-side capability to respond to the client with completely unique templates/markup for a given device type (amongst other facets). Adaptive design, while extremely powerful, is somewhat less common in part because it relies on a server and is thus a less general technology. It's also less prevalent in part because, for a large class of problems, RWD is "enough" to get the job done. However, as complexity and sophistication of requirements mount, adaptive design starts to show clear advantages over a purely responsive approach.

Responsive design and adaptive design are often thought of as an either/or architectural choice. There is clear overlap in the problems they address and each approach has clear strengths and weaknesses over one-another. Let's take a quick look at a side by side comparison.

Comparison Technical Approach

Responsive Design:

Adaptive Design:

Strengths

Responsive Design:

Mainstream approach with many frameworks that can be applied to any backend technology.

Single code base.

Adaptive Design:

Truly unique markup can be delivered based on any kind of context (not just screen size). This means it's much easier to deliver contextual functionality to your users.

Example: A retail store site has a traditional marketing website at mystore.com. But once it's detected that a user is inside a physical store location, it gives them a personalized in-store assistant to enhance their shopping experience.

Performance: with AWD, you send only the data you need for the experience you are delivering.  On slower mobile networks that can make a big difference.

Weaknesses

Responsive Design:

A single code base.

 The more variations you want to support, the more code and complexity there is in that single code base. This can get out of control.

Performance can be an issue.

RWD sends all of the code for all variations to every consumer whether or not they will see it in their flow or not. If the amount of code is significant, this can lead to a performance hit on slower/mobile networks.

It's difficult (although not impossible) to address different contexts beyond screen size with Responsive design. RWD was really intended for different screen sizes (viewports). Stretching its role beyond that takes the technology out of its wheelhouse.

Adaptive Design:

You need a server backend to support AWD.

Instead of a single UI design and template code base, you potentially have many. If you don't manage and factor the code properly it will be more difficult to maintain.

Opportunities

Responsive Design:

Provides a usable experience on any screen size.

Adaptive Design:

Provides a usable experience on any screen size.

Provide faster experiences for your users.

Allows you to truly contextualize the experience. Device type/class/screen size is really just the tip of the iceberg. Once the server is involved any type of contextual data (location, previous use, time of day, etc.) can be used to deliver unique and relevant experiences/features to the user. That can be huge.

Threats

Responsive Design:

If requirements go beyond screen size, RWD may not be the appropriate solution.

If the number of variations is too high performance and code complexity may be an issue.

Adaptive Design:

Better Together

While RWD and AWD are most commonly looked at as competitive approaches, the simple fact is that they are not. These two approaches are, in fact, mutually inclusive with another and can be combined to acquire the benefits of both.

Responsive design is a front-end technology. Adaptive design is a backend technology. Combine them.

Consider leveraging Adaptive design to drive truly unique and contextual markup to the user for what they are doing, on the device of their choice at that moment. Allow the front-end to leverage Responsive frameworks to make sure those experiences flow nicely on a given device. For performance and code maintainability, as your RWD code grows in complexity and size, consider breaking it down into smaller code bases that can be individually delivered to a device by RWD (the server).

A simple example of this is to have AWD templates for Small, Medium, and Large screens. Each with their own unique features and markup. When it comes to the specifics like an iPhone vs a Galaxy smartphone (both considered small), RWD steps in to make the minor adjustments required to provide a perfect fit for the given device type. This makes the code more maintainable and, more importantly, it makes the user's experience much zippier.

Topics:

web dev ,adaptive web design ,responsive web design ,front-end ,backend

Source: Responsive vs Adaptive Web Design: Better Together