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.