September 5th, 2011

How Responsive Web Design becomes Responsive Web Publishing

Responsive web design must start with content and context, not devices. Here are some ideas how.

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.

Responsive Web Design Today

Screenshots of Ethan Marcotte's original demo of responsive web design, shown at laptop, tablet and smartphone widths. Type size, image size and layout change depending on the browser window size."

The demo that started it all: type size, image size and layout responding to browser window size.

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.

The device is more than a display.

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, as Gino Zahnd points out, 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?”.

Mobile devices are more personal than mobile.

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

A diagram of the different layers of a user experience and the flow of data between these layers.

Data moving through the stack: not everything makes it through to the website, but the layer where any type of data starts and stops changes from time to time. (Click to Enlarge)

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.

Responsive Content

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:

  1. Access
  2. Legibility
  3. Ease of comprehension
  4. Relevance to the moment, interests, behavior, and personal history
  5. Everything else: Later access, referencability, sharability, conversability

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.

How responsive is too responsive?

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.

Work from the outside inward.

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 map of the area affected by the London Riots next to a map of the twenty three wards of Tokyo, revealing that they are approximately the same size.

Side-by-side comparison with a map of Tokyo at equal scale helps Tokyoites like me process an unfamiliar map of London, and understand the sprawl and severity of the 2011 Riots.

Click to view demo

The 2011 London Riots and your current location. Click image to view (requires GPS). Code by Raphaël Mazoyer.

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.

The Road to Responsiveness (Where’s the source code?)

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.

Think we’ve got it all wrong?
Follow AQ on Twitter

Forging the future of responsive web publishing? Write us.

Footnotes:

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.

Credits:

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.

Chris PalmieriAfter studying graphic design and Japanese language and aesthetics, Chris moved to Tokyo in 2001 to begin his design practice.
He co-founded AQ in 2004 to bring design basics to cultural organizations with bilingual websites. In his current role as managing director, Chris works with clients to clarify their ideas, oversees the creative process and designs.Read more posts by Chris Palmieri


Blog

Project announcements, interviews and essays on design, typography, and the Japanese web.