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).
- 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?
- 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?
“… are the UX / UI and other benefits of AWD worth the extra design and development costs?”
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
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
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
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.
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)
Labour-intensive more work for designers & developers as they have to create more layouts and implement browser sniffing and different HTML structures
So there are trade-offs between the two approaches. But, can we have our cake and eat it too?