Responsive design is no longer something confined to the portfolio websites of the designers and developers who pioneered the idea. Using CSS media queries to adapt a website’s layout to varying screen sizes is fast becoming a standard part of web development.
Today’s case in point is the newly launched BostonGlobe.com, which uses the adaptive layouts, font resizing and image scaling of responsive design to deliver an elegant, readable website no matter what screen size you’re using.
The Globe’s new website is attracting more attention for the fact that it will soon be behind a paywall (it’s free until the end of September), but for web developers the much bigger news is that one of the larger news sites on the web is embracing responsive design.
It’s not an iOS app; it’s not in the Chrome Web Store. No, the new BostonGlobe.com is just a good old fashioned website, but one that looks good no matter what you’re viewing it on thanks to its use of responsive design. Depending on the size of your screen — whether you happen to be browsing from a phone, a tablet or a desktop monitor — BostonGlobe.com will adjust its content to fit the pixels available. It will reflow its text columns according to screen size and also scale its masthead logo, the section menus, images, videos and even the weather graphic in the masthead.
Of course it makes sense that the BostonGlobe.com is a flagship example of what’s possible with responsive design given that developer Ethan Marcotte, who coined the term responsive design, was one of the architects behind the new Globe website. If you’d like to know a bit more about how the site was created, including some of the challenges any responsive site faces, head over to Marcotte’s blog and read his write up on the new site.
Also part of the team that helped build the site are the design firm Upstatement and the Filament Group, which helped pioneer the concept of “responsive” or “adaptive” images. That is, serving smaller images to mobile browsers and then using JavaScript to serve larger images to desktop browsers. Be sure to check out our earlier coverage of adaptive images.
While the Globe may have had the cash and cachet to hire big names in the field, that doesn’t mean you need an extensive team to create a responsive website. We won’t lie to you, building a good responsive website is more difficult than just slapping up a fixed width design. But, provided it fits with the goals of your site, it’s much easier than many of the alternatives, which often require building and maintaining two entirely separate websites.
If you’d like to know more about how the Globe team built the site there’s a video on the Globe’s other website, Boston.com, which gives a behind the scenes look at how the responsive design works. At around 1:22 you’ll see a shot of the design being tested on multiple devices simultaneously. The tool that makes that possible is Shim, a node.js app that enables simultaneous, synced web surfing across devices and browsers. You can check it out over at GitHub.
