Responsive Web Design: A New Mindset
“Indifference towards people and the reality in which they live is actually the one and only cardinal sin in design.”
— Dieter Rams, Dieter Rams: As Little Design As Possible
In 2012, we killed hover.
For years we had designed for hover, playing with innovative ways to provide contextually relevant information via hover interactions and pop-ups, drop-downs, and mouse-overs. In 2012, we were challenged with building one website which worked just as well on desktop devices with large screens and mouse and keyboard input, as on handheld devices with small screens and touch. For those browsing the new site with mouse and keyboard, hover as a means of providing contextually relevant information made sense. For those browsing on a touch screen, hover didn’t exist.
This year, in 2013, the W3C has drafted CSS Media Queries Level 4, which builds on previous media queries which check for capabilities such as device and screen width, height, orientation, aspect ratio, and resolution, to extend awareness of context such as pointer, luminosity, and hover.
Media Queries Level 4.16:
The ‘hover’ media feature is used to query whether primary pointing system used on the output device can hover or not.
If a device has multiple pointing devices, some of which support hovering and some of which not, it is recommended that the UA [user agent] reports the hovering ability of the least capable of the primary pointing devices.
For accessibility reasons, even on devices that do support hovering, the UA may give a value of 0 to this media query, to opt into layouts that work well without hovering.
It seems the future of hover is limited. Therefore, we must find new ways of accessing and providing access to contextually relevant information for our guests.
“Mistyped ‘responsive design’ as ‘responsible design’ and realised they mean the same thing.”
— Richard Rutter, @clagnut
Alright, we didn’t kill hover entirely. On the contrary, we put a lot of effort into making sure that hover micro-interactions provide moments of insight and delight for those on devices capable of hover. However, during our first major responsive Web design project — the re-think and re-design of Disney.com — it dawned on us that when designing one solution for multiple devices, screen sizes, pointer systems, and contexts, we had to first consider the lowest point of entry. Once we had established design guidelines for the lowest point of entry, we could then employ progressive enhancement to add features for those on more capable devices.
For some projects, this might necessitate a mobile-first approach, whereby we ensure that layout is designed appropriately to fit inside the bounds of small (phone) screens, and progressively enhance for larger (tablet) and larger (desktop, TV, environment) screens. For other projects, it might be the mobile device with a small screen which is more able to provide relevant context than other devices, given the advanced capabilities of today’s smartphones and myriad sensors.
“…first, we must ‘accept the ebb and flow of things’.”
— John Allsopp, A Dao of Web Design
When Ethan Marcotte coined the term in 2010, Responsive Web Design focused on three core techniques:
- flexible grids;
- flexible images;
- media queries.
Since then, other techniques have been developed by the community to improve performance, such as conditional loading and server-side solutions. Tools and techniques will continue to evolve. What is most exciting to me is that responsive Web design commands an entirely new, integrated workflow among product teams, it compels a new mindset, a paradigm shift in how we build connected experiences from now on.
“Making sites that can refactor themselves for small screens is just the beginning.”
— Matthew Carver, The New Rules of the Responsive Web
In his original article published on A List Apart, Marcotte cites responsive architecture, which explores how physical spaces “respond to the presence of people passing through them”. He also mentions interactive architecture, “…a multiple-loop system in which one enters into a conversation; a continual and constructive information exchange.”
Marcotte concludes, “This is our way forward. Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience.”
Responsive Web Design has expanded our minds and deepened our understanding of how connected experiences can be designed to delight guests on any device, “stationary or mobile, small screen or large” (Tim Berners-Lee, Long Live the Web: A Call for Continued Open Standards and Neutrality). In a growing number of cases, the experiences we create traverse multiple screens, multiple touchpoints, multiple contexts, even multiple guests. To fully embrace responsive design, we must design experiences that respond to more than mere screen size. We must consider all that we know about our participants and their contexts as they interact with our experiences, based on what we know about their means of interaction, and what we know about the participants themselves, their states and surroundings via biometrics and sensors, both in the moment and historically over time. We must respond accordingly at each touchpoint throughout the experience, through any given context.
