Riding the redesign wave

Riding the redesign wave

The Wall Street Journal is one of many recently redesigned publications

Redesigns of large scale editorial platforms and publisher websites have been popping up like wild flowers lately. ESPN (led by AREA 17), Bloomberg, The Guardian, The Wall Street Journal, The Atlantic, CNN, and The National Review have all launched new sites in the past several months. Considering our (AREA 17) long-standing interest and deep experience in the editorial world it seems worthwhile to note the interesting aspects of some of the new wave of designs.

In general, the most pronounced trend is the shift toward cross-platform branding. Thanks to the possibilities offered by Web fonts, publisher Websites are now mimicking sister print publications en masse by adopting the same typography (fonts) and color palettes. Although there are a few hold outs such as the Wall Street Journal, there is also a move toward more immersive, “full-width” home pages that emphasize photography, large type, scrolling behavior, and the publication’s branding over “content density.” Last, the adoption of infinite scroll continues although not all the sites featured here went in that direction.

1. Wall Street Journal

The Wall Street Journal homepage.

Nieman Lab reviews the strategy behind the design and the Journal’s need to play catch up with its rivals, in particular the New York Times. One of the most interesting aspects of the Journal’s redesign is just how important the desktop is as a platform and the home page as a destination.

Yes mobile visitors are growing at a torrid pace (30-40 percent year over year) for the Journal — just as they are for everyone else — and so mobile remains the key platform for discovery of the Journal’s content. As a consequence, the paper required both a refined mobile responsive design and a stellar app. At the same time, paying subscribers are tethered to desks throughout the work day and as such are heavily dependent on the desktop experience. Desktop visits still make up over 56 percent of the Journal’s total Web traffic.

For the same reason — its loyal, repeat, paying readership — the Journal’s homepage is still very important. Homepage traffic is not only growing but over two thirds of paid subscribers visit it at least once a month. Maybe for that reason, the Journal decided to buck the trend of immersive, low-density homepage designs, and keep a fair amount of tightly packed content, with a dense, multi-column grid of small photos and articles on main landing pages.

Overall, the redesign follows trends in Web design of decluttering the article detail pages and approximating its print sibling’s branding by incorporating the same typefaces and colors.

Designer eye candy: the ubercool “Markets” dropdown at the top of the page.

The Journal's markets quick overview: a thing of beauty.

2. The Atlantic

The Atlantic's new immersive home page.

Editorial web pioneer, The Atlantic Monthly Group, also recently launched a new design of the website for its flagship publication, The Atlantic. If you’re unfamiliar with the recent history of The Atlantic, which also owns Quartz, you can read about it here. In a nutshell, after decades of financial peril, including $30 million in losses in the 2000s alone, the storied, 154-year old brand went “digital first.” In doing so, it became one of the first online editorial brands to become profitable.

For that reason, when The Atlantic makes changes, people take notice. You can read in-depth reviews on the redesign here and here.

On the surface, the redesign features some big layout changes, going for a more immersive home page experience with large, sometimes full-width photos, and article entry points. Like the Journal, the new Atlantic design also takes branding cues from its print counterpart, incorporating the elegant Lyon typeface by Commercial Type.

What’s most notable, though, is what the redesign doesn’t have and the strategy behind the changes.

A lot of the thinking that went into the redesign is intended to grow the true, committed audience, not necessarily casual users and click-throughs. This is a marked shift in strategy for editorial publishers, most of whom have been aiming at the Buzzfeed model of viral discovery but low user loyalty.

The Atlantic's recirculation module at the bottom of the article template offers users wondering why they should read something a reason to click.

Eschewing the trend toward infinitely scrolling article pages, the new article page instead uses a “Most Popular” articles recirculation module at the bottom of the article page. In the module, each item includes headlines and article text, both of which provide more context to the content and are intended to increase engagement.

This is especially interesting since The Atlantic owns Quartz, which pioneered infinite scroll (with our help) on article pages, something that has been and continues to be widely imitated ever since.

Some advertisers are pushing back against infinite scroll since ads are often not viewed while new content (the ad and the next story) is loading and users tend to click away. Apparently, the trend toward ad “viewability” demanded the new thinking. According to Digiday, another reason The Atlantic abandoned infinite scroll is simply that it’s hard to know what to serve to readers with divergent interests on high traffic sites like the Atlantic.

For Ad Age and our current work with another large publisher, we followed a similar line of thinking by limiting the recirculation options at the bottom of the page. We are also adding additional copy to headlines to give users more context as to what some stories are about. The Atlantic also redesigned its newsletter to be read “almost entirely” in the recipient email, with few outbound links, in an effort to get people interested in The Atlantic’s content but not necessarily driving immediate site traffic.

3. The Guardian

The Guardian's home page.

The Guardian redesign is exciting on a number of levels. The publication has long been a pioneer in print news design, being named the World’s Best-Designed Newspaper by the Society of News Design in 2005, and continually pushing print design and typography in exciting new directions. So it’s no surprise then to see the Guardian extending the award-winning visual identity of the printed paper to its web counterpart. You can see some images from the Guardian’s 2005 print redesign here.

Overall, the visual elements of the print design translate well to the web. The Guardian’s Egyptian typeface and highly disciplined, Swiss-inspired grid layouts, in particular, work well as aspects of the digital design. Also borrowed from the print newspaper are colored backgrounds which are used to differentiate content. On the Web, this system becomes more dynamic but can also be a bit visually overwhelming and unclear to infrequent visitors as to what the colors mean.

There’s a lot more going on in this redesign than just the visual language of fonts, color, and graphic shapes, however.

The redesign pushes the envelope on modular web design more than anything we’ve seen recently. The Guardian team started with the premise that making web pages to deliver news and information should be way more flexible and easy. Web pages and content should be adaptable to the news agenda at any given moment, not the other way around. The idea is to hand editors the kind of freedom to promote, curate, and visually assign importance to articles in a way they see fit and were once accustomed to under erstwhile editorial workflows geared toward creating printed newspapers and magazines.

In practice this means that editors shouldn’t be limited to a few “templates” — one for this and one for that — but should be able to build pages organically using different media formats like text, video, and audio.

On landing and listing pages, this means being able to make a piece of content bigger or smaller on the page, moving it higher up or lower down, and by grouping it together with other content in varying ways — depending on just how important editors think the article is at that moment in time.

Web design thus becomes more like building blocks in which blocks can be labeled however the editors see fit. A page emerges by piecing together a series of smaller pieces rather than by trying to fill in the blanks of a previously defined page-level template. With a modular approach, pages arise from the bottom up rather from the a top down down.

Riding the redesign wave

The Guardian's container model: how a content item (on the left) gets grouped with other items as individual horizontal modules (middle) and then stacked to build pages (right).

Riding the redesign wave

Horizontal modules can be repurposed across listing and article pages like so.

Interestingly, The Guardian also eschewed infinite scroll on its article pages, instead sticking to its modular approach. At the bottom of an article, editors can recirculate readers using a “Related Articles” module or reuse modules from the home and other landing pages as they see fit.

One final note, The Guardian does an excellent job of dealing with sponsor content from Outbrain, positioning it at the very bottom of the article page. It also treats it as part of the same visual system but makes distinctions by using the Guardian’s sans serif font for headlines and by adding a slight background. Since it’s contained in its own module, it works quite nicely.

Read this extensive post by The Guardian’s Nick Haley to learn more about the “container model.” This is exciting stuff.

4. Bloomberg Business

The new Bloomberg Business home page: this ain't your forex trader's Bloomberg anymore!

Bloomberg’s recent redesign takes graphic design on the web into uncharted territory. Like other redesigns, Bloomberg references the branding of its print counterpart, bringing the Swiss visual language, typography, and punk rock attitude of the award-winning Bloomberg BusinessWeek magazine to the digital medium.

Rechristened “Bloomberg Business,” the new site features bold graphic elements, a vibrant color palette, and parallax scrolling that, while very fresh, sometimes distracts from the content itself. I’m a bit surprised Bloomberg made such a bold bet. Like the Wall Street Journal, I suspect Bloomberg’s home page is more of a destination than it is for many publishers. My guess is that many finance professionals and business people initiate a visit to the Bloomberg home page to check on markets and other business news. Perhaps, this is not the kind of design they would appreciate.

Like other publishers such as Time and Vogue, Bloomberg opted to go with infinite scroll on its article detail pages. The article template is clean and doesn’t overwhelm the user with a cacophony of recirculation options, feed menus, and ads like so many of the designs featuring infinitely scrolling articles these days. In fact, there may be a slight dearth of story alternatives in the event the user loses interest mid-way through the article.

A 404 page from the Bloomberg redesign: what’s not to love? (Click to see it move!)

From a visual standpoint, there are some beautiful touches in this design. With a few tweaks to enhance the user experience, this site could live up to its rock star aspirations. Over time, I expect that’s what will happen.

5. The National Review

The New National Review.

The National Review, the conservative political and policy magazine founded by William F. Buckley, has also recently received a makeover.

From a graphic design standpoint, this redesign is interesting particularly for its bold and elegant typographic choices (Ideal Sans and the elegant capitals titling typeface Albertus), and a bright color palette.

A good friend, a professor of political philosophy at a prominent Midwest university and a National Review reader, noticed the redesign and remembered thinking that it didn’t “look like a conservative journal.” Kudos to the designers for not falling into cliches about what a conservative journal should look like.

The National Review incorporates infinite scroll on its article pages as well as a lot of other bells and whistles of contemporary web design. Infinite scroll may make more sense for niche publishers like the Review. The logic being that it’s easier for a publisher with a more defined, vertical content offering to know what additional content to serve a smaller, more focused, loyal reader.

The National Review goes social. The colorful sharing buttons blend in well with the overall design.

Additionally, the new design features the much more prominent social sharing links that we’ve all grown very accustomed to. Ordinarily I chafe at publishers making these too big and too colorful since it often dilutes their own brand. Generally, casual users only make it to one of your articles, having been referred by a link in Facebook, Twitter or Google. So if the only thing they see when they arrive are the colors of Facebook, Twitter, Pinterest, and Google, they’ll have a more difficult time remembering what’s unique about your site.

In the case of the National Review, it’s different. Yes the social sharing and printing utility is colorful and loud, but it integrates well with the overall brand that’s established in part by the design’s color palette.

What’s Next?

What’s on the horizon for editorial web design? One is more resolution to the issue of content density above the fold. Users say that they like tightly packed content and that they don’t like to scroll. There may be something to that but not because they don’t scroll or because they actually click on or read any of the clutter on most sites. We know they scroll and we know they don’t click on much of anything so why do they insist they like the noise? It’s not clear but given the divergent designs we’re seeing, after some time we’ll see which ones stick and which ones don’t and then we can make some more educated comments as to what’s working and what isn’t.

We’ll also undoubtedly be seeing more bespoke editorial web design. Both the New York Times and the Wall Street Journal are actively recruiting to fill new positions that will move designers and programmers into the newsroom alongside editors and writers. This is particularly exciting since we’ll begin to move out of the static template era and into an era where content is more fun to make since we’ll actually be able to design it based on what it is and not silo everything into the same page layout. It also will be infinitely more engaging and immersive for end users. Much like magazine features or enterprise articles, we will regularly produce stories like this and this.

It’s an exciting time to be in publishing and web design. Brace yourselves, the best is yet to come.