The ProPublica Nerd Blog

If you’re trying to make your fixed-width site adaptive, there are some things you need to know about the viewport tag.

We’re debuting a new feature today as part of Marshall Allen’s story about one woman’s fight with a Texas hospital to find out how her husband died.

In the course of reporting the piece, Marshall made over 500 annotations in 64 documents he uploaded to DocumentCloud, many of which were sources of facts in his story. He told us about this wealth of metadata, and wanted a way to present it to readers. We agreed that we didn’t want to show them in a separate graphic or interactive feature, but rather sprinkled throughout the story itself.

So we made a special feature we’re calling Explore Sources. To try it, click the “ON” button next to “Explore Sources” at the beginning of the article. Words and phrases throughout the piece will turn yellow. Click these yellow highlights to see the portion of the source document from which Marshall got that fact. Once the annotation is visible, click the document image inside of the popup to go to the full document in DocumentCloud, or anywhere else to dismiss it.

Today we're launching a new look for people reading ProPublica on smartphones.

In order to make our site more welcoming for the increasing number of you who read us on your smartphones, we've redesigned and re-engineered the site so that people on small screens will automatically see a version of the site optimized to fit them. If you're on a smartphone, you've already seen the new look.

You don’t need any app or special URL to see it. Just go to www.propublica.org. If you’re on your phone, you'll see our optimized site. Readers of our website using desktop browsers shouldn't notice a difference.

Today we’re launching a new feature that lets readers work alongside ProPublica reporters — and each other — to identify key bits of information in documents, and to share what they’ve found. We call it DocDiver.

Last week we published The Opportunity Gap, a news application that lets readers find out how equally their state provides poor and wealthier schools access to advanced classes that researchers say will help students later in life.

It features a host of technologies we’re using for the first time, and which we anticipate will be part of many of our news apps in the future. These include a new JavaScript-based “workspace” approach to placing, sorting and removing multiple entities on a single page. We also built our own map server, which we’ll have lots to say about later this summer.

We designed the app so it was oriented behaviorally, and not just hierarchically. That is, rather than simply showing users a collection of items (as so many interactive databases do), we wanted to encourage people to take the conversations they were already having about their schools and communities, and extend that behavior onto our app. We owe a debt to Nick Disabato, whose SXSW panel got us thinking about this concept. We were also inspired by The New York Times’ Oscars app, which uses Facebook to let readers create, share and compare their ballots with friends, and to let them reproduce real-world behavior — competing on Oscar predictions — within a news app.

This emphasis on encouraging behavior — coupled with our preference for keeping our apps light on database writes — spurred us to integrate Facebook in a deeper way than we’ve done before.

Last week we announced TimelineSetter, our new tool for creating beautiful interactive HTML timelines. Today, after a short private beta with some of our fellow news application developers, we’re opening the code to everyone.

The timeline is a very useful way to visualize sequences of events, and they’re especially useful to orient readers within the complex investigative stories we do at ProPublica. But they’re not very easy to make. As far as we know, there are no good open source frameworks that web developers can use to generate timelines quickly without losing design flexibility. So we made our own, which is debuting today.

By way of background, our most recent timeline was part of our story on disability discharges last month. We found some interesting parallels between what the Education Department was doing to reform the program and one borrower’s attempt to navigate the bureaucracy over the same five-year period. To visualize these parallel paths, we designed a timeline that showed both series events on one bar, but differentiated by color and space.