To be honest, I don’t like to comment on our competition, mostly because I think it’s inappropriate for me to make remarks that could so easily be confused as an official New York Times view on what another news outlet is doing online. It’s not that I don’t have an opinion on what they’re doing, I just think it wouldn’t be productive of me to air my thoughts publicly (catch me in private if you really want to know), even if those opinions are generally positive — and they frequently are, as lots of companies in the online news space are doing exciting work.
I do make an exception, though, for those instances where I think a competitor has really hit it out of the park, and when I like a design enough to be effusively positive about it. One example of this, from last September, is the discussion between Liz Danzico and myself over last fall’s redesign of The New York Post’s site. It’s not without its flaws, but I still stand by my contention that it’s a nearly pitch-perfect expression of that paper’s brand and journalism. Nicely done, I say.
Today I want to talk about another example of a newspaper that, I think, is doing really wonderful work online: The Times of London’s recent redesign beautifully translates (versus simply transferring) its broadsheet aesthetic into something vibrant and native to the Web.
It Came from London
It’ll come as no surprise to most readers that my attraction TimesOnline.co.uk is based largely on their rigorous use of a grid to govern the layout of their pages. Theirs is a fairly simple grid that doesn’t completely reconcile the three equally-sized columns on the left with the one outsized column on the right (which looks intended to accommodate a large ad unit), but their disciplined and consistent use of these columns throughout the site —on the home page and section fronts as well as on articles — is very nicely handled.
This isn’t just a matter of ‘pouring’ content neatly into columns, either. The entire site evidences some very keen understanding of how the grid can inform the expression and placement of various elements. The masthead, in particular, very elegantly aligns a silhouetted promotional area on the top right with that large right column. Even more subtly, there’s a rotating headlines area along the sub-header that appears on the home page and section fronts that aligns with the right edge of the second column; a single, not particularly tall vertical pipe anchors that element with the entire infrastructure.
That pipe is a small detail but it has a profound effect on the entirety of the masthead; its quietly meaningful reinforcement of orderliness allows the designers to leave a relatively vast area above for negative space in gray, beneath the navigation and just beneath the bread crumbs. This is an area that most business owners would feel the need to compulsively fill with content in order to assuage their innate fear of empty pixels, but the Times Online designers have somehow managed to keep it free and clear. It’s a very sharp design decision, as it plays a significant role in maintaining a feeling of lightness throughout the page, and fends off that feeling of clutter to which so many sites succumb.
I’m also very fond of the horizontal promotional boxes used on the home page and section fronts. Notice the way that the images in each promo (again, silhouetted) are understatedly aligned with the grid. This isn’t done in the explicit and sometimes showy way that I myself tend to favor when I align objects with columns; rather, these placements make sophisticated use of the grid as invisible guidelines for optical centering of items.
Crop most any of the images in these promotional boxes where they intersect with the vertical columns, and you’ll find that they’re nicely centered within the resulting rectangle. That’s the sign of smart visual planning.
The whole layout, in fact, is rife with elegantly formed widgets and modules that use the grid as a foundation. Witness the dog-eared inset boxes that seem to add an additional visual dimension to the page without resorting to drop-shadows; again, a quiet sophistication is at work here. Similarly, modules promoting comments use a single-column width to form a speech balloon, with the ‘tail’ off to the bottom right; it’s probably not the most ingenious display for this kind of content ever imagined, but it’s not without its charms here.
The Industry Sector financial data on the Business section front, which fits into the columnar structure so seamlessly, is another example. Its three-columns are so appropriate and natural in expression that it seems as if the grid was designed specifically to accommodate it. That wasn’t the case, of course, but this kind of subtlety is an example of how an expert design hand can make the grid seem both invisible and indispensable.
Finally, here’s the two-at-a-time feature browser in the Life & Style section front. It functions similarly to the so-called MOTHs that we have in the middle of the NYTimes.com home page, but the controls are more conveniently placed in the center, straddling the gutter between two columns.
Number Two
To be sure, TimesOnline.co.uk isn’t without its flaws. It adheres perhaps too strongly to the same column arrangement throughout, so that there’s no architectural difference between the home page and section fronts, causing a measure of layout monotony as users move from section to section. The site also falls down a bit in rendering consistently in the Safari and even, to a lesser extent, in Firefox; with a layout this precise, it’s crucial to ensure visual compatibility across all browsers.
All told, though, it’s been executed great aplomb. It’s clearly one of the most sophisticated grid executions online right now, and visually, I’d say it’s among the best-designed news Web sites out there. Everybody knows who number one is, of course, but I’d say it’s pretty close.
+