BostonGlobe.com: Using responsive design to tell interactive stories

Coverage of SXSW 2012 in Austin, Texas, is provided by Next Issue Media.

When The Boston Globe launched its new website BostonGlobe.com last fall, it received quite a bit of attention primarily for two reasons: its paywall and its design.

The Globe was one of the first major newspapers to build a website using responsive design. From a programming and design perspective, undoubtedly, the challenges of responsive design caused lots of headaches in the development phase, but the result is impressive.

At SXSW, Next Issue Media sat down with Miranda Mulligan, digital design director at The Boston Globe, to talk about the advantages and limitations of responsive design and how her team is building HTML5-based interactive stories.

Automatic resizing

The primary benefit of responsive design is the ability to build a website that automatically and flawlessly resizes itself based on screen sizes, while maintaining one code base.

“If we want to create a mobile experience, we don’t have to go design a whole mobile side of things. If we want to make updates or changes, we can do that from one universal place and then it makes changes in all of those places,” said Mulligan. “We wanted to make sure we were able to serve an optimized experience in a consistent way.”

Based on HTML5, responsive design uses progressive enhancement techniques, which means you will always get a very basic experience no matter what device you are on. You can then enhance your content and target it for specific platforms to create a more rich storytelling experience.

This approach, however, is not perfect.  Mulligan explained that since responsive design is very democratic, it means you can’t necessarily utilize everything an iOS device might be capable of doing. The site detects for touch screens, for example, but not other device capabilities.

“I don’t necessarily see this as being a disadvantage,” she said. “This is the browser experience we are offering people. It doesn’t preclude the fact that we might build iPad-specific experiences for people. We just haven’t gotten there yet.”

Creating a cross-platform experience

As an example of how responsive design does allow for enhanced content, Mulligan cited an investigative piece that ran on the site last fall. The Boston Globe received a big dump of audio files and transcripts from the court but wasn’t sure what to do with them. In the end, one of the designers built a player that allows you to read and listen to the transcript at the same time.

“You have to find a way to create a good experience on mobile, a good experience on tablet and a good experience on the desktop, so he came up with a pretty clever design solution for that,” she said.

Check out the article to see the result. Adjust your screen size to see how the site scales.

Here’s the full interview with Miranda Mulligan, edited by Efren Salinas:

Next Issue Media is a joint venture formed by five leading U.S.-based publishers - Condé Nast, Hearst, Meredith, News Corp., and Time Inc. The company was formed to develop, market and deliver interactive digital editions of the world's most popular magazines and newspapers optimized for digital devices.