HOME
          
LATEST STORY
From rumor to out: Tim Cook reminds us that “unpublishable” facts don’t live in a vacuum online
ABOUT                    SUBSCRIBE
Nov. 16, 2012, 12:03 p.m.
Reporting & Production

The future of the feature: Breaking out of templates to build customized reading experiences

In print, decades of design language have helped publications draw extra attention of readers. But news web design has mostly been straitjacketed in rigid templates. A few news sites are trying to break out.

When it comes to reading long form, the web can be an ugly, distracting place. It’s the reason why services like Instapaper and Pocket (née Read It Later) exist: to strip content of its context — noisy site designs, advertisements, and other unnecessary elements. But perhaps we’re moving into a new era where more of the web is clean and readable. Maybe the future of web publications will be beautiful enough that the reading experience is more enjoyable in its natural habitat.

This is how I felt, at least, when I came across ESPN.com’s “The Long Strange Trip of Dock Ellis,” a gorgeously designed feature about the Pittsburgh Pirates pitcher who threw a no-hitter while under the influence of LSD. It’s arguably one of baseball’s most colorful tales; this take on it is certainly one of the most ambitious web designs ever attempted by a traditional media company for a single article. The piece is generously adorned with accompanying visuals — photos of Ellis, memorabilia like trading cards, pull quotes, all moving and sliding while the reader scrolls. The reading experience is very comfortable on both desktop and tablet, thanks to a larger text size and generous amounts of white space. It feels like an experience instead of a block of words surrounded by the detritus of the web.

But at a time when news is increasingly consumed without context — stripped down in tablet readers or on mobile devices — and when templates have taken over news web design, what’s the point of dedicating design resources to online feature layouts? Why are outlets like ESPN, Pitchfork, and The Verge investing in bespoke design for articles?

From Super Mario Bros. to ESPN.com

For John Korpics, vice president of creative at ESPN Digital and Print Media, much of the goal is to replicate the immersive experience of reading a magazine — to stand out from the sea of low-end clickbait that fills up so much of the web. “The same way you might read a magazine article, you can browse the surface layer of visuals like graphics, captions, and pull quotes, or you can dive deeper. The key is that the user has the choice of how to interact with the story,” said Korpics.

But while “The Long Strange Trip of Dock Ellis” takes a lot of design hints from magazine layouts, the most interesting and attractive visual elements are unique to the web. Most remarkable is the use of parallax scrolling, a method in which the background moves more slowly than the foreground to give the illusion of depth. (Think of the way the background looks in Super Mario Bros.) Design elements like this exist separate from anything that could ever be done with a traditional magazine layout.

Jena Janovy, deputy editor at ESPN.com, said that several other stories had already chosen for similar deluxe design treatment for later this year and early next year. The design execution alone for “Dock Ellis,” from inception to conception, took three weeks. Which begs the question: How scalable is this? And will smaller publications, without the resources of a site the size of ESPN.com, be able to create something as beautiful?

Building a better template

Tech site The Verge was only about a month old when influential bloggers like Daring Fireball’s John Gruber started declaring it was “one of the best publications in the world.” Founded by Joshua Topolsky, who had previously led Engadget, The Verge represented a chance to build something new and ambitious from the ground up.

“When I left Engadget, there was an emphasis on ‘cheap, fast, and dirty.’ The truth, in what we found, is that people are psyched about longer stuff that’s in-depth and beautiful,” Topolsky said.

There’s nothing cheap, fast, or dirty about The Verge’s impressively designed feature content, which the site has been regularly publishing since its launch a year ago. Take, for example, the versatile design of this long-form piece on biohackers, which elegantly balances text, photos, and video in its storytelling.

The Verge’s secret weapon is Chorus, its custom content management system that makes it easy for writers and editors to create intricate feature layouts. Vox Media — which owns The Verge, as well as GIF-savvy sports site SB Nation and new gaming site Polygon — is protective of Chorus’s features, but a piece about the CMS by TechCrunch describes it as an extremely robust, flexible publishing platform with a strong emphasis on both editorial workflow and design.

As a testament to its power, The Verge only hired its first full-time designer last May. Up until that point, all feature layouts, such as this visual history of Android and this personal essay about Starcraft, had been designed by the editorial staff. The Verge’s features don’t quite have the single-use designs that stories “Dock Ellis” do; they share a common visual frame and differentiate from one another mostly through creative typographic highlights and small graphical touches. But they are definitely designed for reading, not content consumption, and it doesn’t take anywhere close to three weeks to build a story out.

When I asked if each publication should have its own custom platform, Topolsky quickly agrees — explaining that, though his title at The Verge is editor-in-chief, he guides much of the feature development and provides a lot of design input for Chorus.

“I think everyone is going to do this. We’re fighting the same battle [as other publications]: trying to figure out how to create a scalable tool for writers and designers that lets you create beautiful things for the native web.”

In fact, Topolsky’s motivations behind The Verge’s design is deeply rooted in an optimism in the native web, as opposed to designing platform-specific apps to enhance the reading experience. (Though, to be fair, The Verge has an iOS and Android app.) All the site’s feature pieces render appropriately on mobile devices and tablets, and fully adaptive designs will appear on the site early next year. (SB Nation and Polygon are already adaptive.) In contrast, that gorgeous “Dock Ellis” spread is difficult to read on an iPhone without zooming.

According to Topolsky, “Building it once and making it work in multiple places is where everyone is headed with publishing.”

Pitchfork goes horizontal

Venerable indie music site Pitchfork has been publishing album reviews since 1995, and over the past decade and a half, has gradually expanded its content to news, columns, and long-form profiles. This July, the site began publishing Cover Story features, profiles of big artists with specially designed “dynamic” layouts.

They fall somewhere between The Verge’s templated-but-designed and ESPN’s highly-customized approaches. Though most of the profiles so far appear to use a similar template and design language, the tone and aesthetic of each piece is drastically different. Compared to the vertically scrolling designs from ESPN.com and The Verge, I found Pitchfork’s columned, horizontal layout a bit more difficult to read. But visually, it’s much more interesting. Pitchfork takes advantage of the dynamic features of the web. This profile of Cat Power has subtly shifting colors; the Ariel Pink piece animates pull quotes as the reader scrolls; and appropriate for a music site, there’s an embedded music player that persists throughout the layout, featuring a selection of playable tracks from the profile subject. These things improve the Cover Story features not just in terms of readability but tonality, existing to supplement content but never distracting from it. (The fourth Cover Story, on Bat for Lashes, shares the vertical, parallax approach of “Dock Ellis.”)

“I’m less excited about the bells and whistles,” said Michael Renaud, a creative director at Pitchfork. “This level of control just provides the opportunity to present content in a more traditional layout environment that gives focus to the story itself.”

The Cover Story pieces are well-written profiles, but also come from a tradition of great long-form music writing published by Pitchfork. It’s only recently that browsers are catching up to support the kind of visual design that can match the quality of written content.

“Web design has long been plagued with limitations on things like typefaces and bandwidth,” said Renaud. “And now that things seem to be loosening up in those areas, I hope designers can come back to the basics that we once had to abandon, rather than over-designing some grandiose experience for every piece of content. It’s certainly an exciting moment.”

Going mobile

Like “Dock Ellis,” Pitchfork’s Cover Story features are hard to read on a mobile phone. Martin Belam, the UX consultant formerly of The Guardian, criticized the Bat for Lashes piece for it, quoting his friend Mary Hamilton: “Lauding web design that doesn’t work at all on mobile as brilliant is like praising a static PDF of a gorgeously designed print page posted to the web.”

While there’s still work to be done on responsive design — the more complex a design, the harder it is to make it look beautiful on varied screen sizes — readers seem to be reacting positively to these designed pieces. “Dock Ellis” has been one of the most popular long-form presentations from ESPN.com in the past five years; Pitchfork saw a big boost, especially from referrals from social networks (“the design does give people another excuse to tweet about it or whatever,” said Renaud); and for each of its design-heavy pieces, The Verge consistently sees a traffic uptick.

While researching this piece, I asked friends and colleagues about other unique feature designs they’d come across, but in the process, I had a hard time coming up with a single term to describe the trend (I often defaulted to the not-so-elegant phrase “design-y feature pieces”). Even within publications, there doesn’t seem to be a consistent nomenclature for it. Pitchfork makes a distinction between “dynamic” and “standard” viewing experiences; at The Verge, Topolsky says they simply call them “feature layouts.”

But perhaps we don’t need a word for it. There’s a clear trend that both major media outlets and independent web publications are investing the resources and energy into more thoughtful and uniquely designed article layouts, and expect more sites to follow suit. We might not need a word for these kinds of designs, because soon this might be the way all serious publications treat their features.

POSTED     Nov. 16, 2012, 12:03 p.m.
SEE MORE ON Reporting & Production
SHARE THIS STORY
   
Show comments  
Show tags
 
Join the 15,000 who get the freshest future-of-journalism news in our daily email.
From rumor to out: Tim Cook reminds us that “unpublishable” facts don’t live in a vacuum online
The Apple CEO confirmed what some websites had reported years ago — the fragmented lens of online media giving new meaning to the idea of an “open secret.”
Ken Doctor: The New York Times’ financials show the transition to digital accelerating
The numbers may look flat, but they contain a continuing set of ups and downs. Up next: executing on a year’s worth of launches.
Before the “teaching hospital model” of journalism education: 5 questions to ask
It’ll take a new generation of academic leadership — willing to incur the wrath of faculty, the greater university, alumni, industry, and analysts — to break through the old ways we train journalists.
What to read next
1020
tweets
The newsonomics of the millennial moment
The new wave of news startups is aiming at a younger audience. But do legacy media companies have a chance at earning their attention?
531Ken Doctor: The New York Times’ financials show the transition to digital accelerating
The numbers may look flat, but they contain a continuing set of ups and downs. Up next: executing on a year’s worth of launches.
413The new Vox daily email, explained
The company’s newsletter, Vox Sentences, enters an increasingly crowded inbox. Can concise writing and smart aggregation on the day’s news help expand their audience?
These stories are our most popular on Twitter over the past 30 days.
See all our most recent pieces ➚
Encyclo is our encyclopedia of the future of news, chronicling the key players in journalism’s evolution.
Here are a few of the entries you’ll find in Encyclo.   Get the full Encyclo ➚
Knight Foundation
Bayosphere
InvestigateWest
Center for Public Integrity
BuzzFeed
SeeClickFix
National Journal
Media Consortium
Seattle Post-Intelligencer
Wired
Facebook
The New Republic