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

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.

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:

The viewport area on the left represent all the screens under a 960px with a specific layout/content

The viewport area on the right represent all the screens with a 960px or greater with another layout.

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).

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.

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.

Who is following this model?

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

Follow me

If you liked this post, check my blog for more content about web development and follow me on Twitter or Github

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