Behind the World’s Best designed: BostonGlobe.com

In 2011, the launch of BostonGlobe.com quickly redefined the standard for what a news organization’s website could be. It created a responsive-viewing experience that automatically adjusts to the constraints of a user’s screen size or device. For its effort, SND33 gave it the distinction of being named World’s Best designed website.

The Globe’s Digital Design Director, Miranda Mulligan, took a few minutes to chat about building the site and how it has changed digital storytelling for the publication.

How did your staff react to the news it was named World’s Best designed news site?

They were elated, of course! So honored! In fact, the day it was announced happened to be one of the managing editors’ birthday and he sent me a note saying: “And you helped give me the best present … the best-designed website in the world! Thank you.” I thought that was so sweet.

Walk me through the design process. Was there ever any doubt responsive was the way to go? Did you run into any unexpected challenges along the way?

First, a little background. In the mid-’90s, rather than building its own separate newspaper website, the Boston Globe decided to focus on building Boston.com, a site that featured stories from the Globe but also lots more. However, over the years, there was a growing sentiment that the Boston Globe’s print stories were getting lost on Boston.com. The company did some research and found that there was a significant audience for specifically that content and decided to make a website for those users.

Building a website from scratch in 2011 meant we had a unique opportunity to use modern technology without the burden of a legacy 1995 design. We looked for a design and development approach that could get the BostonGlobe.com content where users are, no matter their device. Responsive web design is a technique that helped us do that… with infinite possibility.

Its been my experience that just about everyone in digital media realizes that they should know something about responsive design, but they are not exactly sure what, or where, how, who … A lot gets confused, usually starting with not really understanding what it is and how to pick it out of a line up.

Challenges

  • The single biggest challenge is the necessary culture shift for the entire digital business. From the developers, to the designers, to the editors and content creators, to the business-money-making side, everyone has to change their thinking and process. And well, change is hard. Here are some of the challenges that profoundly impact editorial:
  • Designing and building interactive information graphics relies on a significant change in the design and development process. Traditionally, most newsrooms have relied heavily on Flash to execute interactive stories and data visualizations. Since Apple’s iOS and Flash do not play together nicely, finding another way to tell these stories is paramount. Also, designing interactives and data visualizations for mobile has, by and large, been an afterthought. Now, designing for mobile must be the first thought.Also, this design process relies heavily on rapidly prototyping and creating the visual design within the browser. The process is smoothest when the experience has been designed and coded using mobile-first techniques, and then designing and enhancing for wider, more fully featured browsers. It seems awkward at first, but gets more and more confortable with practice.
  • One significant upside for content producers and site editors: Character counts in headlines become less of an issue because there is no way to know the exact (to the pixel) location it will be on the page for the user. Letting go of pixel-perfection is quite freeing.
  • Most modern news websites rely heavily on third-party relationships: i.e. advertising networks, a video management and serving relationship, events and calendaring solutions, games, obits, etc. However, the code served from these vendors will most likely not play nicely on a flexible grid unless it has been specifically written to do so.
  • Flash movies/games will not play on iOS devices. There are a variety of techniques around handling and crafting experiences with this type of content. However they all involve some significant hands-on haranguing.

Along the way, what resources did your team look to for advice, best practices and inspiration?

Well, when you work with the guy who, quite literally, wrote the book on the technique and combine him with some über-smart people on the Globe’s design/development team and the minds at Filament Group and Upstatement, you basically end up with an all-star group. Also, Sam Berlow (Font Bureau) was an incredible resource for me as we figured out our type palette for the new site. Fonts In Use published a fun article on our use of webfonts, if anyone’s interested.

How has the responsive site changed what your team does on a daily basis or how it approaches new projects?

My team produces work for The Boston Globe’s entire digital portfolio: Boston.com, BostonGlobe.com and our mobile offerings. BostonGlobe.com means that we have had to start over in creating new base files and code snippets. We have had to change how we plan our time. The main difference is how we think about our presentations … the biggest advantage to the mobile web is accessibility, which completely changes the way you might think about presenting data.

How did users react to the site?

Users don’t care about a super-geeky web design technique. They only care about “Does it work?” on whichever device they happen to use to reach our content. They have been pretty vocal about liking the article reading experience.

If you could start the building process over, what would you have done different?

When we were first figuring out the visual arrangement (design) of the site, we started with desktop breakpoints and then worked our way down to the smallest mobile point. About half way, we learned that it is actually easier to solve design challenges if you solve the interface at mobile first. We definitely learned that lesson the hard way.

What advice would you give other design teams working toward building a responsive site of their own?

Start small. Most news organizations are not presented with the opportunity to design a brand new website, without any of the legacy concerns. All code will have to be started from scratch so I suggest starting small by choosing a side project that can quarantine the code and the user-experience (like what the TribApps team is doing at The Chicago Tribune and/or the iterative redesign approach from the ProPublica nerds).

What does it mean to you having been part of the team that has literally set the bar for digital news design?

I feel blessed. I have learned so much in the past year and a half. I work with the greatest people! The newsroom room has grown a lot. 2011 was a big year of change for The Globe. We changed nearly everything digital, from a new content management system down to a new email client.

Some recent work