On Innovation

This week we launched the Better/Worse Life Project, which looks at population growth, unemployment and median income across the country over the past 30 years and uses that data as a background to frame the very simple, open question ‘Is life in your state getting better or worse?’

It uses your IP address to automatically detect your county and state so that we can ask you about the area that’s most relevant to you at the moment.

After we have your vote, we ask for a couple of simple demographics – age and race – and display a visualization that shows where your state falls on the scale from better to worse based on the votes we’ve gathered. You can then filter the responses based on race and age, or sort the states based on unemployment, median income or population growth, to see if there is trending based on these metrics.

This is one of the first projects to take users opinions and mash them up with actual data to see whether perceptions match up with reality.  It’s a fascinating window into how people feel about the places where they live and a forum for a conversation around how things are changing.

There are already some patterns emerging.  We are starting to see that, in general, more states with high unemployment are being rated ‘worse’ by users, and more places with low unemployment are being rated ‘better’. 

D.C. stands out – though unemployment is high, 83 percent of users (as of publication of this post) ranked it better. One left a comment after rating it ‘better’: “DC is better due to a higher number of permanent residents, community activism, and better stewardship. Welcome to the 21st century!” The comments on why people voted the way they did have been some of the most interesting results of the project we’ve seen so far.

This kind of presentation can be risky. It’s so dependent on user feedback that if no one participates, there will be nothing interesting to look at. But it’s worth the chance – the kind of fascinating information we can gather once it does get going is possible only when you open the doors to participation from users. We’re collecting information on counties in addition to states so that, if we get a lot of responses, we can display a profile of the state that shows whether residents think counties are getting better or worse. It is going to take a lot of responses to get feedback for over 3,000 counties, but it might be possible with your help.

Right now, we have about 4,000 responses, but we need many more. Rate your state here: http://wapo.st/betterworselife

- Kat Downs / Innovations Editor for Graphics

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 Apple announced early last year that it would not support Flash on the iPhone and iPad, a passionate conversation erupted in the world of web development: Was Flash dead? If not, how would it survive? When should it be used? News developers asked these questions as well, and, at least in our newsroom, the conversation inspired some thinking about how to approach interactive development. Over the past year and a half, there has been steady movement toward more interactivity based on JavaScript and fewer Flash-only experiences.

Last week we published a graphic that compared four federal budget proposals through a series of charts. We used the jQuery library Flot to draw simple, interactive line charts that showed how the debt and deficit would change under the different plans. Flot is very easy to use, flexible and customizable, and is one of many free-to-use JavaScript graphing libraries out there (Dracula, Highcharts and RGraph are a few others). We also built a customized chart with CSS and JavaScript at the bottom of the page to show how different categories of spending would be affected.

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

The original sketch for the Post’s NCAA Tournament cover was created in early February, with the idea of finding a simple way to emphasize the DC angle this year: stacking all the names of the teams into the shape of the Washington monument and highlighting the eight schools that would be playing at Verizon Center on Thursday.

The turnaround was too tight for a hand-drawing from an illustrator — the field was announced between 6 p.m. and 7 p.m. on Sunday and the first edition deadline for the paper was 9:30. So the type was set up and skewed in Adobe InDesign, then brought into Photoshop and combined with an oversatured image for a surreal background.

Brian Gross / Senior Sports Designer

markcoatney:

The Guardian has been doing some of the best, most innovative online journalism out there, and this is one of my favorite things they’ve produced: A page that pulls in all the great SXSW coverage by the Guardian’s reporters on Tumblr into a single, sortable space. Especially nice: Developer Dan Catt’s explanation of how he built this using the Tumblr and Guardian APIs. Definitely worth a look, and worth stealing ideas from.  

Adding to our inspiration file. And we dig Dan Catt’s explainer on leveraging Tumblr and Guardian APIs to aggregate SXSW coverage into one compelling package. 

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.

Sunday I attended a panel called hacking the news: applying computer science to journalism. The panelist presentation I was most fascinated by was that of Trei Brundrett, the vice president of product and technology at SB Nation.

For the sports site SB Nation, essentially every night is election night — they are constantly updating breaking and developing news. Trei and his team wanted to create an alternative to the old Internet standard of updating posts at the bottom and directing readers to scroll down, seeing it as a low tech solution and a poor user experience.

In response, Trei and SB Nation have developed a technology called story stream, where journalists can update posts anywhere within a developing story, using design elements to draw readers’ attention to the latest news. Also, each update has a unique SEO-enhanced URL, which both drives traffic to the main post and attempts to capture search traffic on specific news updates.

When a reader wants to follow a story via mobile or through social networking sites, this technology is also able to push out updates to all of those who “liked” or want to follow a specific story.

This technology seems like an interesting attempt at executing a more reader-friendly breaking news experience.

Katherine Goldstein / Innovations editor at Slate