What is the newly launched BostonGlobe.com? Depending on what type of device you use to view it, you might guess it’s a regular desktop website, a tablet Web app, or a mobile phone site.
All of those answers are correct. The site, which launched Monday morning, was built from scratch using cutting-edge techniques in “responsive design.” Basically, that means the design of the site adjusts to the size and capabilities of whatever device it is viewed on.
-
- The layout of BostonGlobe.com varies based on the size of the browser window, and the site offers different functionality depending on the device it’s viewed on.
Many news organizations have built separate, phone-friendly sites or tablet-optimized Web apps to complement their main websites. Responsive design allows BostonGlobe.com to be all of those things at once.
“What we’re doing is detecting the user’s screen size when they enter the site and giving them the right layout,” said Jeff Moriarty, the Globe’s vice president of digital products. “It responds on a real-time basis, so if you flip your iPad from vertical to landscape, it will change.”
To try it out yourself, open the site in your desktop browser and watch the layout adjust as you gradually resize the window.
There are six possible layouts depending on the device’s screen size: a simple one-column page for phones, more columns and complexity for 5- to 7-inch tablets and 10-inch iPads (adjusting for horizontal or vertical orientation), and a large version for laptop or desktop browsers.
-
- The layout of BostonGlobe.com changes when an iPad user rotates the device from vertical to horizontal view.
The site also detects the capabilities of the device, so a smartphone or tablet user can swipe her way through a photo gallery or a featured content carousel.
Images are available in multiple sizes, and videos are encoded in different sizes and formats so they can be loaded on any device.
The site also uses HTML5 features such as locally stored data, which powers an article-saving feature that enables you to read a story later without Internet access.
“We really wanted to introduce app-like features and focus on readability,” Moriarty said. “This is a Web app in a lot of ways. We are not launching a native app at the same time — we think this accomplishes a lot of the same things we would normally do with a native app.”
This approach also has advantages for future development, Moriarty said. Because the one site serves all types of devices, new features can be developed and rolled out more quickly. Developers don’t have to rebuild the same things for multiple websites and apps.
The Globe developed the site and responsive design technology with Boston-based design and development firms Filament Group and Upstatement.
The idea of offering multiple, tailored page designs is certainly timely as more types and sizes of tablets and smartphones come on the market. Other news organizations will want to emulate this as they develop new products.
