Introducing the new responsive-designed BostonGlobe.com

Posted by Patty on 09/12/2011

The Boston Globe flipped the switch today on its accessible, progressive enhancement and responsive-design based subscription news site. As front-end development leads on the project (with Ethan Marcotte at our side), we're very honored to have been involved.

New Boston Globe responsive
site

Early this morning, the team at the Boston Globe flipped the switch on an incredibly ambitious new web site, and the 139-year-old Award-winning American newspaper gained a proper home of its own on the web. As Boston locals and long-time subscribers to the paper, we're quite proud of the Globe and what they've accomplished with this launch; as front-end development leads on the project, we're honored to have been involved, and thrilled with the quality of the site in action.

BostonGlobe.com – which should not be confused with its still-existing sister site, Boston.com – brings the Globe's premium journalism and reporting to the web in a way that is accessible and a pleasure to use on most any device - whether that's an old BlackBerry, an iPhone or iPad, or a desktop browser.

Better yet, they've managed to achieve this cross-device support with a single codebase that takes advantage of features available in the latest devices and browsers, such as touch gestures and offline browsing. For some background on the approach, check out the features page, and the tech overview video (which includes interviews with the Filament Group team discussing some of the more interesting challenges and solutions we encountered in implementing a large-scale mobile-first responsive design).

We plan to cover the technical challenges and solutions in depth on this blog in the near future. But in the meantime, we wanted to note some of the important discoveries we made about what makes a responsive design project of this magnitude possible:

  • You need a client willing to make a real commitment to embracing standards, expanding their expectations about brand and user experience, and most importantly, transforming their internal work processes to incorporate new principles and methodologies. Globe publisher Chris Mayer, Editor Marty Baron, and most especially Jeff Moriarty, Miranda Mulligan and the entire Boston Globe development team were beyond exemplary in this regard.
  • You need a visionary thinker who can articulate the vision of this new idea, and we had that in spades in our colleague Ethan Marcotte, the inventor and father/godfather/grandfather/chief prophet of responsive design. (If you have any interest at all in responsive design techniques and haven't read his book on the subject, you should.)
  • You need visual designers who understand and embrace the challenge, and our wishes were superceded time and again by our tireless & fearless leader Miranda Mulligan at the Globe, and the unbelievable team of Tito Bottitta, Mike Swartz and Jared Novack at Upstatement. That their visual design is gorgeous, elegant, and a true pleasure is self-evident. But we could not have arrived at such a solution were they not genuine, welcoming collaborators.
  • Particularly in these relatively uncharted waters, you need highly skilled front-end developers who understand standards, progressive enhancement techniques, cutting-edge coding best practices and responsive design principles. We are so continually impressed with our own Scott Jehl, Mat Marquis, and Maggie Wachs, who make a practice of inventing fantastic, magically innovative new code techniques from thin air on a daily basis—and can also sit down and explain them so the rest of the team can understand and build on them. They are amazing.
  • Finally, you need to be at the right place, at the right time, with all of the above at the ready. We've worked together for ten years now, and have been talking about and working toward a vision of a single code base that is accessible, and thoughtfully delivers an appropriate experience to the vast array of devices. This project has been the culmination of years of thinking and guessing and hoping, and we feel is validating many of our hopes for how the web can and should work.

To say we're thrilled with the result is a serious understatement. We're excited to see how the site evolves, and how the discussion about responsive design and the web does as well.

600

Comments

Nice job on the newly responsive Boston Globe site. I terrific upgrade indeed. Be well.

Comment by Bryan Dorsey on 09/12  at  05:11 PM

What an amazing piece of work guys. All the praise is deserved, keep up the great work

Comment by Sebastien Tran on 09/12  at  05:42 PM

I remember that pizza party the Style & Markup Society had at your place a few years ago. I knew you were on to great things then & continue to believe it now. Great job, everyone involved!

Comment by Dale Cruse on 09/13  at  09:42 AM

Congratulations. Indeed, this is kind of a new episode where all these important paradigms are elegantly actualized. I believe the bostonglobe.com will be kind of a landmark in our ever evolving hectic industry (BTW, how come you skipped the role=navigation on the not yet supported <nav> element?).

Comment by Neil Osman on 09/13  at  12:22 PM

Congratulations guys, the new site is just superb.

Comment by Glen on 09/18  at  06:22 PM

Congrats on a job well done! You have definitely raised the bar for online newspapers.

Comment by Johan Bakken on 09/20  at  07:51 AM

Truly stunning. You’ve raised the bar for all of us!! Congrats on the great work.

Comment by Alex on 09/22  at  09:33 PM

The site is impressively good and responsive! Congrats.

One question though, why can’t I zoom in on my android device?

Comment by Giorg on 09/25  at  04:33 AM