Responsive Design is outdated. Adaptive Design is labour intensive. Is there a better solution?
Responsive Web Design (RWD)
Responsive Web Design (RWD) as an approach to creating user interfaces has been around for almost a decade.
Ethan Marcotte wrote an early article describing it—called Responsive Web Design—for A List Apart in 2010. The basic idea of RWD is to create a unified layout (and a unified HTML structure) that works across multiple devices (1).
Practically speaking, this means that a designer will create 2 to 3 layouts that are broadly similar in terms of elements and style, but with spacing and flow tweaked to fit different screen sizes (usually: mobile, tablet and/or desktop).
A front-end developer will then implement these layouts through fluid CSS grids and breakpoints set-up with @media-queries (4). The goal is to provide a continuous user experience across a variety of screen sizes.
At Architech, we’ve used this approach on various projects (plumbing company and manufacturing company). My experience on these projects has raised some questions about the practical limitations of RWD when it comes to designing and developing effective interfaces for a multitude of devices.
A few questions to consider:
- Do standard breakpoints accurately reflect the myriad of screen sizes and devices that are out there?
- Does it make sense to have one fluid layout for ALL mobile devices? Especially considering that the same mobile device can be used in portrait or landscape orientation.
- How do we navigate the murky space between phablets, tablets, and smaller laptops?
Learn more about design:
- How Many Designers Does it Take to Change a Lightbulb?
- Data & Design: A Match Made in Heaven
- UX Design and Research: The Science Behind the Process
These questions reveal a deeper problem with RWD: the set of possible screen sizes and orientations on mobile and tablet devices is highly fragmented. This was not the case when RWD was first popularized.
The iPhone only had one screen size and it was a very dominant player compared to Android or other smartphones (6). Ditto for the iPad, which was released in early 2010 and didn’t face serious competition for a while.
The fragmentation I’m talking about is clear when you visit the Google’s Device Metrics page and look at the number and range of major mobile and tablet devices that are out there:
- 28 phones (from 320dp × 568dp to 540dp × 960dp in both portrait and landscape orientations)
- 13 tablets (from 600dp × 960dp to 1024dp × 1366dp in both portrait and landscape orientations)
Adaptive Web Design to the Rescue?
(No, that question mark isn’t a mistake)
If you’re a designer or front-end developer who has run into similar problems and has asked yourself similar questions, you might know about the advantages of Adaptive Web Design (AWD). AWD was first coined by Aaron Gustafson in his 2011 book, “Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement”.
Unlike RWD, AWD promotes the creation of multiple, distinct versions of a web page (with distinct HTML structures) to better fit a user’s device.
This approach involves a designer creating 6 to 7 layouts that can be quite different from one another in terms of elements, spacing, and flow.
On the implementation side, a developer will then use some sort of browser sniffing to detect the type of device is being used and serve up the appropriate layout / HTML structure for that device.
"... are the UX / UI and other benefits of AWD worth the extra design and development costs?"
You Might Also Like:
AWD can produce websites/web applications that provide a better user experience because the user interface is more optimized for a specific device. There are also other arguable benefits in terms of page loading speed and improved SEO.
Now, back to that question mark. AWD is generally accepted to be much more labour intensive, both for designers and developers (3). So the question is: are the UX / UI and other benefits of AWD worth the extra design and development costs?
Don’t Let a Frustrating UI Experience Turn Away Users
[ld_button title="Learn More About Custom UI Design" link="url:%2Fcontact-us%2F||target:%20_blank|" color="#3fc8c4" text_color="rgb(0, 0, 0)" el_class="arch-btn"]
The Difference Between Responsive vs Adaptive Web Design
Responsive web design and adaptive web design differ based on how the page is created. For responsive design, a designer will create 2 to 3 similar layouts that are tweaked to fit different screen sizes, while for adaptive design, 6 to 7 distinct layouts are created to be delivered to the appropriate device.
//TABLE//
Get Started with Adaptive and Responsive Design
Whether it be RWD or AWD, a human-centered design focus is necessary to achieve the responsive user interface needed for business success.
With this approach, you’ll be able to uncover exactly how your users are interacting with your business and highlight the desired interactions across digital channels. By discovering end-user intent, you can align that intent to your business objectives.
After all, businesses that adopt this type of strategic thinking achieve a 91% great year-over-year increase in client retention.
At Architech, we leverage over 15 years of experience of experience delivering design and UI/UX consulting services to clients across a number of industries. We understand that each feature must be optimized for speed, usability, cross-channel and cross-device functionality to create the ideal end-user experience.
Contact us today to learn how we can help you get more engagement and conversions with our Design Thinking approach.
Is a bad UI turning your users away? Do your users struggle to find anything on the application?
[ld_button title="Contact Us" link="url:%2Fcontact-us%2F||target:%20_blank|" color="#3fc8c4" text_color="rgb(0, 0, 0)" el_class="arch-btn"]
