On Innovation

How the journalism sausage gets made:

The Washington Post splash page that contains recent and archival 9/11 stories and multimedia was first sketched on an iPad using the Penultimate app. The Post’s website is built on a modular system that allows producers and editors to arrange modules like building blocks to create a full page.

Mark S. Luckie / National Innovations Editor

When asked if he wanted help soliciting ideas and sources for his Night Lives column, Style reporter Dan Zak said, “This is entirely up to you guys. Go wild.”

Working with Katie Rogers on the social media team, we used Zak’s theme for a local summer series to ask our readers directly: “What goes on in Washington while we sleep?” Specifically, we were looking for ideas to help source a feature story each week for an entire summer. We mixed a Twitter call-out using the hashtag #DCNightLives and a Google form to accept submissions. Fast forward two months, and Zak has written a total of nine stories, three of which were sourced from our initial request for readers to help.

In an effort to highlight the people behind the numbers associated with the economic recession, The Washington Post is offering the longtime unemployed an opportunity to share their stories directly with readers.

“Help Wanted: Stories of Unemployment” is powered by six unemployment-affected families and produced by The Post’s Business section and Interactivity team. Throughout the summer of 2011, members of the families are posting their experiences as they struggle to pay the bill, preserve relationships and maintain hope for the future in Maryland, Virginia, Ohio, California, Oklahoma and Tennessee.

In a Washington Post investigation published Saturday, reporter Debbie Cenziper chronicled the waste and mismanagement of affordable-housing projects across the nation. Cenziper, as part of her reporting, visited sites where construction and renovation projects funded by the U.S. Department of Housing and Urban Development had been delayed or abandoned. For our part, we needed to find a way to take Post readers to these locations. Enter Google Street View.
 
We used the photographic mapping service to look up some of the project sites and realized that we could now visually confirm Cenziper’s findings for Post readers. Many of the addresses showed panoramas of overgrown brush, piles of dirt or undeveloped, grassy fields. After Cenziper got in touch with developers on the projects, we created a graphic on washingtonpost.com that featured the Street View shots, the funding amount for each project and a summary of each project’s history. We used Street View for local sites, such as Temple Hills, and sites across the country, such as Anaheim, Calif.

The Google Maps API makes adding Street View panoramas simple and intuitive, even if you have little or no Javascript knowledge. Check out this page for more information on how to do it.

Here are some other examples of how news sites can use Google’s service as a storytelling tool:

When your job is to sift through the most conversation-worthy news of the day every day, a basic question soon presents itself: How can I extend the life of the stories our readers feel most compelled to share?

At first, I tried asking people to send in tweet-sized mashups of the week’s most-read stories on Facebook and Twitter each Friday. The experiment was fun, but didn’t attract many readers. I was still struggling with the concept when Melissa Bell of BlogPost mentioned that news quizzes were a hot topic at this year’s South by Southwest festival. So I thought about how we could make our most social stories into a quiz. By simultaneously tweeting and blogging, I was able to cobble together a before-and-after quiz experience with questions and answers based on our most popular stories. We use Twitter’s Blackbird Pie tool to create a leader board with winning responses from our readers. This week, we’re attempting to carry out three social news quizzes themed around the royal wedding.

I developed the wedding-themed news quizzes in order to compliment amazing  royal wedding graphics. Working in tandem with the graphics team meant both the quizzes and graphics were being used, shared and talked about by readers.  

Beyond hard numbers, the best part for me is being able to recognize – and mobilize – a core group of engaged readers who come back to take the quiz and check the leader list each Friday at 2 p.m. Could we the quiz work without a human moderator? Absolutely. I’d like to see this news quiz given a permanent presence as an app, either on our site — The New York Times has a great one  — or on our Facebook page.

It’s been an encouraging early phase with this news quiz so far, but now I’m faced with this question: What would we build if we could? In figuring out the next steps for this project, I’ll be on the lookout for good examples of news quizzes and interactive applications. What have you seen out there? Tell me on Twitter – I’m @KatieRogers and I’ll be sure to check out whatever you send me.

Katie Rogers / Social media producer

Recently, Michael Williamson began his journey photocasting the recession across America on Recession Road. While Williamson was busy gearing up with his latest tools of the trade (a smart phone and Intersect), we were developing a game plan for how Washington Post users would engage with the product online.

Intersect by nature provides a fantastic, almost real-time photo-blogging platform in which users can “intersect” with each other’s stories and build a more encompassing narrative. We’ve teamed up with Intersect before in projects such as the Rally to Restore Sanity and/or Fear, which was executed in a blog post form. In this instance we decided that photography was the driving force of the project and we wanted to showcase this aspect in a gallery-like experience while also giving attention to the location and caption of each post. We settled on a vertical photo stream in reverse chronological order with a 3D thumbnail navigation. Users can also view tags and map Williamson’s location with the accordion in the bottom left corner.

With the number of tablets and smart phones increasing, we’re trying to mitigate the amount of repurposing we have to do for different platforms and devices. For this reason, we opted to use HTML5 and JavaScript, with the content driven from a JSON feed from Intersect.

HOW WE DID IT

I was able to achieve most of the effects and transitions that I wanted through jQuery. The thumbnail 3D effect was definitely a little more difficult to execute. In order to achieve this effect, I experimented with the HTML5 canvas element and the drawImage method. One of the most frustrating things about working with HTML5 is making sure there is proper fallback for browsers that don’t yet support it. In order to provide alternate content for users with these browsers, I leveraged used Modernizr, a JavaScript library that detects support of HTML5 elements.
 

STREET VIEW

One of my favorite “extra” features is the Google Map street view. Since Intersect uses geolocation to map where each photograph is taken, users can get a great sense of place surrounding each photograph. In some cases, the user can literally look at exactly what Michael was looking at when he snapped the shutter.

Use your favorite HTML5-enabled browser or tablet and check out Williamson’s last stop on the road.

Grace Koerber / Web designer

Friday morning, as news of the earthquake in Japan spread, we started pulling together an interactive map that would show readers where and how events unfolded. Over the next 36 hours, we would continually expand and improve the information, design and interactivity of the map as the news of the earthquake and tsunami came in.

The process illustrates how quickly web projects have to evolve and how crucial it is that they are up to date minute-by-minute.  As soon as we had new information, we had to post it because people everywhere were hungry to know more about what was happening.

Above: The map at the beginning (circa 9 a.m. Friday morning) and near completion (Saturday afternoon)

Here’s the breakdown of how we followed the events and updated and improved our map to reflect them (continued after the jump):

It’s tricky changing the tires on a moving bus, and washingtonpost.com has been cruising since 1995. The site was an early digital innovator, but technological advances and evolving forms had made it a mishmash of experiences. It was great for the thing you came for, but if you wanted to look around, it was kind of a mess.

This holistic overhaul is designed to make finding stories and moving from one to the next much easier. We’ve grouped similar functions and content, such as related visuals and stories (see below). Here’s an example of how contextual links have changed on article pages: Instead of four zones competing for a user’s attention, we now have one organized area promoting deeper engagement:

On section fronts, we’ve surfaced the depth of our coverage in multiple ways.

As we launch into Tumblr, we thought it would be helpful to share a few tips for Tumblr newbies and ask you veterans to share your expertise. With that in mind, here are a few quick steps for beginners to get going in Tumblr.

1. Think of Tumblr as blog-meets-Twitter: start by finding interesting people to follow. Tumblr recently revamped their Explore directory to feature posts by tag. We browsed news, tech, Egypt and Libya tags for starters. You might want to follow our friends in Style, for instance. 

2. Save topics in your dashboard. In addition to following individuals, you can create your own topic stream by searching for it and clicking “track this tag.”

3. You can Tumbl in three key ways: reblogging/liking posts from your dashboard stream, creating an original post, or curating something interesting from the Web with the Tumblr bookmarklet. (Of course, you can always Tumbl from your phone.) If you want people to be able to post answers to a question, end the title of your post with a question mark and choose “let people answer this” from your edit panel. 

4. How do YOU Tumbl? We’re interested in news, technology and just about anything Webby. Who should we be following and why? We’ll round up our favorites in time for Tumblr Tuesday. 

Amanda Zamora / Social Media and Engagement Editor