Finding the Look & Feel of BostonGlobe.com

By Tito Bottitta January 30, 2012

Since the new Boston Globe website launched, I keep catching people calling it a redesign. It’s an easy mistake to make. I do it, too. Because seriously, who would’ve thought that in two-thousand and eleven, we’d be designing — for the very first time — a brand new website for a century-old newspaper?

As it turns out, nothing could have been more liberating. In a redesign, you start with so many puzzle pieces already locked into place by fears and requirements (Oh we can’t change that, people love it!). The new, subscription-based BostonGlobe.com was built from the ground up. So we started with just this: Bring the soul of the newspaper onto the web.

That proposition was at the heart of the project, leading to a series of novel design decisions and an entirely new process (Which you can read more about in an earlier blog post).

It was a dream project for us, a team of former news designers who have been making websites for years. We were honored to be lead designers and work with such amazing partners in Filament Group, Ethan Marcotte, Mat Marquis, and the talented team from the Globe, led by Miranda Mulligan.

The Classic & The Cutting Edge

So how do you do it? How do you translate an analog newspaper experience into a good web experience?

Well, we knew what we didn’t want to do. There’s been a lot of fanfare about Apple’s recommendation to go all skeuomorphic — you know, making the calendar application look like a leather-bound desk calendar. That’s silly. The newspaper experience isn’t about making it look you’re turning an actual page or forcing people to read text across multiple columns.

Apple's new iCal design looks like, well, a desk calendar

Omigod — I’m reading a digital book that looks just like a real book!

Some techniques that work wonderfully in print utterly fail on the web, which is its own unique medium with its own strengths. Don’t shackle it to the limitations of a linear reading experience. It’s not a uniform, broadsheet-sized paper that everyone experiences the same way. It’s a scrolling medium where multiple devices can act as entry points.

The key was to recognize the strengths of the web and weave them with the most important elements of the newspaper experience. This led us to a design that tries to mix the classic with the cutting-edge.

The site should feel like The Boston Globe. It has the same distinctive typography, the feeling of immersion, and the simple, clear hierarchy. It’s also responsive, so it works wherever people access the web: On a smart phone, a dumb phone, a tablet, a laptop, a PC, or something that hasn’t been invented yet. (See our previous blog post for more explanation of how The Globe decided to go responsive).

Aesthetic

“Just enough is more”

— Milton Glaser

OK. So the design wasn’t going to evoke the paper by digitally recreating the saw-toothed edge of a page. But it would borrow from the typography and the geometry — elements that really define a paper, this one especially.

The Boston Globe

The Globe uses a classic newspaper typeface, Miller, for all its headlines. Though Miller is used in many papers from the Atlanta Journal-Constitution to the Financial Times, you could say the Boston Globe really owns it. Matthew Carter, who lives here in Cambridge, adapted parts of the Scotch Roman typeface from gravestones in Boston’s Old Granary Burying Ground, where Paul Revere and Samuel Adams are buried. For The Globe, he drew a special, more condensed version with higher contrast and whispy serifs. It’s at once bold and elegant, and it is uniquely Boston.

Old Globe front pages hang in hundreds of bars in this sports-crazy town. Above each photo of Tom Brady hoisting the Super Bowl trophy or Jonathan Papelbon jigging after another World Series win, sits a hundred-point headline set in Miller. That typeface is etched in the mind of every Bostonian.

To make sure it looks every bit as beautiful in the browser as it does in print, our neighbors at The Font Bureau hinted and optimized Miller Globe Headline for the screen.

But Miller alone doesn’t define The Globe. The design adapted many elements of the paper’s visual grammar, such as section flags (set in Benton Sans), photo credit styles, the use of white space, and the color palette (reduced to just three colors: black, gray, and Globe Red). During a combined decade of experience designing for the paper, Mike, Jared, and I really absorbed the Globe’s style. Here, we tried to project it into a new medium by stripping it down and keeping it simple.

Hierarchy

From the outset, Globe editors said that the site would feature fewer stories than a typical website. They wanted to echo a newspaper front page, which offers a snapshot of the most important stories at a moment in time.

Tim Harrower's News Designer's Handbook

On desktops and tablets, this led us to arrange top story packages that were ripped straight from News Design 101 (or more accurately, Tim Harrower’s News Designer’s Handbook). A key organizational principle is to lead the reader’s eye around the page clockwise, starting with the image. Stories are arranged in a circle from most important to least important. The approach worked perfectly online, too, though compressed into more shallow page.

This design approach helped us address one facet of hierarchy: Showing readers what the most important story is right now. But another more subtle form of hierarchy tells you how important that story is compared to all the news you’ve seen this week, this month, this year.

Most news sites are terrible at this. They have a single presentation that rarely deviates. On a daily basis, the news must conform to a single homepage layout. We always thought it should be the other way around. The layout should change to reflect the content.

So we designed several flexible approaches that anticipate news situations. The templates answer questions both big and small. Most address run-of-the-mill news scenarios, since they’re most common. What if your best photo is vertical instead of horizontal? What if the most important story doesn’t have an image? What if there’s a big (but not too big!) news story developing?

Then there are even more grid-busting templates for the truly big (and the truly huge) news situations, like when a new governor is elected or the Sox win the Series.

As you can see from the screenshots, taken directly from our InDesign documents, we used content from real news scenarios and abstracted them into templates that apply to a range of circumstances.

Boston Globe homepage - Standard Horiz

Standard news, horizontal photo

Boston Globe homepage - Vertical Photo

Standard news, vertical photo

Boston Globe homepage - Lead story, no image

Standard news, horizontal feature

Boston Globe homepage - Big news, no photo

Big news, no photo

Boston Globe homepage - Big News, no image

Big news, standard

Boston Globe homepage - Obama

Big news, really frickin’ big

Immersion

Newspapers have a hugeness and create a focus that we love. Hold the Boston Globe open in front of you; it covers your entire face. Pages are filled with six-column photos. Headlines are big and easy to scan. Most pages hold no more than four stories.

We also saw opportunities where the web could improve on the newspaper reading experience. For instance, the jump. After reading the first couple paragraphs of a story, the majority of readers never follow the jump. In newspapers, the jump is a bug, not a feature.

The online equivalent is the paginated article, where scads of people bail after page one. An immersive reading experience means zero interruptions, nothing to stop the flow of reading. That’s why every story on BostonGlobe.com is a single page.

Body text is big and comfortable, framed with white space that draws the eye to the text. You did come to read the story, after all. No reason to cram the margin with other story teases (the better to distract you with, my dear).

BostonGlobe.com article page

Boston Globe article page

More stories do load where it makes sense: At the end of the article, when the user is deciding what to read next. A headline and tease loads for every other story in the section, emulating the experience of grabbing the Arts or the Sports section to read. The more you scroll, the more stories you see.

Photo galleries use similar logic. On the web, it’s easier to scroll than to click. Each click entails a decision. Do I care enough to keep going? Do I want to wait for the next photo to load? Scrolling eliminates those questions. There’s more momentum, it’s easier to keep going and going.

In Boston Globe photo galleries, the image scales as big as the screen allows. Each image is stacked on top of the other, making it simple to scroll through lots of images. Every single gallery is pretty much an entry on The Big Picture.

All Together Now

This all adds up to what we believe is a better comprehensive editorial experience. One that effectively translates the brand, history, aesthetics, and editorial perspective of the paper to a digital medium. After all, the web is no longer just a novel accessory for print publications, it’s their new home.

Comments