Screen Shot 2014-04-23 at 4.54.16 PM

How we built The Good Life

Screen Shot 2014-04-23 at 4.54.16 PM

On Earth day, we launched a big multimedia project at the Bangor Daily News covering the impact of the back-to-the-land movement, an influx of young, educated people who moved to Maine in the 70s in order to pursue a simpler way of living.

The project was several months in the making and couldn’t have been possible without the awesome teamwork of everyone involved: reporters Abigail Curtis, Aislinn Sarnacki, Chris Cousins and Emily Burnham; visuals editors Brian Feulner and Eric Zelz; editors Judy Long and Susan Young; senior editor Anthony Ronzio, and, like any project of this scale, the dozens of people in and out of the newsroom who helped us test the user experience.

We’ve done a few multimedia projects at the BDN over the past year. In June we published Proof, about Maine’s rape survivors struggle for justice. In October, we spent the night at the Bangor Area Homeless Shelter and shared their stories in a multimedia piece. In March we visited Isle au Haut and chronicled life on an island in the winter.

The process started with an idea last fall, and over a few conversations and preliminary reporting we split the idea into five major stories (chapters) that each reporter could tackle.

We drew inspiration from this project from several sources: Sports Illustrated’s amazing multimedia profile on Tim Tebow from last November, NPR’s interactive project Planet Money makes a T-Shirt, and building on some of the aesthetic and features we had already established in our earlier multimedia projects.

[Warning: here’s where it gets technical]

Because this was a project with so many contributors, having a way that reporters and editors could file and edit copy early and often into the prototype was essential. To do that I built a simpler PHP script that imported HTML from Google Docs (one for each chapter) and converted it into a JSON array of sections and paragraphs.

We host these projects on a CDN in order to keep them cheap and fast, and that works since they don’t really need any dynamic data processing. So the final project has to be entirely client-side — read: no htaccess or PHP.

So I got around this with my PHP script two ways. The first time I used it (for the Isle au Haut project), I had it pull updates from the Google Doc on cron every minute. That worked, but it was constantly running on my computer, even when I wasn’t working on the project. For The Good Life, I used LiveReload, an app that updates your browser every time you make a chance to a file, and I had it run the command to run the importer every time it updated my browser. Voila! Only updates when I’m working on the project.

For the project framework itself I used Boostrap. It’s a front-end framework that gives you a lot of pre-built styles and javascript features out of the box, like the carousel we used in Chapter 5 or the modal windows we used for the next chapter navigation and the credits.

Screen Shot 2014-04-23 at 5.25.26 PM

For the videos, I used VideoJS, which I used with our other projects. It’s really lightweight and has a very designer-friendly API.

Then there is a lot custom jQuery. I think the final custom files came to 19.5kb pre-compression. I had a lot of fun with this; we’d talk about the project and say, “can the music start at this place?” or “can we do something to get people to know to scroll”? and then I’d figure out how to make it happen.

As we were working on the project, I symlinked a folder on my localhost to my public Dropbox folder* so that everyone could see updates in real time as they were made and contribute feedback. If I was working at the same time as they made updates in the doc, the updates would appear in the piece moments later. I think this is so valuable in helping everyone, not just techie people, feel invested in the web production process. And it kept my sanity in check when we were doing mobile testing.

*Using Dropbox for production is a bad, bad idea, though. I had something still linked accidentally and they sent me a nastygram on Tuesday morning.

[Ok, end technical things]

I said it when we made Proof last summer and I’ll say it again, because I think it’s so important: These projects only work when all the contributors can work together, revising each piece bit by bit, to make sure that every piece is purposeful. There were many hours when we all sat together and walked through each piece, trying out how different video edits and web transitions would work together.

We knew that the project would be a time commitment for the average reader. Each story is about 1,000 words and each video is at least two minutes. So we decided to release the project Netflix-style: All five are available on the first day, but promote a different chapter each day on the homepage.

Screen Shot 2014-04-23 at 5.46.43 PM

So far the response has exceeded our expectations. It’s nice to impress people with a great presentation, but I know it resonated the way it did because it was a great story, too.

One of the 255 Facebook shares on our original post to our Facebook account.
One of the 255 Facebook shares on our original post to our Facebook account.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>