What Happens when we combine Adaptive and Responsive design?

Responsive and adaptive design are two approaches used to make websites work on any device, regardless of screen size, ensuring the best user experience. Both aim to optimize screen space and interaction methods, whether users rely on precise pointers or gestures. Before diving into the A + R model, let’s briefly go over both approaches.

A responsive approach to design uses CSS and/or JS to adapt layouts and content based on predefined “breakpoints.” On the other hand, the adaptive method provides pre-structured templates tailored to the type of device being used. The former predicts and defines when layouts and content need to change based on orientation, screen size, or content, while the latter delivers targeted experiences based on one key factor: the type of device (and by extension, user) accessing the service. The main difference lies in the structure of the content and HTML. In a responsive approach, the HTML and content structure remain the same (unless JavaScript is used to remove content from the structure) and adapt to different situations. In contrast, adaptive design involves different structures, layouts, and potentially unique experiences.

Contrary to popular belief, the adaptive approach is widely used in web applications. For instance, creating specific experiences for on-the-go scenarios, where information needs to be easy to access, or for more comfortable desktop settings is common. Twitter, GitHub, and Facebook are prime examples of adaptive design in action.

Both approaches are valid and widely used. To choose the right one, ask yourself the following questions:

• How many components and how much complexity does the project involve?
• Do users have the same expectations and interactions as desktop users?

Responsive Design Techniques

When building a responsive experience, there are three main techniques for managing layouts and content:

Reflow: This involves changing the layout structure to use the available space best. Most of the time, the result is content being stacked vertically. While easy, this approach isn’t always the best choice.

Resize: Interface components are designed to be fluid, much like most HTML elements. They fill the available space, and the content adjusts to fit the new dimensions.

Show/Hide: Some interface parts are hidden (but still exist in the structure) or shown, depending on the available space.

Adaptive Design Technique

Restructuring: The adaptive approach allows for the development and distribution of different layouts to provide the best experience for specific contexts, such as gesture-only devices or hybrid touch devices.

Introduction to the A + R Model

Both approaches have their pros and cons, but what happens when we combine them? The A + R model takes the best of adaptive and responsive design by introducing the concept of major and minor breakpoints.

A for Adaptive

As mentioned earlier, the adaptive approach allows us to tailor experiences, content, and even features based on the type of device or screen size (usually the more appropriate factor). Major breakpoints are defined to mark the start and end of an experience.

By setting 960px as a major breakpoint (based on global stats), we can imagine something like this:

• The left side represents screens smaller than 960px, delivering layouts and content tailored to that type of experience.
• The right side represents screens larger than 960px, offering an experience designed for that type of navigation.

R for Responsive

The major breakpoint creates two potentially different experiences, within which we can apply responsive design techniques. For each defined experience, we can set minor breakpoints to adapt the layout to the available space. For instance, tablet users might see an experience optimized for touch devices (adaptive), but with layouts that adjust based on device orientation (responsive).

Adaptive + Responsive

Combining Adaptive and Responsive approaches results in the A + R model. The adaptive technique defines experiences and functionalities, creating two distinct contexts. Meanwhile, the responsive technique manages interface components, layouts, and behaviors within each context.

When to Choose This Model

This approach requires designers and developers to fully understand the experiences they want to deliver. It’s typically used for large applications that need to be optimized for mobile devices, requiring various functionalities and layouts. While it offers flexibility and customization, it also introduces complexity, as you might end up managing two separate projects or environments, which is not recommended.

If the team decides to follow the A + R model, they can focus on delivering curated, targeted experiences based on user type—something a purely responsive approach cannot achieve, as it’s always a compromise.

Who Uses the A + R Model?

Many online services we use daily follow this approach. Twitter, Facebook, and GitHub, for example, provide dedicated mobile apps rather than simply stacking and hiding parts of their desktop content. If you access these services on your mobile device, you’ll notice tailored experiences designed to meet the expectations of mobile users compared to desktop users.