Skip to main content

Inside the New York Times' web redesign

Inside the New York Times' web redesign

/

A guided hands-on with the NYT's first design overhaul since 2006, set to go live this fall

Share this story

iPad NYT modified
iPad NYT modified

On Tuesday, The New York Times announced a complete overhaul of its web presence on all platforms, going live on desktops and tablets this fall. A glimpse of the pilot site is available in a guided tour, but is currently only deployed for employees inside the NYT's firewall. Invites will go out to a handful of randomly selected users in the next few weeks, but The Verge couldn't wait that long. So we went a couple of blocks down 40th Street from our New York offices to the New York Times Building to check it out.

"The last major redesign was in 2006," says Ian Adelman, director of digital design. Adelman joined the NYT in 2011 after a long stretch at New York magazine; he's been working on this prototype with a small team of designers for about a year. "But back then we only had to design for about five different templates," says VP of Search Products Rob Larson. Larson's been working on online products for the NYT since 1996. "With this, [the equivalent of] templates [would] number in the hundreds," he says, for different article types, screen sizes, custom layouts, and mix of advertising types.

In short, the paper of record is bringing its site design into the post-PC era — where any kind of media can be streamed to screens of any size, traffic can come from and lead to anywhere, readers expect both an immersive, dedicated experience and total cross-platform customization, and updates come fast and furious, not once or twice in a decade.

No more pagination or clicking "single-page view"

The first thing you notice when you look at the new article layout is that everything is on one page. For news articles and magazine stories, the HTML5 redesign foregoes the familiar but much-lamented page breaks in favor of a continuous vertical scroll. "We've found that the levels of engagement in terms of time spent and depth of reading increase when it's on a single page," says Larson. Readers perversely nostalgic for a page turn will find comfort in how the headline and article fonts newspaper and magazine stories now exactly match their print counterparts.

At the top of each article page is a full-width, horizontally scrolling navigation menu that the NYT's design team internally calls "the ribbon." The ribbon can present related stories within or across sections, or structured lists, like "most e-mailed." It's rendered in AJAX, so you can click a story on the ribbon and only the story reloads; your place in the ribbon is preserved. Scroll down slowly and the ribbon vanishes; scroll quickly, whether up or down, and it reappears. Ads, related stories, and comments all move to the right-hand side. Instead of a long stream of comments, the bottom of each article has a structured navigation box suggesting more related stories or sections, tailored to each page; Adelman calls this the "what's more" section.

Active and passive personalization

"We've seen that readers navigating the site either want something very specific or have regular sections that they like to browse through," says Adelman. "We've tried to support both extremes." A navigation menu in the upper-left corner of each page, sporting the now-familiar three-line "hamburger" icon, gives access to every section and subsection of the paper. It drills down like the old Windows "Start" menu. If you're a registered user of the site, this menu can be customized by adding favorites and most-visited elements, either actively (starring your favorite sections) or passively, with the site monitoring a reader's habits over time. The NYT's apps already allow for this; now the web is caught up.

Rufkd

The ribbon, single-page layout, and other navigation elements are designed to "minimize the friction of moving through the site," says Adelman. He outlines a few of the redesign's other goals: creating a more responsive design for different monitor and screen sizes; optimizing navigation for touch; reducing the amount of visual competition on each web page; creating more resonance between the web and print editions; and allowing for new ad configurations. They all work together: stripping the site down to its most basic elements allows for both ads and text (or images, or video, both of which are given more prominent treatment) to garner more attention. Adelman and Larson explain that they're experimenting with new ad units besides the familiar banner and box displays, but aren't ready to reveal those publicly yet.

"We have great native apps… They aren't going anywhere."

A multiplatform, responsive redesign for the web, especially with a new focus on ads, often signals that a media company is pulling back some of its energy from its native apps, but Adelman and Larson say that isn't the case here; it's more that the NYT is taking elements from its native apps and one-off, designed stories like the acclaimed "Snow Fall," and making them part of the everyday web platform. (Those bespoke experiments won't stop either.) "We have great native apps with their own capabilities and audiences who appreciate them," says Adelman. "They aren't going anywhere."

Ipad_landscape

It's not an either-or. The NYT is taking a similar approach to responsive design, which Adelman calls "responsive in stages." "We're not responsive purists," he explains. The prototype includes responsive elements to adjust for different screen or window sizes, but it's not a single code base for all form factors. The smartphone version of the prototype — still under wraps even within the NYT, and not scheduled to go public until sometime in 2014 — will run on its code and be optimized for speed.

"Continuity is more important than consistency."

In fact, Adelman and Larson say they're working harder on making readers' experience between app and web platforms more continuous, experimenting with cloud-based features like shared preferences between web and apps, or syncing progress in a story, Kindle-style, so users can stop reading in one platform and pick up where they left off in another. "Continuity is more important than consistency," Adelman says.

"We're going to be immediately working on the next version."

Both Adelman and Larson stress that this is just one iteration. Many more design elements will be added or changed, both before and after the new site design is made fully public. Like any other software beta, the prototype simply finally needed to be tested by users. When asked which features of the new design are set and which are variable, Adelman said that there wasn't any such distinction.

"We want to lay the foundations so that we're no longer going to have to wait five or six years" for a site redesign, says Larson. "After we launch this later this year, we're going to be immediately working on the next version, and the next version after that. This is what people already expect from mobile apps, and we want to treat the web site the same way."

An earlier version of this story misidentified Rob Larson as New York Times designer Jeremy Zilar.