res
Features

Responsive Philosophy

The next generation of the responsive web.

Responsive design, which allows designers and developers to build websites that adapt to every screen size, is one of the most empowering web tools to be adopted in the last decade.

But adapting to the screen is only the first frontier of a new, responsive web. Today, users already expect a more meaningful experience on the web – experiences that not only respond to what device they're using, but also their location, time of day, what they’ve already read, and events happening in real-time.

To capture a user’s attention on the next generation of the web, you’ll need more than just responsive design.

You’ll need a responsive philosophy.

res
Inside The Los Angeles Times
The new latimes.com is one of the world’s largest responsive news websites ever built.

It was June 2012. We were sitting in the office, thinking through one of our most important pitches to date. We’d already worked in tons of newsrooms, but this one was different.

We weren’t just tasked with a redesign. This was an opportunity to completely rethink how one of the largest news organizations in the country presented its journalism and advertising in a digital world. Helping the Los Angeles Times move into the next era of the web – while preserving the rich identity of its 130 year-old brand – was not going to be easy.

We began by reaching back into the legacy of print media. We combed through newspapers from some of the most important days in history: Pearl Harbor, VE Day, elections, the Kennedy assassination, and more.

Looking back on these documents from our perch in the future, it’s important to remember that when they were created, the events these newspapers described weren’t yet history. They were just barely in the past. In fact, for many people in this age before TV and Internet, these newspapers would be the first time they heard any of this news.

For them, newspapers were the present.

When you look at newspapers in this light, you begin to see that they were documenting much more than just the recent past with words: they were capturing the mood and energy of the present with design.

You can see this most clearly on front pages. On days when a major story broke, newspapers would print huge headlines, photos and sometimes even large chunks of the article to capture the urgency of the news. Other days, two or three stories would share the top billing. Sometimes, a cluster of related stories would appear together at the top, drawing the eye but signaling to the reader that a full understanding would require a deeper read.

res

Thinking through this back at the office, our big insight hit: In print, newspapers were masters at responding to events with precise, appropriate visual and textual language. 

They understood what we call the “flow of news”: how to draw the reader to the front page, past the jump into a story, and then through the rest of the book.

In a way, these guys invented responsive design.

02 The One-Dimensional Web

When you look at the print version of any major print publication over time, you realize something interesting: they don’t just have a couple of templates. They have hundreds.

They have the ability to respond to any combination of events with a design that gives each one the proper editorial weight.

Somehow, we’ve lost that ability on the web.

In terms of layout, most homepages use the exact same template, day in and day out. And it’s not just homepages. Article pages, which are where most users first land on websites, look exactly the same, too. The result is that to a user, a day when war breaks out in Iraq can feel exactly the same as a day when the biggest news is a change in Bieber's hairstyle.

res

These limitations aren’t just stifling for readers. The lack of variability in online presentation limits the news organization’s ability to communicate its perspective and editorial voice to readers through design choices.

It’s no wonder that some publications feel so one-dimensional online: not all are equipped respond to events with the cultural understanding and editorial vision that once made them so essential.

03 Our Responsive Philosophy

This insight became the core of our responsive philosophy. Websites shouldn’t just respond to devices. Web experiences should respond to multiple contexts so that they’re meaningful to every reader, in every moment, on every device.

On the web, that means responding to much more than just culture and editorial vision. We can incorporate what we know about the user. For example, we know what device the user is browsing on, the time of day they’re visiting, where they are in the world, whether they’re a regular or a new visitor, how long they’ve been on the site, and where they’ve just come from.

res res

One example of this approach is the reuse of elements. We’ve long noticed that publishers invest massive amounts of energy and resources designing front-page and section treatments, and spend too little time designing elements for the articles themselves. An easy way around this is to empower editors to reuse packages of content originally designed for one context anywhere on the site, and have these packages automatically respond to their context.

For example: on the homepage, a gallery might expand to take over the entire width of the page. On an article page, it might take up only half the page. This allows editors and designers to create unique designs quickly without repeating work they’ve already done.

The other place where this philosophy is most prominent is at the bottom of the article page. Unlike the print newspapers of yesterday where the front page sold the newspaper, most visitors to today’s news websites visit to read a particular article. They may never visit the homepage.

To convert them into a multi-page and even repeat visitor, you have to capture their attention as soon as they finish the article and direct them on the path most likely to make them stick around.

To address this, most publishing sites throw in a comment section (that nobody ever reads) or put a static, poorly designed recommended content module at the bottom of the page. What they should be doing is reusing more dynamic designs and responding to the user to create an ideal path for them to follow.

When we were brainstorming ways to capture that same energy on the article page, we had an insight: when a user finishes an article, why not allow them to continuously scroll right back into the section page? The section page is already well designed and editorially curated to contextualize the article in a larger flow of news. Scrolling back into it after an article feels completely natural, and invites the reader to dive deeper into the section.

We called this feature “the transporter.”

res
01
The Los Angeles Times

The latimes.com transporter introduces a way to seamlessly path users from one section or piece of content to the next. Section fronts and article pages are anchored by a row of thumbnails, allowing readers an easy way to discover related content.

res
02
Vogue

Vogue.com's transporter allows for continuous, uninterrupted consumption. Users can endlessly scroll from article to article within the selected category.

res
03
Mashable

In Mashable.com's transporter, the bottom of the page scrolls into the top of the designated section page. The three columns in each section serves as an infinite scroll of stories, which creates a frictionless and highly-visual content discovery experience.

In the case of the Los Angeles Times, choosing what to serve each user would have been a huge editorial burden. To solve this, we collaborated with them on an algorithm that automatically decides the best thing to serve each user, based on all the information we know about them. Crucially, the system still allows editors to override those choices when they need to respond to major events.

For example, if a user comes in through an article on the Dodger’s blog, and they’re a frequent reader of baseball articles, the default setting might be to serve them more sports content. But if an earthquake has just happened, an editor can override that behavior to serve the news organization’s editorial agenda.

As this philosophy becomes more commonplace, you can imagine a new role developing inside newsrooms: a “programmer” or “pather.” This person would combine a deep understanding of the editorial mission with empathy for the user to constantly tweak the algorithms governing the transporter, and design responsive pathways throughout the site that keep users engaged.

04 Not Just For Publishers, But Also Brands

res
The brand newsroom
A multi-disciplinary team of strategists, copywriters, designers and technologists, working together to generate stories that map across the fragmented media landscape.

On the web, the definition of a publisher has become fluid. Anyone who wants to reach a user through media can become a publisher.

Increasingly, brands are co-opting tools designed for publishers to offer better experiences for their customers.

As brands become more publisher-like, they’ll also need to incorporate a responsive philosophy that adapts to the user so that they can reach them at the right time, with the right messaging, and an understanding of cultural events.

res
Atomized branding
Real-time events can be used as an input to a brand's story stream.

To do this at scale in our brand newsrooms, we’ve developed a process that allows multi-disciplinary teams of strategists, copywriters, designers, videographers and technologists to process cultural events, brainstorm creative ideas, and execute on them quickly. Just like the newsroom CMS's we work with, we’ve developed tools that help our brand teams identify and package culturally appropriate content that works on multiple devices.

To us, it's about responding to culture as well as audience conversation. Through data analysis – the backbone of our marketing programs – we can respond quickly to what consumers are saying, and pivot our content accordingly. It's a never-ending feedback loop that is crucial to the creative process.

And it doesn't stop at communications – we can also use responsive behavior to impact product development. In essence, responsive philosophy significantly shortens the product/marketing lifecycle. Based on triggers like culture and social insight, we can move at lightening speed to adjust creative, communications and products at the same time. 

In the near future, you can imagine brands thinking the same way that publishers do about users. They’ll create pathways that follow users from device to device, delivering the appropriate message at the appropriate time to solidify the relationship between the user and the brand. Instead of the user experiencing the same brand story over and over again in multiple silos – TV, websites, apps, etc. – they’ll experience a coherent, connected story whenever and wherever they encounter the brand.

05 The Way Forward

The best reason for a brand or publisher to adopt a holistic responsive philosophy is not what it offers today, but what it can become in the future.

To truly adopt a responsive philosophy, you can’t just slap new paint on an old house. You must create dynamic systems that can ingest, analyze and act on information to serve a tailored experience.

By nature, these systems are optimizable and extensible. In the future, they can adjust to incorporate new editorial needs, technologies, and user behaviors.

This systematization is far more valuable than a typical website redesign or brand strategy. Responsive philosophy isn’t just about designing websites that adapt to screen size. It’s not just about designing new interfaces. It’s not just about upgrading a technology stack.

It’s about suffusing an entire organization’s culture, process, and technology with the ability to respond to any situation, anywhere, for any user, inside and out.

Features
|
Selected Clients
|
Recent Launches
|
project
Maybelline Global Website Maybelline Global Website
project
Yonder Music Yonder Music
project
BBC Newstream BBC Newstream
project
The Guardian Labs The Guardian Labs
Code and Theory