The last few years have been a good time to be a web designer. After a decade of making do with the aging technologies, methods and assumptions that gave birth to mainstream web publishing, designers are starting to trade the tiresome challenge of controlling the user experience for a few more interesting ones.
One of these challenges, designing for smartphone and tablet based web browsing, has inspired several bold new practices: the abandonment of Flash, the embracing of HTML 5 and CSS 3, Luke Wroblewski’s Mobile First, and most recently Ethan Marcotte’s Responsive Web Design.
As understood from Marcotte’s seminal article and book, Responsive Web Design is a flexible, adaptive approach to the display of web content, achieved via technologies that rearrange, resize, add or subtract content. Marcotte’s Responsive Design serves a more legible, usable web page to an array of devices with varying screen resolutions and download speeds.
The popularity of Marcotte’s responsive web design will likely result in better content consumption experiences for a lot of websites, for a lot of people. However, by focusing our conversation on the optimization of visual presentation, we’ve placed just one of what I hope will be the three pillars of responsive web design: content, presentation and interface. By broadening the definition, we will allow responsive web design to better support the way people experience the web today and will experience it tomorrow.
**In this essay, we explore ways in which the first pillar, content, might become responsive. **But before we begin, let’s first examine the role physical devices can play in making these experiences possible, especially the mobile devices which initially inspired the responsive web design movement.
In Responsive Web Design, Ethan Marcotte uses media queries and a little Javascript to learn a few characteristics, resolution, size and orientation, of the user’s device, and responds with a more legible page.
However devices are much more than displays with modems attached: they also provide mechanisms for input, sensory feedback, processing power, data storage, and environmental adaption.
We can call on each of these device capabilities, to help us understand something about the user’s goals and context, and deliver a response that is more useful, more relevant, and requires less effort.
As device capabilities continue to increase, it becomes easier to slip into design discussions that confuse the devices with their owners. We can avoid this pretty easily however: Always start with the question “What is this person trying to do?”, not “What can we do with this device?”.
Most discussions of mobile begin with a story of the user on the go, out and about, painting the town red. As Marcotte points out, this is a assumption from which to start, since many people spend as much time playing with their smartphone on the sofa as they do on the street. Acknowledging both contexts will open our imagination to a wider range of possible offerings, and save us from viewing the mobile web as a restrictive, watered-down version of the PC web.
A more reliable and powerful assumption is that mobile devices, including tablets, are primarily personal devices. Though it is possible to share an iPhone or iPad, their lack of multiple user accounts makes co-ownership awkward, reducing the value of the device for both owners.1
This bias towards individual ownership has resulted in most of us carrying more intimate personal information on our mobile than on any other device. My iPhone, for example, knows where I am, what time it is now, what languages I speak, what time I woke up this morning, when I last exercised, what I’ve been reading lately, what I’m doing tomorrow afternoon, with whom, their contact information and much of my contact history with them. Whether it’s a good idea or not to do so, all of this information, could one day be used to make any web experience more responsive.2
Of course only a thin slice of that information is currently disclosed by the device to the web browser, and an even thinner slice disclosed by the browser to any website. The depth of these disclosures will however continue to shift based on device capabilities, industry standards, public taste and individual preferences. As responsible designers3, we should always work at least a few steps back from the line of what is possible, and ask permission any time we take a step forward.
Now that we understand how much devices can teach us about users, we can look at how users derive value out of content, and devise a few new responses to maximize that value.
A valuable encounter with content can be dissected into a hierarchy of needs:
The better a publisher responds to each of these needs, the deeper users can engage with the content.4
Let’s use the example of a news story on a recent crisis, the 2011 London Riots. How can we improve the quality of engagement with this content? Here are a few ideas:
If you know that I’ve read this story once already, show me what has changed. In the midst of a crisis, a single news story may be updated several times throughout the day. Add timestamps to passages of text, compare it with my “last read” date, then respond by highlighting new passages, saving me wasted effort when my time is most precious.
If you know I’m in Japan, show me a quote from leaders in East Asia, or make comparisons to similar historical events that occurred in my area. This will likely increase my engagement with unfamiliar or far away topics, raising my cultural literacy and potential contribution to public discourse.
This second example, though modest, begins to serve, not only a different presentation of content, but different versions of the content itself to different people. Though this difference seems more helpful than harmful, how does the user experience change as these customizations increase or grow more personal?
If it were possible for a site to know my age, would we want it to tune the writing level? If it were to know my gender, would we want it to tune tone of voice? Uh, not really. These are clear overreaches, both creepy and damaging to society.
Even our tame example, a quote selected and presented on the basis of a user’s IP address, would contribute to the further destruction of the canonical content experience56, making any discussion of the content more fractured and confusing. Imagine comments, blogging, tweeting, email forwarding, even political election debates around a news story when everyone has read a different version of it.7 Though not impossible to overcome, this challenge to meaningful discourse will require a new set of adaptions that will take years to work out.
This type of customization becomes less problematic when applied to the content around the content, such as related links, illustrations or maps:
**If I live close by zoom in. If I live far away, zoom out. ** Imagine our London Riots story was accompanied by a map of the affected area. If I were to access the story from a flat in East London, you’d do well to display the map zoomed in to the city level, maybe even closer, since I’m likely to be familiar with the microgeography of the area. If I were to access the same story from Istanbul however, you would do better to zoom the map to a regional level. This tiny response to geographical context would increase comprehension for most people, without disrupting the conversation around the story.
A similar customization can also be used to increase comprehension through comparison. During the London Riots last month, an image appeared on Twitpic showing the size of the affected area side-by-side with the 23 wards of Tokyo, revealing that they were roughly the same size. This simple image made the scale of a far off event instantly personally relatable. A savvy publisher could replicate the evocative experience of this visual for readers around the world by detecting the user’s current location and placing a map of it side by side with a map of the riots.
As you’ve surely noticed by now, this article is heavy with what-ifs and light on how-tos. Though all of these ideas are possible via today’s technology, no one-off demo will prove the scalability or even desirability of any of these ideas.
Truly responsive web design will only be born from the sustained collaboration between publishers, designers and technologists, as they develop new publishing tools, new markup language, new production workflows, and eventually new approaches to digital storytelling and product development. All of this will come at both a production and delivery cost, though I believe the promise of more engaging, more efficient digital content will prove worth the investment.
I expect a lot of fumbling around in the dark before we find the practices which best respond to the ever evolving and fractured context in which people experience the web. But let’s fumble together, content creators, editors, designers, business strategists, developers and users. Only together can we begin to move responsive web design from experiment to application, and begin responding, not to devices, but to people.
1. In my observations, even the lovely interactions of sharing and collaboration which the physical form of the iPad affords, are ultimately only infrequent streaks in a primarily personal ownership experience.
2. Some of this is of course already happening within individual apps and website.
3. And by designers, I mean anyone who is making decisions on how people experience a digital publication or application, including interaction designers, engineers, editors, product managers, etc.
4. While engagement itself may not always be the end goal, it is a powerful means and measure for almost any other goal.
5. Craig Mod calls this “the fall of the great, immutable artifact”, at the hands of endlessly editable digital versions and social marginalia.
6. While news organizations’ digital publications are only beginning to to respond to the reader, they’ve been responding to the moment for years now. Jump to the bottom of an online news article these days and you’re likely to see a disclaimer along the lines of “A version of this story was published in The New York Times on August 28, 2011”, making lunchtime discussions of the news a little more confusing already.
7. Required viewing: In his 2011 Ted Talk, Eli Pariser warns that similar personalizations on websites like Facebook and Google Search are already resulting in an unintended “filter bubble” effect, in which we we are less often exposed to opposing viewpoints and challenging information, weakening our collective intellectual rigor.
Thanks to Olivier Thereaux and Raphaël Mazoyer for helping me shape this into something semi-coherent, and hopefully useful to a few people.
Double thanks to Raphaël for whipping together the map demo while I was asleep.
September 4, 2011
