Redesigned Boston Globe with design based on browser width (Responsive Design)

In a major step in the evolution of website design, the Boston Globe relaunched their site today using a Responsive Design approach.  For a consistent experience across mobile and desktop browsers, they redesigned the site to add and remove columns to the layout based on the width of your browser window.

3 Column View

2 Column View

1 Column View

This marks the first major, high-traffic, content-heavy website to adopt a responsive design. The lead consultant behind the project is none other than Ethan Marcotte, the designer who wrote the book on responsive design. Much as ESPN changed the way we worked by being one of the first to launch a fully CSS driven site a decade ago, the Boston Globe’s redesign has the potential to completely alter the way we approach web design.

Marcotte explains why the shift to Responsive Design is so signficant:

The landscape is shifting, perhaps more quickly than we might like. Mobile browsing is expected to outpace desktop-based access within three to five years. Two of the three dominant video game consoles have web browsers (and one of them is quite excellent). We’re designing for mice and keyboards, for T9 keypads, for handheld game controllers, for touch interfaces. In short, we’re faced with a greater number of devices, input modes, and browsers than ever before.

…

We can quarantine the mobile experience on separate subdomains, spaces distinct and separate from “the non-iPhone website.” But what’s next? An iPad website? An N90 website? Can we really continue to commit to supporting each new user agent with its own bespoke experience? At some point, this starts to feel like a zero sum game. But how can we—and our designs—adapt?

One exciting solution: Responsive Design. Kudos  to Marcotte and his team for their innovative work helping the web to evolve towards a better, more unified experience across devices and browsers.