News organizations across the globe fell in love with the New York Times’ so-called “immersive storytelling” format with the launch of Snow Fall in November 2012, while critics of the project said it wasn’t reproducible or scaleable. But long before Snow Fall came to fruition, folks at Vox Media — the company that brings us publications like The Verge, SB Nation and Polygon — were already perfecting a system to do similar layouts, reproducibly, with scale, on a deadline.
The company was born in a digital age, and it shows in the way their systems work. As I talked with Vox’s chief product officer Trei Brundrett, he had to correct my continual, habitual and incorrect usage of the phrase “content management system.” Brundrett calls their system a publishing platform, which, at its heart, has a CMS, but also has an editorial curation element, structured data, distribution tools, analytics, social and community tools.
“We built it from the ground up,” Brundrett said. ”The company was actually founded by bloggers, so the DNA was blogging. A pure digital kind of mentality. We build a platform specifically to the needs of a sports blogging platform.”
And part of that system — and the one that intrigues me the most — is its dynamical, flexible templating system.
When Vox launched The Verge, they took their first stab at what some call “immersive storytelling” — they just call it “longform” stories, appropriately — in November 2011. We’re talking about stories that have big, beautiful photos and typography, where the design is tailored to the content, rather than being shoehorned into an inflexible template like most news organization sites.
The layouts aren’t handcoded. And they don’t take six weeks of collaborations. And in many cases, it doesn’t even require the assistance of a web developer (of which they have 46, by the way).
“We’ve had editors get so good at it that it takes no longer than an hour, hour and a half,” Brundrett said. That includes deciding on a layout, adding photography, pullquotes, taking an editing pass and hitting publish. The most time-consuming part of it is the time spent polishing and editing.
So, how do they do it?
Alongside the text editor portion of the system, there are a series of mini-layout options that editors can select. It might be, for example, a mini-layout that includes a huge, full-width photo with a cutline. Or a big right-aligned pullquote. Or a parallax-style background image with a title over it. Or a gallery of multiple photos. Editors can select one of those options, fill in their copy and media, then rearrange those elements within the context of the full story as needed.
“We’re lucky we have an editorial team that’s hands on,” Brundrett said. “That’s what’s important about having the blogger DNA — they don’t already have the abstraction between what they’re making and how it shows up.”
The standard snippet library contains elements that are all responsive, so on mobile they will behave just as elegantly. The snippets provide a framework and standards for the editors, rather than giving them a wide open canvas. For the super complex features that require elements outside the standard mini-layout library, designers and developers can get involved to build out new functionality.
You can see a collection of SB Nation’s longform layouts at sbnation.com/longform. There are nearly 100 on this one site alone, plus another hundred on The Verge’s site and yet more on Polygon’s site.
Effectiveness of longform
So the question we all have about these beautiful layouts. Does it work? Is it more engaging? How do we know? Though Brundrett didn’t have exact numbers to provide, he said their numbers have grown and the audience has developed higher expectations for what they produce.
“We get really great traffic to these pieces, off the charts engaged time, people are reading all the way down the page, great comments and discussion,” Brundrett said. “From a social perspective they get shared like crazy . They do really well for us.”
Advertisers have also gone nuts over this type of storytelling. Microsoft, for example, wanted to be around the type of work Vox is doing — both in terms of the tech-oriented audience, and to elevate the quality of their brand and show off what modern browsers can do. They’ve sponsored Polygon’s Human Angle series.
And then there’s the value outside of the numbers.
Vox has been able to attract really talented writers and designers, and then foster a strong working relationship between the traditionally separate editorial, development and advertising teams.
“We’re trying to build the kind of media company that the most talented creators work at,” Brundrett said. This has helped attract high quality writers and producers and designers. ”All of these other things are important to us and make the return on investment huge.”
What traditional media can learn: Represent your users in the process and create collaborative teams
The communitication and collaboration between editorial and develoeprs and designers is the most important part of Vox’s culture.
They’ve also created a role on each one of their teams called “support managers” to help with the collaborative process and represent the needs of the readers. It’s a combination between QA (quality assurance) on product development and they are also front-line support so they know what readers are asking for and interested in, while representing users in product design and development process.
“There’s no special tools in all of that, that’s just building a culture of collaboration,” Brundrett said. “There’s a lot of great back and forth and that’s where the innovation comes from.”