The Adaptive Responsive model

4 minutes read

You can call it Adansive or Resaptive.

Responsive and Adaptive design are two design methodologies with the goal of making a product accessible on any devices or screen size, providing the best experience to all users. Both of them try to make the most of the available screen space and the user interaction mode. Before talking about the A+R model we need to break down both approaches.

While the responsive design makes use of CSS and/or JS to adapt layouts and contents based on predefined breakpoints, the adaptive approach provides pre-structured templates that will be served based on the user agent and the device type. The main difference between them is the DOM structure, when approaching with a responsive mindset we have the same HTML code for all situations (unless you use JS to remove some DOM nodes), while in adaptive we have a different code structure and potentially different experiences.

Both design mindsets are valid, just ask yourself how many components and complexities you have in your project and if one experience can fit all of your users. Developing web applications the responsive design is frequently used, such as building specific experiences through an adaptive development, like Twitter and Facebook mobile do.

Responsive Design Techniques

While building a responsive experience we have three approaches to handle our layouts and content:

Reflow: We can change the layout structure to better fit the viewport area. Most of time this results in content being stacked (that's not always good).

5c61879965585

Resize: Some of the UI components are fluid like most of html elements. They fill the available space and reflow if necessary.

5c618ef61271a

Show/Hide: Some UI parts are hidden from the viewport (but they still exist) or showed up to fill the space.

5c629b5ec96d8

Adaptive Design Technique

Restructuring: With this approach we can develop and deliver different layouts to provide the best experience for a specific environment like a touch-only mobile device, or hybrid-touch devices.

5c619176816f9

Introducing the A+R model

Both approaches have pro and cons, but what do we get if we want to use both of them? The A+R model combines both the responsive and adaptive approaches based on a single major breakpoint.

A stands for Adaptive

As mentioned above, the adaptive approach allows us to differentiate the user experience, contents and even functionalities based on the user device. Considering a 960px as major adaptive breakpoint (defined based on global stats), we have something similar:

5c61a09419d77

R stands for Responsive

The major breakpoint we have defined create two exprience contexts that may be different from each other, in which we can apply the responsive techniques. Inside each experience we can define minor breakpoints to adapt the layout based on the available space. For example, users which use a tablet will may see a touch-optimised experience (adaptive), but we can still adapt the layout based on the device orientation (responsive).

5c62a707337cd

Adaptive + Responsive

Combining Adaptive and Responsive approaches we get the A + R model. With the adaptive technique we will work on experiences and functionalities, making two different contexts. Withe the responsive one we handle the UI components and layouts which stand inside the contexts.

5c62a992ae5af

Who is using this model?

You can notice that this pattern is being used by Twitter, Facebook and GitHub for their mobile apps and websites. If you navigate these sites on your mobile device you can check how they change the user experience based on mobile users expectations.

When to choose the A + R model

This design approach require designers to really understand the experiences they want to provide in order to define what model to follow. This model fit well for large applications that must be accessible from small mobile devices with less functionalities or with a completely different structure. As you can see you will get a lot of flexibility, but also complexity because you may have to handle different codebases and environments (not mandatory).

With the A+R model mindset, designers and developers (but also product owners) can be focused to improve all the experiences the product can offers, instead to provide a "good" experience only on one environment.

All the images are made by me and the Contactlab UX guys.