It’s a fact: responsive design is on the radar of some of the largest news organizations. Executives and editors of these orgs listed below are realizing that clean looking and easily accessible content and graphics across any variety of devices is worth the trouble since there is less need to develop native apps for different devices. News orgs who are using this technology hope that once users realize they will get a phenomenal digital experience each time, they’ll keep coming back. For news orgs with paywalls, this could translate into a new (non-print loving) subscriber base. For the BBG, it could translate into increased user engagement and more bang for the American taxpayer buck.
The Boston Globe was the first major metropolitan newspaper to embrace responsive design. Take a look and you’ll see why they continue to be one of the leaders when it comes to integrating news content with responsive design. First of all, you’ll notice it’s a paywall site (limited advertising; all news content) as opposed to it’s free parallel companion site, Boston.com, and second of all, its design is as clean as it comes (minimal clutter). Turns out that Ethan Marcotte (pioneer of responsive design) consulted with the Globe on the BostonGlobe.com project. As described in a review on Emedia Vitals, “Our philosophy with BostonGlobe.com is that less is more, where we can just let the journalism do its thing,” said Jeff Moriarty, the Boston Globe’s Vice President of Digital Products. In addition, the HTML5/CSS3 code combo allows web developers to use progressive enhancement techniques. This means content can be enhanced or targeted it for specific platforms to create a more rich storytelling experience. For example, responsive design can sense if a user has a touch screen (content could include a carousel of picture content), but it wouldn’t necessarily be able to use iOS- or Android-specific device capabilities.
Cool Content Example: “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.” [Source: Emedia Vitals]
How to Approach a Responsive Design: In a pretty entertaining blog post, the designers break down the creative challenges and the technological challenges to make the BostonGlobe.com redesign happen. “The process was a total joy, and we’ve adopted it for the projects we’ve worked on since. The key is understanding that the design conversation is a long one, it may start with static comps but it continues through development. The more you can fuse the two (in your process and in your personnel) the more successful you’ll be.”
Some Responsive Infographics: Boston Globe Infographics Department [Tumblr, Javier Zarracina, Boston Globe’s Graphics Director]
Video Interview with Miranda Mulligan (former Design Director for Boston Globe, currently Executive Director of the Knight Lab):
[Source: Next Issue Media, YouTube]
[Read more: “BostonGlobe.com: The Future of Web Design?” [Emedia Vitals]]
[Read more: “BostonGlobe.com: Using responsive design to tell interactive stories” [Emedia Vitals]]
[Read more: “The Boston Globe Embraces Responsive Web Design” [WebMonkey]]
On October 22, 2012, Time.com became “the first global news site to roll out a fully responsive redesign optimized for mobile and tablet browsing.” In particular, the new design includes a fresh new home page, better presentation of TIME’s award winning photography, more emphasis on voices and personalities, improved search capabilities and a robust new commenting system, LiveFyre, that pulls relevant conversations from Twitter and Facebook.
Cool Content Example: What’s really cool about Time’s redesign is it was also applied to their archives, meaning subscribers can view content all the way back to 1923 from their desktop, tablet, or smartphone.
How to Approach Responsive Design: “…Don’t underestimate the amount of time it takes to build a responsive site. It took us about nine months start to finish and a critical part of that was quality assurance. Not just using emulators and simulators, but you have to make that small investment to have multiple versions of the devices on hand so the people doing the quality assurance and user acceptance testing can test for multiple scenarios. You have to make sure you nail that part of the process,” said Craig Ettinger, general manager for Time.com in an interview with the Association of Magazine Media.
BBC News is in the process of moving to a responsive design to make their content easily accessible to their increasing number of mobile users, all while still maintaining a full content desktop version. They also keep a blog on responsive design.
Cool Content Example: Phil Buckley, Executive Product Manager for BBC Future Media News World Service, and his team recently released a new mobile site for BBC Indonesia in Responsive Design. “As far as I can find this is the world’s first responsive website in an Asian language and one of the very first non-English responsive sites,” says Buckley.
How to Approach Responsive Design: .net offers this really interesting article discussing BBC’s responsive challenges thanks to an interview with David Blooman, Test Engineer at BBC Future Media. And, BBC produced this talk that touches on how BBC rose to the occasion. The presentation includes: “How we support as many devices as possible using responsive design”, “How we’re using a sprinkle of Symfony2 components in our Zend world”, “How we scale to serve BBC News to the masses”, “What tools we use to help us along the way.”
[Video: “Scale and Adapt: A Story of How We Built Responsive BBC News” [SpeakerDeck]]
[More how-to: BBC TV Channel Homepages: Responsive Design [Graphics]]
[Read more: BBC News on Mobile: Responsive Design] [BBC Internet Blog]]
Last year, the Chicago Tribune converted its local set of blogs, Chicago Now, to a responsive design. In January, the Chicago Tribune’s Spanish-language site, vivelohoy.com, was also converted into a responsive design.
Cool Content Example: According to the Chicagonow.com staff blog, it’s a heck of a lot easier to find what you’re looking for (compared to boston.com). I gotta agree.
How to Approach Responsive Design: “Adee said there are four reasons the Tribune is betting on responsive design: to go where the users are as quickly as possible; to save money and time on development and support of native apps; to provide advertisers with new ways to connect with mobile and tablet users; and to provide users with a consistent experience across all devices. He said, however, that chicagotribune.com’s switch to responsive design will be more challenging for revenue reasons as well as integrations with third parties.”
The mobile beta trial was released in November 26, 2012 and aims to offer readers faster download speeds, an easier reading experience, top-stories access from any page, auto-updating of live blogs, near real-time football scores and stats, swipe-through photo galleries, playable videos, and better quality photos. It currently stretches to fit the browser but isn’t using media queries to adjust the design for different sizes or devices.
Cool Content Example: IMHO, the auto-updating of live blogs and real-time scores is a great feature, as is the ease of flipping through interesting high-resolution photos and watching the latest videos from my smart phone.
How to Approach Responsive Design: The Guardian’s Web Developer Matt Andrews outlines in this article how the publication aims to make use of responsive design, following in the footsteps of the Boston Globe and BBC News. Created by TIME.com design director Davina Anthony with input from the magazine’s design staff, the new look showcases the depth and breadth of TIME’s content, with over 100 new articles, blog posts and photos produced each day.
Have any thoughts about responsive design or about BBG’s efforts to move in the responsive direction? Leave us a comment below and we’ll be sure to respond in kind.
- – - – -
(Thank you to Brian Williamson, William Sullivan, and Rob Bole for their contributions to this post.)
(The foregoing commentary does not constitute endorsement by the US Government, the Broadcasting Board of Governors, VOA, MBN, OCB, RFA, or RFE/RL of the information products or services discussed.)