
Responsive web design is close to our hearts at Sparksheet. Since last summer our own website has been 100% responsive, meaning that it adapts to whatever screen or device you consume it on.
The beauty of responsive design is that publishers don’t have to design from scratch every time a new gadget or operating system comes out, saving time and money. It also means that content consumers are treated to the optimal experience, whether they’re on the train or in their living rooms.
The Boston Globe introduced their responsively-designed website last fall. The site contrasts sharply with the old Boston.com site, which used to serve as the Globe’s primary web destination. Earlier this month the Society for News Design named BostonGlobe.com the “World’s Best Designed” news website:
The Globe’s responsive design is remarkable and deserves to be noted as one of the key moments in media design history, akin to USA Today’s embrace of color and graphics. Its impact will affect a generation of digital journalists and is an example of what’s possible when smart design and rich content is balanced with a focus on being standards compliant and future-friendly across all platforms.
In an in-depth Q&A with Miranda Mulligan, The Boston Globe’s Digital Design Director, Sparksheet asked Mulligan how the site’s responsive framework affected the editorial and design process at the paper. Here’s what she told us:
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 and practising data visualization storytelling 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 conformable 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.


Where purpose is not known abuse is evident , and all designs stems up from this basic fact , love the design of sparksheet , its interactive and user engaging
[...] on The Sparkbeat: Miranda Mulligan explains how BostonGlobe.com’s cutting-edge responsive design affects The [...]
The Boston Globe on responsive design http://t.co/mSOKUqGa
Leading by Design http://t.co/HkId4MV0 Our Q&A with @BostonGlobe's Digital Design Director @mirandamulligan
#sparksheet Responsive Design at The Boston Globe http://t.co/zTYHgLBi
RT @sparksheet: Leading by Design http://t.co/fLIzCMfP Our Q&A with @BostonGlobe's Digital Design Director @mirandamulligan
Responsive Design at The Boston Globe http://t.co/CrlVVdZW
Leading by Design http://t.co/k4A8qtdO Our Q&A with @BostonGlobe's Digital Design Director @mirandamulligan
Leading by Design http://t.co/k4A8qtdO Our Q&A with @BostonGlobe's Digital Design Director @mirandamulligan
Leading by Design http://t.co/k4A8qtdO Our Q&A with @BostonGlobe's Digital Design Director @mirandamulligan
RT @sparksheet: Responsive Design at The Boston Globe http://t.co/VaATpbrA
Responsive Design at The Boston Globe http://t.co/m6nyCPJC Responsive design is quickly becoming THE way to go.
Responsive Design at The Boston Globe http://t.co/m6nyCPJC Responsive design is quickly becoming THE way to go.
Responsive Design at The Boston Globe http://t.co/m6nyCPJC Responsive design is quickly becoming THE way to go.
Responsive Design at The Boston Globe http://t.co/m6nyCPJC Responsive design is quickly becoming THE way to go.
RT @portentint: Responsive Design at The Boston Globe http://t.co/KcLrdaZt Responsive design is quickly becoming THE way to go.
RT @portentint: Responsive Design at The Boston Globe http://t.co/dgBhRyfp Responsive design is quickly becoming THE way to go.
The Boston Globe design in 2 parts: Leading by Design: Q&A Miranda Mulligan http://t.co/PJfzBX1p Responsive Design http://t.co/GDbSzEqU
Adapt your site to their screens- via @portentint: Responsive Design at The Boston Globe case study http://t.co/f5hFfJac
Responsive Design at The Boston Globe http://t.co/m6nyCPJC Responsive design is quickly becoming THE way to go.
Responsive Design at The Boston Globe http://t.co/m6nyCPJC Responsive design is quickly becoming THE way to go.
Responsive Design at Boston Globe – A Key Moment in Media Design History #RWD (@Sparksheet) – http://t.co/gSNmzSK8
Kuinka responsiivinen design vaikuttaa palkitun BostonGloben toimitukselliseen työhön sekä suunnitteluun http://t.co/T4F7CIun
#Design responsively: http://t.co/mJSpq9mC
Responsive Design at The Boston Globe – http://t.co/98o5Y9On
Responsive Design at The Boston Globe #Web #design http://t.co/Y9sDAfCT via @Sparksheet
Responsive Design at The Boston Globe – http://t.co/qnefV2eK
Responsive Design at The Boston Globe – http://t.co/89rJm2Re