Boston Globe Launches Responsive Design

This week the Boston Globe launched a new web site using what has become known as Responsive Design. Responsive Design was first proposed by Ethan Marcotte, one of the consultants on the Globe project, in the web magazine A List Apart. This design approach focuses on delivering the same content and basic design across multiple devices from desktops to tablets to mobile phones. Technically this is achieved by using fluid grids that adapt to the size of the screen, flexible images and media, and part of the CSS3 specification called Media Queries, which allow web designers and developers to specify certain layout rules based on certain conditions.

Responsive Design has been receiving a great deal of attention since it was first proposed by Ethan, so much so that he expanded his original essay this fall. Despite the increasing numbers of projects using these techniques, the applicability of such an approach to a large scale site has remained largely theoretical. That changed this week. The new site by the Boston Globe shows not only that Responsive Design can work for large sites, but that it can create a greatly improved user experience that is focused on the content and elegantly adapts to whatever device is being used to access that content. The Globe has posted a short video that shows the new site in action and provides some great context for their decision making process. The Filament Group and Upstatement, two partners for the project, have also posted an overview of their experiences with Responsive Design. For other examples using these methods, check out mediaqueri.es. The images below, taken from mediaqueri.es, provide snapshots of how the Boston Globe might look at different screen resolutions.