Inside the New York Times Redesign

The New York Times is overhauling its article pages as part of its first major website redesign since 2006. The Times released an animated preview on Tuesday, and we stopped by their offices on Wednesday to get a closer look.

The first thing you'll notice about the new article pages — still in prototype phase — is how clean they are. There's a generous amount of white space bordering the text. The top navigation has been shrunken roughly in half, and the 728 x 90-pixel banner ad near the top of the page has been eliminated.

Images and other multimedia components, including video, have moved from thumbnail compartments into larger, more prominent placements above and in-line with the article text. Longer articles are no longer paginated because the Times found that readers read further and stay longer when they don't have those obstacles, Ian Adelman, the Times' director of digital design, says.

"When you stop [at the end of a page] there's a possibility to ponder other directions," he explains.

Like other recently redesigned media sites, including USA Today and Self, the Times' forthcoming site features a responsive design — meaning the same elements will rearrange themselves to suit different screens sizes, from large desktops to smaller tablets.

The Times has not yet decided whether to extend the responsive design to smartphone-sized screens as well.

Streamlined, Customized Navigation

The navigation bordering the top of article pages has been condensed and simplified. Gone is the top rail linking to the home page, today's paper, videos and most popular stories, as well as the double search boxes; gone too are links to each section and links to the subsection of the vertical you're in. In the new design, there are two rows heading the page.

At top left are links to sections (which pulls up as a separate menu on the left side of the page), home and search; top center features the paper's logo; and top right links prompts to subscribe, sign in or adjust your settings. The second row features a carousel of story headlines and thumbnails from the same section as the article you're reading, something the Times has adapted from tablet app design. The design team calls it a "ribbon" nav bar.

Approximately 46% of the Times's web traffic comes through the home page, and Adelman says desktop visitors frequently click on an article from the home page and click back to the home page to choose another article over and over again.

"We want to encourage app behavior of moving through articles, rather than back to the home page," says Adelman.

"We want to encourage app behavior of moving through articles, rather than back to the home page," says Adelman.

In addition to the ribbon bar, you're also encouraged to click arrows that appear on the left and right side of an article to navigate to another; you can also use the left and right arrows on your keyboard. Clicking back to the home page is, of course, still an option, and a link to the home page is available both at the top and in a floating bar that follows you down article pages.

The floating bar also lists links to the sections navigation and search, as well as links to the comments (where available) and shortcuts for sharing articles.

The section-by-section navigation has been removed from the top bar and is quietly hidden on the left side of article pages. To access it, you can click on the "Sections" link at the top, or hover and click on the left side of the page. In addition to listing each section and subsection, you can also create shortcuts to access your favorite subsections from the main frame.

Subscribers who log in to the Times site when the redesigned pages roll out will notice that the navigation menu has been pre-populated with shortcuts to the sections they visit most.

Flexible Article Templates for Storytelling and Ads

The Times built article templates that can be customized to accomodate a story. A short news brief might feature the Cheltenham font the site uses for its headlines in bold italics and no image, while a leisurely feature might have a headline with a lighter typeface and large-format images (and/or video) both at the top of the page and in the body of the text.

"There's a sameness to the website now," Rob Larson, vice president of search products at the Times, observes.

"We want to achieve a sense of variety and richness, reflected in image sizes, headlines and ad formats... [That] serves the journalism."

"We want to achieve a sense of variety and richness, reflected in image sizes, headlines and ad formats... [That] serves the journalism."

It's not just headlines and multimedia that can be adjusted to compliment a story: the pages are also flexible enough to allow for a wide variety of ad formats, says Adelman. The prototype pages I saw featured few display ads, usually only one or two square-shaped banner ads in the right rail. Adelamn says they have been spaced out so that they appear where page would normally be split.

Overall, there are less ads, but the Times expects impression numbers will remain steady because the new site will encourage people to read for longer periods of time. There's also an expectation that, with less elements to compete with on a page, advertisers' messages will stand out more — a hypothesis that will be tested in time by click-throughs rates and other engagement metrics.

The Times is exploring additional ad formats, though the company isn't willing to talk about them yet, Adelson adds.

Beyond ads, call-outs for most-emailed stories, as well as comments and multimedia extras, can also be featured in the right rail. Larson says they are still testing to determine optimal placements for many of these features, particularly the most-emailed stories widget, which is especially popular with readers. Call-outs can also be placed in the right rail and in the article text itself for comments.

Not all Times stories have comments sections, as Bassey Etim, community manager for the Times, recently explained on Quora, a Q&A site.

In the coming redesign, call-outs are hidden from the article page, just as they are now. Click on them, and the comments will appear in a resizable window side-by-side with the article text.

To keep you reading, a row of additional stories from the section appear at the end of articles, followed by a second row of stories recommended for you based on your previous reading history. (You can read more about how recommendations work here.)

What's Next

Adelson and Larson seem most enthused about the flexibility offered by the prototype article pages — flexibility that will allow them not only to improve the way the Times' journalism and advertisers' campaigns are delivered on a day-to-day basis, but to roll out further, more incremental design changes over time.

Randomly-selected readers who sign up for the beta will also be given access in the coming weeks. The new article pages are expected to roll out in full later this year.

After the article pages, the Times design team will focus on section and home page redesigns, but Larson and Adelson declined to say which they would focus on first, or when.

What do you think of the prototype design? Is there anything in particular you wish the Times design team would consider adding to or removing from the layout?

Screenshots via the New York Times. Front-page thumbnail courtesy of Flickr, Robert S. Donovan and Nielsen.