Responsive web design has been a hot topic for the last couple of years. And why not? The ingredients of a flexible grid, flexible images and media queries are a powerful recipe to help us serve websites to screens of varying sizes.
But we should not stop there. To be truly responsive, we must meet our users where they are. Truly responsive sites adapt themselves not only to the screen size of a device, but also to its broader capabilities and settings. Our sites should handle screens of any size. But they should also handle multiple screens, or no screen at all. And they need to handle still more. Black and white displays? Bring it on. No audio? No problem. No JavaScript, CSS, or even image support? Sure thing. Slow mobile connection? Serve a lightweight version of the site. Unusual input devices? It's all the same to us.
How do we get there? I see five basic building blocks: semantics, accessibility, focus, media queries, and efficiency.
1. Semantics
We design websites with users in mind, but those users' experiences depend on what their browsers understand. To be sure devices of unpredictable capabilities are able to make sense of our documents and applications, we need to provide them with a strong semantic foundation. Semantic HTML is the backbone of this, and it is understood by even the most basic browsers. HTML5 adds additional semantic meaning for recent browsers with elements like article and time. ARIA roles and landmarks, initially developed for accessibility, add additional context and meaning for devices. This structure helps ensure devices understand and correctly render the web.
There is another aspect to the semantics, though. We need to carefully examine our content management systems and evaluate whether they're serving their purpose. Treating content as undifferentiated blocks of text and media will not work as we serve it to a wider range of devices and device capabilities. Instead, we should be building semantics into the process of content creation, borrowing ideas from journalism and NPR's "Create Once, Publish Everywhere" model. Unless the systems we use to publish content reinforce semantic structure, it won't be sustained. Only if semantics remain over the life of a site can responsiveness succeed.
2. Accessibility
Accessibility is too often treated like a box to be checked, or something paid attention to only because it's "the right thing to do". But accessibility techniques make sites more usable for everybody and more adaptable to a broad range of devices.
Guidelines created for deaf users make sites work better for users who've muted their devices. Contrast settings developed with colour blindness in mind ensures sites are readable on devices with limited or no colour capabilities. Techniques to make sites work for blind users with screen readers also make them usable, as voice control and audio output move into the mainstream. Presenting content in plain language and designed for clarity is good for everybody.
ARIA live regions, which let us control how and when browsers will inform the user about changes made to parts of the page, have a special role here. Live regions have obvious implications for screen readers and other audio-only contexts, but they will be important to providing a good user experience on HUD-driven devices like Google Glass and devices with more and smaller screens as well. Interactive, data-driven, realtime websites are increasingly common; those that don't prepare for a range of devices will be behind the curve.
3. Focus
Users consider websites holistically, but browsers focus on only one element at a time. Careful management of focus is vital to the experience. On devices with small screens, it ensures the correct part of the screen is displayed after the user takes an action. On audio-only devices or devices with non-mouse, non-touch inputs, it may be the only thing that makes the experience usable at all.
Media queries are already a rising star, but right now we're barely scratching the surface. In addition to screen and viewport size, media queries can tell us a device's aspect ratio, colour capabilities, orientation (portrait vs landscape), whether it is progressive scan or interlaced, and more. Using these to their full potential can help control the experience on a range of devices far beyond just mobile, tablet, and desktop.
5. Efficiency
All of these techniques bring with them temptation to serve more code and larger assets to users, letting their browsers figure it out. But serving every possible combination of assets and code won't work for users with slow or metered connections. Users shouldn't have to download every piece of your site just to get the ones they need.
Fully practising responsive design also means employing a progressive-enhancement-like technique to control what code and assets the user downloads. If JavaScript libraries or code are capability-specific, only load them after testing for the device's capabilities. Instead of loading all media-query CSS in one large file, load only the necessary CSS using media queries. We should also work on technologies to help us serve images and code that are responsive to the user's connection as well as their device.
This will be difficult. Entire teams – content creators, designers, front-end and server-side developers – will need to collaborate and cooperate. But the end goal (truly responsive web design) will mean our sites will work for all users, no matter where, when, or with which devices they visit.
For more on going further with responsive web design, check out the last part of Paul Robert Lloyd's tutorial on how to build a responsive site in a week.
