hyalineskies

Before a few weeks ago, those reading a significant amount of mainstream media content online primarily saw Jurassic-period philosophies from those at the top of information gathering: it was an image of aging, traditionally-oriented journalistic institutions striving to understand (and fitfully adapt to) the distribution of information on the Web. As always, sites such as NYTimes.com and CNN.com were laughably far behind: two of the most visited news sites online carried the same left-aligned, 800×600-optimised, heavily-table-based layouts that designers (or overly zealous Web enthusiasts) would have called “so Web 1.0.” These same layouts gave a different vibe to those outside of our little designosphere: the sites seemed awfully obsolete as social Web juggernauts such as Facebook, YouTube, MySpace, and blog outlets rose to prominence. As other, more “hip” sites swapped their old styles for new designs, CNN and NYTimes.com stayed relatively old-school, aside from their adaptation of blogs, which seemed to be forced upon them from the outside.

Meanwhile, some magazine media witnessed their obsolescence and got innovative. The online Salon.com and legendary print mag New York built freshly-designed, modern templates with typefaces other than Arial and Times New Roman. Even the parody newspaper The Onion was the subject of a much-noted Behavior redesign, attracting a lot of industry buzz. Meanwhile, CNN and The Grey Lady fell behind online, offering nothing notably new.

Analysing the trend

Finally, the Internet media cornerstones gave into their own obsolescence. CNN and NYTimes.com both launched fresh, similar page designs that brought them further out of the Web’s Old World. Oddly enough, CNN.com and NYTimes.com appeared vaguely similar to the previous redesigns of NYMag, Salon, and The Onion, and, at the risk of not being regarded as innovators, helped to usher in a set of standard design and architecture for other publications to follow. Looking at the new online news standard, I’d have to say that things are looking up. With that, here’s Newspaper 2.0, an awfully-kitschy name for a clean, blog-like style that is quickly becoming the standard for mainstream media.

Whitespace, Whitespace, Whitespace.
The new news gets a lot more breathing room with extra horizontal whitespace. Whitespace is a Web 2.0 design toolkit mainstay, finding its way into more and more of today’s designs. The whitespace isn’t just aesthetic; the separation of content (as well as in-content spacing of copy) improves legibility.

Wide layouts.
It’s getting safer and safer to take 800×600 off life support, and the extra space awarded to a designer in 1024×768 is put to good use. This also drastically helps the organisation of content; by being restricted to 800×600, designers had to work with longer pages, restricting the amount of above-the-scroll content. Cognitively, the wide layout also mimics the format of the traditional broadsheet, a size that is (somewhat ironically) shrinking.

Common Typography.
For body copy, it’s Georgia as the serif. Sans-serif duty goes to the Helvetica/Arial/sans-serif family. CNN picked up heavy DIN Mittelschrift usage from The Onion; sadly, NYTimes.com lost some of its character, turning its section heads into bland Arial as opposed to the old Franklin Gothic No. 2 Roman versions. The CSS line-height property is in full effect, with copy spaced out as previously stated in the Whitespace rule.

Lighter Colour.
No, not Web 2.0 colour: CNN certainly hasn’t changed their vivid red “worm” logo to Flickr pink and thew NYTimes.com masthead is still made with their centuries-old blackletter. Colour at newyorkmetro.com, nytimes.com, and cnn.com is much less vivid, with the use of faded greys for horizontal rules instead of black, desaturated blues for links, and colours that move out of the mostly-obsolete Web 216.

Social Web Awareness.
Although compliance to this rule is much more loose than the others - a point I will discuss at length later - media have placed more emphasis on ordinary-Joe bloggers, from NYTimes.com’s Most Blogged to The Washington Post’s Technorati integration. Some sites have “Blog This!” buttons; hopefully we’ll soon see more embrace of del.icio.us bookmarklets as social bookmarking becomes increasingly mainstream.

Applying Newspaper 2.0

Although this new framework will likely become cliché, the framework is a marked improvement over the previous design philosophies. As an example, I made a very dirty mockup of these rules applied to Slate under these guidelines. Click the link in the photo caption above to see the full sketch on Flickr.

As stated previously, the trend isn’t perfect. There’s plenty of room for further improvement. This mockup is obviously still dirty from a designer’s perspective, but it shows the power of a few simple guidelines: Slate has become more airy and less old-school. It places more emphasis upon its slew of content and frees up the constriction of the copy that is evident in its current layout.

What’s Missing?

What, however, aren’t we seeing in this trend? First of all, we’re still seeing a loose compliance to Web standards. As anyone who has ever run a large-scale website will know, statistics inevitably show user agents that one’s never heard of, so some errors are acceptable for the sake of cross-browser compatibility. However, we’re still seeing standards-based issues that are syntactically mindless and appear to be more of a lack of attention to detail rather than deliberate invalidation. For example, out of NYTimes.com’s 407 errors, nearly all are simple mistakes that offer no benefit to cross-browser compatibility and only serve to corrode the markup’s integrity.

On a much higher level, Newspaper 2.0 still spends very little time embracing the social Web, although at least acknowledging the blogosphere is a huge step in the right direction. More direct links to blogs supporting large sites would invariably help; listing XML-RPC trackbacks is a staple of Web 2.0 and a blog-recognition format such as UX Magazine’s would be more beneficial than a blind statistic of what stories have been “Most Blogged.” Inline, Flash Video multimedia presentations with virally-linkable characteristics à la YouTube would increase both the exposure of MSM content as well as bolster their Social Web savvy.

Although more trivial than the others, Newspaper 2.0 is still lacking decent support for mobile devices. Old “PDA” sites built in the era of the Palm V still exist in their original forms if at all, and as mobile devices, such as RIM’s BlackBerry and palmOne’s Treo, continually dig themselves deeper into corporate communicative culture, it becomes decreasingly acceptable for mainstream media to ignore mobile device influence. Although Web standards compatibility (especially on the BlackBerry) is spotty, simple HTML/CSS renders well across mobile platforms and should be an easy adaptation for designers already working with semantic markup.

Meanwhile, I guess that I shouldn’t be complaining. The latest redesigns show a dramatic amount of potential for the future of mainstream media on the Web, but their actions are still far from adequate. Whether it’s as esoteric as markup changes or as high-level as social Web features, mainstream media will listen to us if we’re loud enough. Open your e-mail client and send off a letter to your favourite MSM institution while they’re still thinking about their latest work. Tell them that they can’t grow complacent and rest with the new redesigns. Let’s help them build a better Newspaper 2.0.