Nieman Foundation at Harvard
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?
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?
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.”
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.”
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.
