BostonGlobe.com: The future of Web design?

Advertisement

The new BostonGlobe.com website is notable not just for its gated subscription model, but also for something more aesthetic: its roots in responsive design.

The responsive design concept, pioneered by Ethan Marcotte (who consulted with the Globe on the project), enables site pages – layouts, fonts and images – to adjust automatically to different screen sizes. A combination of HTML5 and CSS3 design technologies, responsive design – and the new BostonGlobe.com in particular – could serve as a model for publishers looking to easily extend their digital publishing efforts across the rapidly expanding tablet and smartphone universe. A site that adapts to multiple screen sizes will lessen the need to create native apps for iOS, Android and other different devices.

“Ultimately we expect to have more people accessing our site via tablets and other mobile devices than from the desktop,” Jeff Moriarty, the Boston Globe’s vice president of digital products, said in a phone interview following Monday’s launch of BostonGlobe.com. “We really wanted this design to set us up for that mobile future with a single site that’s built to adapt to the user.”

The site has six different breakpoints based on screen size and adjusts column structure, navigation, search and other features accordingly. The responsive design, combined with a Web design technique called progressive enhancement, enables accessibility to a broad range of device-specific functionality, such as Flash support or touch-screen navigation.

One noticeable difference on BostonGlobe.com compared with Boston.com, the company’s existing portal site, is the lack of clutter.

Moriarty said the cleaner design was driven in part to make the site more tablet- and smartphone-friendly. But he acknowledged that focus groups and other user testing underscored the desire for a less cluttered experience. “People like Boston.com because they have a ton of things to choose from,” he said. “But not everyone wants 200 links. Our philosophy with BostonGlobe.com is that less is more, where we can just let the journalism do its thing.”

  

A complex implementation

While the design may seem simple, the project was anything but. The Globe’s internal design and development team worked with two Boston-based design agencies – the Filament Group and Upstatement – on the site.  

“This is probably the biggest implementation of responsive design to date, and the biggest, most complex project I’ve worked on in 17 years with the company,” Moriarty said. Some of the technology had to be built from scratch in HTML5 – the Globe crossword puzzle, for instance, as well as the Instapaper-like MySaved feature for bookmarking articles that can be read online or offline and accessed from any device.

But Moriarty believes they’re just getting started with a site that will evolve significantly as a cross-platform destination.

“What we have now is a variation on the desktop theme, but it’s just the beginning for us,” said Moriarty. He foresees future experimentation with specialized functionality or even content based on the type of device that is accessing the site. He also won’t rule out the possibility of future mobile apps, even though responsive design is possibly the biggest argument against native apps.

“If we do an app, it will be for something we don’t offer on the site,” he said.

Access to BostonGlobe.com is free (with registration) for the first month, thanks to a sponsorship. Beginning Oct. 1, subscriptions will cost $3.99 a week. Access will be free for Globe print subscribers. Visitors linking from search engines and social media sites will get the first click free, but the rest of the site content will be behind the paywall. Boston.com will remain as a free site featuring breaking news, sports, blogs and other ad-supported content (such as local deals and classifieds) , but with limited Globe print content.

The technology behind the new BostonGlobe.com from jeff moriarty on Vimeo.

Sponsored Resources


Join the discussion

Log In or leave an anonymous comment.