What do we get if we combine responsive and responsive design?
What do we get if we combine responsive and responsive approaches? Introducing the Adaptive + Responsive model.
Responsive and Responsive Design are two design methodologies that aim to make a product available on any device and screen of any size, ensuring the best possible experience for all users. Both methodologies try to make the most of the available screen space and user experience. Before we talk about the model A + R, we need to parse both methods separately.
Although responsive the design uses CSS and / or JS to adapt layouts and content based on predefined breakpoints, adaptive the approach provides pre-structured templates that will be served based on user agent and device type. The main difference between the two is the DOM structure. With a responsive design, we have the same HTML for all situations (unless you are using JS to remove some DOM nodes), whereas with a responsive design, we have a different code structure and potentially different experiences.
The most powerful speakers, the friendliest design community and the desire to make cool designs.
10% discount with UXPUB promo code
Both design approaches are correct, just ask yourself how many components and complexities there are in your project, and if one experience might work for all of your users. When developing web applications, responsive design is often used, for example, creating a special experience with responsive development, like mobile versions of Twitter and Facebook do.
Responsive design techniques
When creating a responsive experience, we have three approaches to working with our layouts and content:
Changing the structure (Reflow): we can change the layout structure to better fit the viewport. In most cases, this will cause the content to be stacked (this is not always a good thing).
Resize: some interface components are fluid like most HTML elements. They fill the available space and change the structure if necessary.
Show / Hide (Show/Hide): some parts of the interface are hidden from the viewport (but they still exist) or displayed to fill the space.
Responsive design method
Restructuring: with this approach, we can design and deliver different layouts to provide the best experience for a specific environment, such as a mobile touch device or a hybrid touch screen device.
Introducing the A + R model
Both approaches have their pros and cons, but what do we get if we want to use both at once? Model A + R combines both responsive and adaptive approaches based on one main breakpoint.
A stands for Adaptive
As mentioned above, an adaptive approach allows us to differentiate user experience, content and even functionality based on the user s device. Considering 960px, as the main adaptive checkpoint (determined from global statistics), we have something similar to:
- The viewport on the left represents all screens below 960px with a specific layout / content
- The viewport on the right represents all screens with a resolution of 960px or greater with a different layout.
R stands for Responsive
The main reference point we have defined creates two contexts of experience, which may be different from each other, in which we can apply responsive methods. Within each experience, we can define minor breakpoints to adapt the layout based on the available space. For example, tablet users may see a touch experience (responsive approach), but we can still adapt the layout based on device orientation (responsive approach).
Responsive + Responsive
By combining responsive and responsive approaches, we get a model A + R… With the adaptive method, we will work with experience and functionality, creating two different contexts. With a responsive method, we handle the interface components and layouts that are inside the context.
When to choose the A + R model
This design approach requires designers to truly understand the experience they want to provide in order to determine which model to follow. This model is well suited for large applications that need to be accessed from small mobile devices with less functionality or with a completely different structure. You will get a lot of flexibility, but also complexity, because you might have to handle different codebases and environments (not necessary).
By using the A + R model, designers and developers (but also product owners) can focus on improving all the possibilities a product has to offer, rather than providing a “good” experience in just one environment.
Who is using this model?
You may notice that this template is used by Twitter, Facebook and GitHub for their mobile websites. If you navigate these sites on your smartphone, you can check how they are changing the user experience based on the expectations of mobile users.
Subscribe to the author
If you enjoyed this article, check the author s blog for more information on web development and subscribe to it at Twitter…
All images are made by the author and the guys from Contactlab UX…