Miranda Mulligan

Design Editor, Boston.com

Q: BostonGlobe.com recently launched a website redesign that uses the adaptive layouts, font resizing and image scaling of responsive design to deliver a readable website no matter what screen size you’re using. What are the main challenges to maintaining a responsive news site?

First a little background because the new site is not a redesign. 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.

Lets take a moment to define the difference between a responsive design versus an adaptive one since those two terms seem to be used interchangeably, but actually mean something different. Very technical language coming, sorry, but an important point is to be made here: A responsive design has infinite breakpoints and infinite flexibility while an adaptive one is only as flexible as you have had the forethought to define in code.

Responsive grid vs. Adaptive grid
Often, when we try to create site designs tailored to specific devices (desktops, tablets, phones) the designs become disconnected. It is difficult to maintain consistency when the underlying code for each is fragmented over several different code bases.

Responsive design allows you to have one code base and you can tailor to each browser width and experience using a flexible grid, proportional/flexible images and media queries from the CSS3 specification.

An adaptive grid is similar to responsive in that has one code base and, using media queries, you can tailor layouts for defined browser widths. However it does not have a flexible grid so the layout snaps from one breakpoint to another.

See the flexible grid is the defining characteristic of a responsive design. Having the content proportionally resize within each breakpoint means you now have an infinite number of breakpoints for those browser widths you can not foresee when first defining your site. In other words, using responsive techniques means we can craft sites that are not only more flexible, but that can adapt to the media that renders them… infinitely. An adaptive grid is fantastic design approach, just not as future-friendly as the responsive grid.

Challenges
Big picture, the single biggest challenge is the culture shift for the entire digital business. From the developers, to the designers, to the editors and content creators, to the business-moneymaking side … everyone has to change thinking and process. And, well, change is hard. Here are some high-level bullet points.

From a site management perspective, being responsible when serving assets (the flexible images/media) requires wrestling your content management system and servers so that you can ensure you are not serving a huge file to someone one a device that might have slower internet connectivity. This challenge is not insurmountable, however, this does mean that this design (front-end development) approach relies on some buy in from the developers handling the back-end and the people running the servers and operations to find a solution the business can support.

Most modern news websites rely relatively 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 nice on a flexible grid unless it has been specifically written to do so. Flash movies/games will not play on iOS devices. There are variety of techniques around handling and crafting experiences with this type of content, however they all involve some significant hands-on haranguing.

Designing and building interactive information graphics and practicing dataviz story-telling relies on a significant change in the design and development process. Traditionally, most newsrooms have relied heavily on Flash to execute our interactive stories and dataviz. Since Apple’s iOS and Flash do not play nicely, finding another way to tell these stories is paramount. Also, designing interactives and data visualizations for mobile has, by in large, not previously been something we have tried to solve. Now, the process relies heavily on rapidly prototyping and designing within the browser. It works best when the experience has been designed and coded mobile-first, then designing and enhancing for wider browses widths. This process 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 becomes 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 pretty freeing.

Q: Are there any other benefits to having a responsive site?

No one knows what the landscape will look like even just two years down the road, so it would be foolish to say that we can create anything that is truly future proof. However, responsive web design gets us pretty close. With one code base, it is significantly more manageable to define a new layout for a new device than to create a whole new site for that device. And in the interim time before you get around to make those detailed code changes for the new layout, responsive’s infinite breakpoints ensure the user is getting a pretty decent experience.

Q: What advice can you offer for aspiring digital journalists?

1. Start learning more about the web now. Don’t wait. We are all busy, make the time. It is absolutely paramount that journalists – especially the digitally focused ones – understand how browsers read and render our content.

2. Start learning how to make software. It is not about the coding language you can write or learning to write, or any specific software (ack). It is about learning how to teach yourself to grow and change as the web will consistently grow and change. Learning to program not only provides a practical skill but it also teaches you to be better problem-solver. You will learn more precise and nuanced thought processes. The depth of your understanding of information and data will grow. For the visual journalists, writing code is designing information. Both news designers and web designers are burdened with the same things: organizing information so that it is discoverable as well as rationally arranged, illustrating ideas that deepen the understanding of a story, and working within the constraints of the medium.

3. Keep an open mind. No one knows what the story-telling landscape will look like in two years, let alone a decade from now. Find something you are interested in right now, learn it and get good at it. Then learn something new. Get good at that. The learn something new … get the picture? Its fun. You will never get bored and you will always be employable.

 

This entry was posted on Sunday, March 11th, 2012 at 2:50 pm and is filed under uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.