TL;DR: Responsive Design is outdated. Adaptive Design is labour intensive. Is there a better solution?
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?
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 awhile.
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?”
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?
So there are trade-offs between the two approaches. But, can we have our cake and eat it too?
Stay tuned for Part 2 to find out.