Responsive & Adaptive: A Blended Approach to UX / UI – Part 1

RWD or AWD

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:


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?”


You Might Also Like:

Behind the Re-Brand
Space Toaster vs. Underwater Blender


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?

Let’s Compare RWD & AWD

RWD

AWD

OVERVIEW

Overview of RWD:

Unified / continuous design and HTML structure that works across multiple devices

Fluid grids that adjust to different screen sizes via 2 to 3 breakpoints set-up with @media queries

Overview of AWD:

Several distinct layouts with distinct HTML structures designed for specific devices

Uses browser sniffing to detect the type of device being used, and delivers the appropriate layout / HTML structure for that device

PROS

Pros of RWD:

Cost Effective: theoretically less work for designers and developers because they’re only producing 2 or 3 layouts based on widely accepted breakpoints

Less Maintenance: theoretically less work in terms of maintenance, functionality and content as there’s only one HTML structure to worry about.

Pros of AWD:

Optimized UX / UI: layouts are optimized for specific screen sizes creating a better UI / UX

Serves a Wider Audience: not all users have cutting-edge devices. AWD allows sites to still look good and function well on lower-end devices.

CONS

Cons of RWD:

Poor UI / UX: Can create a poor user experience as one continuous layout is not always well suited for different devices/screen sizes (e.g. the same layout is used for an iPhone 5 with a portrait resolution of 320 x 568 AND a Samsung Galaxy with a landscape resolution of
640 x 360)

Desktop Suffers: The laptop/desktop user experience can often become “dumbed down” and fail to use the extra real-estate and precision that’s afforded to users on those devices in order to accommodate the mobile-first approach of RWD

Not as Fast: Arguable performance decrease if not implemented correctly (e.g. loading high-res assets on devices that don’t need them)

Cons of AWD

Labour-intensive: More work for designers & developers as they have to create more layouts and implement browser sniffing and different HTML structures

 

 

 

 

Stay tuned for Part 2 to find out.

Is a bad UI turning your users away? Do your users struggle to find anything on the application?

Related Posts

Leave a comment

Get in Touch
Top