The New York Times redesign
The New York Times recently launched their first major redesign in eight years. That’s an eternity on the web, so it’s impressive to see the NYT largely catch up with modern web design and development principles so well. New pages have a responsive design framework to work well across smartphones, tablets and laptops. Articles embrace a “content first” design with less distractions from the main text. And management got the message that good performance is good design with average page weights dropping and faster speeds across the board.
Trends and tech standards aside, even casual readers will find the new NYT article layout a redesign highlight. Content is all on a single page with endless scrolling for navigation. It makes reading easier and is a clear nod to the fluid designs of native mobile design. The improvement is especially noticeable on long form articles; my reading flow was frequently interrupted with content previously broken into many pages my reading flow was frequently interrupted.
Article design is clean and sparse, especially as you move further down the page. Often it’s borderline minimal with little more onscreen than the article text itself and a top aligned navigation bar. Even other suggested articles don’t appear until you reach the article’s bottom. Attention stays refreshingly on the article text. This makes for a more pleasurable reading experience than what I find on most news sites. Also article images and videos are expandable into large, full screen lightboxes. It’s a cool addition given our much higher expectations for web media since the last NYT refresh.
The NYT’s modern design sensibility extends to article comments as well. Instead of adding a chronological thread of commentary below article content, comments are hidden by default and optionally brought in alongside the article (It’s akin to more experimental designs over at Medium and Gawker Media.) The use of real estate makes it easy to refer back to article passages as you’re scanning reader feedback. To help sort through what’s important, comments can be organized chronologically, by reader votes and by direct editor picks. Overall the comments design is such an improvement that I’m reading them regularly; I rarely did with the previous design.
Most NYT pages are now also responsive with navigation and content optimized for the display you’re on. For the first time I’m able to browse through much of the site on an iPad or iPhone (which occurs frequently when I dive into NYT links on Twitter and RSS) without feeling hampered. Interestingly, the NYT developers didn’t use a traditional responsive method where CSS media queries make alterations on the fly to page markup. Instead there’s an upfront check for the general boundaries of your device at which point custom CSS and HTML are generated dynamically. It’s unorthodox, but the NYT has an very diverse audience to support. An out of the box solution is justified.
The much touted new universal navigation works as promised. It makes it easier to jump from one paper section to another without having to scroll significantly or bounce back to the home page. It’s a logical extension of the “content first” approach to the NYT’s article design: stay out of the way yet remain readily accessible.
On the other hand, the more time I spend with the NYT redesign away from viewing and reading the articles, the more I see missed opportunities for change. Foremost is the home page, whose design still feels, like many newspapers online, muddled. There’s just too many levels of hierarchy that blend together. Take the two leftmost columns: there’s a narrower column with larger, italicized headlines and then a wider column to its immediate right with smaller headlines. Given the styling change I expected two different sets of content from different newspaper sections. I was wrong. Stories “wrap” from the first to second column according to chronology and editor preference.
The “Inside Nytimes.com” section further down are smartly curated deep dives that don’t fall under traditional breaking news. Unfortunately, the horizontal carousel navigation is slow, dated, and there should be more articles to choose from. Moving further down you get the common top set of stories from each section of the paper (e.g. World, Business Day, Opinion). It’s well placed in relation to the top stories above but the area needs more white space and a larger font size to improve legibility.
There’s also inconsistent, puzzling navigational choices throughout the site. The smaller “micro sites” like Dealbook, the Bits blog, and the Opinion section often differ the order and placement of the main links (sections, home, search) at top. Moving down into article content also changes the top nav bar actions: options and user account settings links disappear, replaced by share and comments icons. In reality, at least the share and comments icons – the most relevant actions within an article – should be accessible regardless of my location on the page. The NYT instead pushes these actions out of the way in favor of home delivery links and a corner ad. Yet there should be a way to keep both the ad and delivery push alongside comment and share options without the space feeling cramped. It’s annoying to scroll down into an article just to share easily or see if there are any comments.
Likewise, while the new nav bar with a list of related articles at article top is useful, it needs some behavior adjustments. It appears inconsistently: it’s natural for it to appear when you’re at the top of an article, but odd that only a quick scroll up makes it appear otherwise. To mirror native mobile experiences, any scroll up should make the article nav bar appear. Alternatively the NYT should remove the “scroll to appear” behavior outright. There’s a few animation and spacing problems with the nav bar as well. The animation that slides individual articles in from right to left can distract from article text; I’d prefer something subtler. Also the global side navigation is hard to navigate with touch. Slightly larger hit targets on the styling for narrower width devices would solve this.
All in all, the good news about the NYT design deficiencies is that they’re correctable, unlike some of the more fundamental problems I see with the web editions of papers elsewhere. When looking at the news competition (e.g. Washington Post, USA Today) I’m reminded of the widening web design and development gap between younger, online only journalistic companies and their older counterparts rooted in print. Compare Pitchfork to Rolling Stone, The Verge to Wired and Gawker to People. Post redesign, the NYT is a rare exception to that gap.