Looking towards more flexible web-based editorial design

Isaac and I have been discussing how users consume media and news which has raised some interesting questions around online publishing. Specifically: how we construct content templates, how that content looks when it’s in place, art direction at a micro level and how we can create richer, more engaging and, importantly, more ‘useful’ reading experiences online.

Over the last 4-5 years there has been a gradual convergence in how most newspaper sites construct their article pages. Based on a grid system, they employ a wide central column for the body copy and a number of other columns, usually on the right of the screen, for related information, links to other stories, MPUs, tools, etc. We should know, we’ve designed a number of sites for media owners, as well as countless blogs that conform to these conventions.

No matter how long the article is it is wedged into the same template. If it’s 200 words, stick it in. 800 words? No problem, paginate it and reap the ad impressions.

There’s loads of sense to this approach. The beauty of the web is its democratisation of publishing. Drop your text and image into a well crafted template and you’re away. But I think there’s room for another approach.

I can see how we got here

Having studied graphic design in the mid 90s I was taught the principles of layout and grid systems and inevitably put my skills to use in producing double page spreads and poster designs. All the time considering the measure (column width), image placement with or without cutout and all sorts of typographic nuances.

Then the internet came along and we all made it up as we went along. We maintained the page-based metaphor for displaying content. And as the control of text and layout became better with each browser, HTML and CSS update we moved closer to the grid-based layouts familiar in the print world. This has happened possibly due to us adopting these traditional techniques as a coping mechanism as much as anything.

Is this it though? Have we reached the natural conclusion of how to present copy on the screen? An averaged out framework of averageness, tested to the limit where everything is very formulaic.

If you look across all the major news sites today you can see this convergence in layout happening. All are going in the same direction.

Where now?

Don’t get me wrong. I love the grid as a way of delineating space. It brings logic and consistency to a design. But as Josef Müller-Brockmann said:

“The grid system is an aid, not a guarantee.”

I believe the time has come to think of the content we are trying to display and remodel our layout systems to work with them. In fact, in a slightly ironic twist, looking back at the ‘old’ ways and using some of the techniques of print to reinvigorate our web ‘pages’.

There are two ideas I would like to offer up for discussion.

Firstly, when I read a print-based newspaper (remember them?) I can scan a page and easily identify a full page article, a half page article or a snippet in the side column. I can divide my time, skim read larger articles, read all the little bits and leave the rest ’til later.

Why can’t we take this idea to the web? What’s wrong with producing an editorial digest? Something that removes all the related stuff, highlight stories from around the edge and side columns and just present an article. I can then skim and flip to the next article. There could be 20 pieces, some long, some shorter. Some of the shorter ones could all be collected to appear on the same ‘page’. This could also allow for more meaningful and intelligent placement of ads and advertorial – less of them, but worth more and better targeted.

I could see this working well as, say, an iPhone app. I don’t want a home page with links to 60+ articles. Give me something that’s had editorial control – something that newspapers are good at.

This approach would create some pace and contrast to my experience. Yes, I know it’s about reading. But engagement on a level beyond pure copy would surely invite the reader to dig further, spend more time and discover more. Let’s not forget, some media owners may be considering charging for this stuff in the very near future. There needs to be some more hooks to separate the reader from their cash. Copy that has been reproduced elsewhere and readable for free isn’t going to cut it.

One other consideration to throw into the mix is that although PC screen resolutions are getting bigger it’s the x-axis that’s growing. More and more laptops and monitors are going widescreen. How are we going to usefully employ all this extra lateral space when we’ve been building vertical height into our sites? And as more and different ways of interacting with the screen come about, pointing and clicking story headlines with a mouse is going to date very quickly.

Something else to consider

Secondly, how about more flexibility and control over the article design? Newspaper supplement features are art directed specifically for the content. They’re usually beautiful creations that look and feel special and different. A special feature on a news website often looks very similar – if not identical – to the rest of the editorial copy. And no, simply adding an image gallery isn’t what I’m talking about.

An individually art directed and designed spread for a feature article in Monocle magazine

As HTML and CSS become more flexible and robust and real fonts start to make their way onto the web, I feel that there is a fantastic opportunity here. Instead of the ‘slap image in this space, copy-paste text in here’ CMS we’ve become used to, I yearn for a more flexible approach to page layout. A way of composing a page and art directing it on an individual basis.

Jason Santa Maria has forged a path in this direction. As has Gregory Wood. They’ve begun to art direct individual posts on their blogs. So much so that I prefer to visit their sites to read and enjoy each post instead of subscribing to the RSS feed. Yes, there are some posts that are more template driven and less styled on Santa Maria’s blog. That’s the beauty of this approach. Sometimes the words can stand up for themselves and don’t need to be over-designed. But we need to start to create more ‘surprise and delight’.

We’ve spent the last decade evolving the practices of print publications to fit how we produce content for the web. Newspapers have their design for a number for years before a wholesale rework. Must we have the same approach for the web? Print is static. The web should be more flexible.

I know it’s in Flash but the NY Times Style Magazine is doing some interesting things around these themes.

Am I too obsessed with this? A designer that’s too precious with his own trade and wants too much control. After all, magazines have a physical presence. I myself have a number of first editions on my bookcase. Can we ever be precious over web-based content? To spend the time creating beautiful pages that only exist in the readerships’ conscious for a fleeting moment before a click to the next site or story diminishes the piece to an instantly fading memory?

I don’t have the answers – yet. But I’d love to hear what the audience thinks.