The Washington Post on Thursday became the latest news organization to take the increasingly fashionable step of blowing up its article template to present a feature story in a unique, immersive format.
In December, The New York Times blew some minds with its special multimedia presentation of “Snow Fall” — a six-part narrative about skiers trapped in an avalanche.
The Washington Post invented a similarly innovative presentation for sportswriter Rick Maese’s profile of professional cyclist Joe Dombrowski, a talented 21-year-old from the D.C. area who some hope will redeem the sport in a post-Armstrong era.
- One section of the story has an interactive map of a cycling route, matched to audio interview clips and Dombrowski’s physical performance data from the ride.
The article presentation is notable for several reasons. Its full-width photos completely immerse the reader; multimedia elements blended throughout the text reinforce that deep experience; and the responsive design adapts to all screen sizes.
I asked Washington Post Information Designer Wilson Andrews, one of 12 Post staffers credited with contributions to the piece, to give us some background on how it came together.
Poynter: Where did the idea for this kind of presentation come from, and what were you aiming to accomplish by doing it this way?
Wilson Andrews: Because last year was an election year, much of what we did then had very specific focus. After the election, we took a step back and were able to broaden that focus somewhat and look to try new things.
This story presented a great opportunity for a new storytelling model that we had never tried. It was a sports feature that didn’t peg on something we normally do, and we had the fortune of a looser deadline because of that. Rick Maese was a great partner to work with, he had a lot of enthusiasm for and partnership with what we were trying to do, so that helps a lot.
- Wilson Andrews
We wanted to try a new form because we want to elevate the experience that our readers have. They come to the Post to read stories from some of the best journalists in the world. We want our presentation, visual storytelling and the overall experience that our readers have to match that level of quality. At the root of it, when you plan and design your visuals specifically for a story, it allows for a much better story. It’s why I pursued a career in journalism.
How much time, resources, people went into building this?
Andrews: We started discussing the project in mid-January, about a week before Rick was to travel to Nice to report on Joe. The sports editor on the project, Mitch Rubin, approached me and representatives from other visual departments with the idea that this story could be elevated to a unique presentation. We were looking for opportunities for this format, and decided this story was a great one.
I worked on the design and front-end development of the project and got major art direction and style from Tim Wong and Sarah Sampsel in digital design. I probably started spending a majority of my time on the story in early February, and really crashed on it after we got the first draft a week and a half ago. Gene Thorp and Bonnie Berkowitz from graphics helped report and produce some of the graphics with me. Rick shot video in France, and videojournalist AJ Chavar shot interviews with Joe in Virginia. The footage from these two sources were edited by AJ to create the 5 videos in the piece. We had a freelance photographer shoot photos with Rick when he was in Nice. Our dedicated copy editor David Larimer spent the past week with all the different elements. And then in the past couple days we spun up a new WordPress instance and Yuri Victor and Amarilis Munoz helped me migrate the story prototype into the beginnings of a template that we plan to reuse in the future.
What plugins or other pieces of technology did you use, and how did they make it easier?
Andrews: The backbone of the project uses Bootstrap, an awesome responsive framework developed by Twitter that made it relatively painless to design for all devices. This was probably one of the biggest complexities of the project, that we wanted one page for all devices. And that one page had to look really good on all devices. This was our guiding standard.
As I mentioned, we deployed the project with WordPress, which is super flexible and easy to add features on the fly, especially in the ways we’ve used it at the Post. Yuri Victor and Greg Franczyk in IT get all the kudos for making WordPress work as a great templating engine for us.
One other way we made the page mobile-friendly was to lazy load almost all of the heavy, bandwidth-hogging visuals. We load videos and photos as you approach them in the story. That way, we don’t have to preload dozens of images and five videos when the user gets to the page. This was the biggest mobile performance improver by far.
Does this build off any previous projects? And do you expect to reuse this template in the future?
Andrews: This project was a ground-up, from-scratch implementation. We have a few in-house modifications to Bootstrap, but overall the project was very custom from the start. Now that we’ve done it, we’ve learned a lot, and we fully intend to re-use a large portion of this project to power other enterprise stories and custom presentations. Keep an eye out for much more visual goodness from the Post.
Comments