Building a responsive site in less than 20 minutes

An ever-so-sleek responsive portfolio site I designed for a friend in less than 20 minutes using Skeleton as a foundation.

With all this talk lately of the new era of responsive design, I realized today that I’ve yet to create anything that’s actually responsive. Given that I’ve only pondered using it in the implementation of complex, database-driven news sites, the task of tweaking every level of CSS to fit perfectly into a responsive grid system has so far seemed too daunting to tackle. Continue reading

What makes BostonGlobe.com “the world’s best designed website”

With the Pulitzer Price announcements coming up later this afternoon, you’d think I’d be writing about whose up for the “Best Deadline Reporting” or “Best Public Service Journalism” prizes. But instead I want to talk about a different media award doled out during the past week: BostonGlobe.com’s designation as the “world’s best designed website” by the Society for News Design. Put simply, I can’t say I disagree.

Yet before I divulge in my effusive praise of the folks in Boston, let me point out that I’m still somewhat skeptical of the business-logic behind The Globe’s decision to launch its paywall-only site last fall alongside its primary news portal, Boston.com. From a revenue standpoint, I can’t see the full-paywall site, BostonGlobe.com, bringing in nearly enough subscription income to compensate for the traffic and ad dollars it will, and to some degree already has, leeched from Boston.com (at last count, in February, BostonGlobe.com had only recruited about 16,000 paid digital subscribers, many of whom had taken advantage of the site’s introductory offer of 99 cents for the first four weeks but may not stick it out past the trial period). It might’ve been wiser for the paper to start out with a metered paywall to warm users to the idea of paying for content before erecting a full-blown ten-foot-tall paywall around its most valuable content under a new, separate domain name. But then again, who really knows – maybe it’s a step in the right direction longterm? I’m not the one having to make the tough calls, so I’m in no position to judge.

At any rate, the segregation of the two sites has given the paper’s parent company the freedom to make BostonGlobe.com a rich, immersive and interactive user experience that few other news organizations can match. Why, you ask? Because of a little trend gaining steam in the development world called “responsive design.” See, BostonGlobe.com isn’t only a standout site because of its sophisticated use of white space, its wholehearted embrace of web fonts and its visual-first approach to story art, but also because of its cross-platform capabilities. No matter what device you view BostonGlobe.com on – desktop, tablet or mobile – the site retains its same slick look and feel. The site’s adaptive technology allows it to detect the screen size of the user, then adjust its layout to fit the exact resolution at hand. On desktops, that means content stretches to fill the entire browser window, and the grid restructures itself appropriately when you decrease or increase the size of the window. This eliminates the need for time-honored design standards like the 960 grid-system, which is based upon the Desktop-centric idea that all users have at least a 960px resolution. Now, the grid can be as big, or as small, as the user wants it to be.

The site’s successful display of a dynamic range of real-time content on any-sized device also essentially eliminates the need for the “app-based” environment that’s been the staple of the iOS5 and Android operating systems in recent years. To test it out, I gave the site a whirl on my iPad, and was pleased to see the front page neatly rearrange itself to fit the new orientation, just as any of the best platform-specific news apps out there do, including The New Yorker and Wired apps for iPad. But just because BostonGlobe.com doesn’t need a native app to display its content beautifully on tablet and mobile devices doesn’t mean that it won’t be missing out on the growing app-centric marketplace for publishers. As Apple and Google continue to centralize digital consumption patterns into the app-based model, BostonGlobe.com may be a little too ambitious in thinking it doesn’t need to play nice with the big-boy tech companies to reach its audience. On the other hand, however, it could prove to be a brilliant move for the paper, setting an example for other publishers and app-based companies in general who want to break free from the often constricting, not to mention pricey, cost of participating in the app marketplace.

For its design alone, BostonGlobe.com deserves any number of awards. Its bold, minimalist interface allows content to shine above all else, free from clutter and distraction. And with high-res horizontal photos, block-quotes, inline video and stylized headlines that grab your attention without hurting your eyes, that content stands out even more. What’s more, the site has the functionality to back up its aesthetics. Its “Save” feature allows users to bookmark articles for reading offline on any device, which, even for sites without responsive design, is a brilliant feature for a news site to implement. Moreover, its “Story Flow” panel at the bottom of each article allows users to click seamlessly through to stories on similar subjects, just as readers would in an old-fashioned newspaper with physical sections. Which leaves me with one nagging question: Is BostonGlobe.com too imitative of physical newspapers to attain success in today’s short attention-span digital audience? Is it too skewmorphic to succeed in an SEO-driven, hyperlinked news economy?

I guess we’ll have to wait and see.