MikePadgett.com

Good online editorial design

— A quick look at three essentials of online editorial design.”

In this item, I will refer to “editorial design” as the refinement and optimisation content presentation for content-driven websites.

Of course, editorial design for print predates the Internet and web designers may even take some cues from it, but this item is concerned only with the digital domain.

The evolution of online editorial design: commercial buy-in

Baby steps: the BBC website in 1997

Let’s not forget that designers cannot practise editorial design methods if there’s no editorial content! Working with media that predate the Internet, many of the newspapers, television companies, magazines and publishers were slow to catch on.

Indeed, evidence suggests that there was a lot of pondering what to do with the new medium. [1]

New York Magazine, 2000

After all, if you’re a magazine selling subscriptions and advertising, how can you generate revenue from the Internet? The initial response to this question was typically to provide a shop window for the more traditional main product.

Times have changed.

The evolution of online editorial design: CSS

The trend of improvement in editorial design is linked to the increased awareness and use of CSS.

Whilst most designers and developers have been using CSS for several years, browser support and skill spread have kept sophisticated editorial design in the shade for some time.

The evolution of CSS has been thus:

1. Improve visual consistency and generate cleaner code
2. Create flexible layouts to replace HTML tables
3. Refine code so that entire visual designs run from stylesheets

It’s in this third stage of CSS use that concerted efforts in editorial design have started to happen.

Websites in the fitting room

The industry eventually dispensed with the fads (image maps and all-Flash sites) characteristic of the boom/bust dotcom era.

The realisation followed that Internet users wanted quality content and lots of it: Slashdot, The Register, Fark and later “social interaction” sites such as Digg and Flickr.

Initial efforts to satisfy the new deliverables often meant squeezing masses of copy into low-resolution compatible layouts with traditional navigation, then slotting in a plethora of advertising so that the user’s eyes would snake down the page, weaving in and out of ad blocks.

Editorial design for problem solving

Some sites – conspiciously those that deliver technical tutorials – have yet to mature out of these behaviours.

Elsewhere the adoption of increasingly sophisticated editorial design practices has given the Internet a new respectability.

Timesonline.co.uk, 2003 and 2006. Designed in-house.

NYMag.com, 2006. Design by Format.

The ingredients of good online editorial design

1. Plenty of whitespace
2. Consistent picture research
3. Sensitive use of type

Plenty of whitespace

Time.com, 2007. Designed in-house

A common complaint with the old low-resolution compatible layout was its density.

If you have limited pixels available, you’re going to have limited whitespace. There was always a palpable sense of frustration when, even with middling resolution, a great block of whitespace gaped whilst you crammed everything into a tight, strict grid.

With liquid layouts and better resolutions, good editorial design restores whitespace to its proper place. Rather than using obvious blocks filled with background colours, we tend to see proportioned type with ample leading, margins and muted rules.

Consistent picture research

AIGA.org, 2007. Design by Happy Cog

Strong, mood-enforcing images are essential to good editorial design. On a content-driven site, it’s so important that instructions on the appropriate type of images should be written into the style guide.

It’s also important to remember that the content drives the site, not the site design. Good editorial is all about giving voice to the content and ensuring the design itself is not distracting.

Sensitive use of type

Type on the Internet is still a limited affair, but that doesn’t mean great refinements cannot be achieved.

Apart from the legible copy types in common use, appropriate sizing and colour are essential. For brand-centric display type, we can use the sIFR and MIR techniques.