Responsive web-design has been a buzzword in the industry for a while, but no-one has really nailed a big project that truly adapts to all viewports – until now. The redesign of the online version of the Boston Globe launced a few weeks ago, and Ill spend some time taking you through the basics. For more background on responsive web design see Kevins post.

So whats the deal, then?

At first glance, The Boston Globe looks like a pretty standard online newspaper. It has a top with a logo and weather forecast, sections, and a grid layout with news articles. Nothing new there. The magic happens when you start resizing the browser. The change is subtle at first, images scaling and text adapting to screen size. But then, all of a sudden, the thing changes and a whole new layout appears. Continue dragging, and it happens again! The same site simply adaps to the size of the browser/screen you are viewing it from. No iphone, android and Ipad version, just the same page adapting nicely to the viewport. If your reading this on an ipad, go to www.bostonglobe.com and try flipping from vertical to horizontal mode for the same effect.

The site has three main screen layouts, and within these there are smaller variations:

Layout 1 – used from approximately 380 to 640 px viewport width

Layout 2 – used from approximately 640 – 810 px viewport width

Layout 3 – used from approximately 810 px viewport width and upwards

Unfortunately, it seems like the redesign was so expensive that the Boston Globe has decided to close the free version.  Unless you register, you can´t see the whole thing, but the few pages that are open are enough to see the principle of the responsive design.

Mobile first and Content first

It’s my belief that in order to embrace designing

native layouts for the web – whatever the device –

we need to shed the notion that we create layouts

from a canvas in. We need to flip it on its head, and

create layouts from the content out.

Mark Boulton, A Richer Canvas

An important principle in designing for responsive projects, is to think mobile first and to prioritize the content. The new version of the Boston Globe has embraced this principle. The “mobile layout” focuses on a list of the latest news articles, related content is pushed down. If you have more screen realestate, the experience is enhanced with larger images, quotes and so on to the right.

And why is it important

As most of you know: for the last three or four years, our jobs as designers have become more and more challenging. The good-old-days with 1024 standard resolution are over. Now, our designs are viewed on a multitude of different screens and browsers, and we will risk going completely crazy if we were to make a version for all of these odd devices. Making one universal version of the same service seems like the only way to go.

The way forward

Clearly, it will demand more effort to make a responsive website, compared to a traditional fixed-with one. And as a consequence, it will cost our clients more. However, for the last couple of years, all the clients I have met are talking about the importance of making their projects available for mobile users. Our solution has been to push a fixed-width mobile site as a separate project.  If the alternative is to make two sites, adapting one to different screens is probably not that much more time-demanding. It will certainly be smarter.