CMSish

where web content management and user experience collide

Design vs content in digital magazines

Data journalism and infographics
I was over at Guardian HQ last Friday for a small but well formed event on data journalism. A panel of five discussed infographics and the business of digging news stories out of data.

Simon Rogers kicked things off with a summary of what the Guardian is doing in this space. Back in the day when we both worked at Guardian Unlimited, I didn’t always see eye to eye with Simon, but I admire the good work he’s doing these days with the data blog.

David McCandless, author of Information is Beautiful, was also on hand. Perhaps his most startling infographic was his CV. It turns out he never trained as a designer or did much more than dabble in design until a few years ago. Not bad for somebody who wrote what (I’d guess) was the year’s best selling design book.

In the Q&A there was discussion about whether some visualisations are only beautiful; nothing more than illustrations that add a bit of colour without clarifying anything—or in the worst case, even misrepresent the story. The latter case aside, I’d say visual variation is a legitimate end in itself. There’s nothing wrong with being pretty.

Still, it’s also the case that the best infographics work as an integral part of the story, and can bring out new insight. Design is being used here as part of the storytelling process. In the current Age of Skim Reading, the infographic is the story for many readers.

Which came first, the design or the content?
Which brings us to web templating and digital magazines.

Web template design is done before the content has turned up. The design is a bucket that gets filled with content. So there’s no real relationship between the design and the content; the design is not part of the story, merely part of the brand.

Most magazines, otoh, are designed around the content. Sure, there will be brand assets, master grids, baselines and so forth that get reused continually; but the design for each set of pages essentially starts with a blank slate and the story. The finished product is a story told with a mix of words and design.

There are pros and cons to each approach. Templating is highly scaleable. It has low production overheads once the templates have been created, so fits better into a tight production schedule. It deals better with distribution to multiple channels and devices; for each template A you can have (say) a matching mobile template A*.

But templates have to be “content-proof”, so that they don’t blow up when they encounter unexpected content; this is a really big constraint in practice. Templates don’t relate to the particular content of any story. And obviously they tend to look a bit “same-y”. All in all: an inferior user experience.

So this is the hard problem for digital magazines: is it possible to design content in a way that 1) can work across channels, and 2) can be done quickly enough and cost effectively enough to be viable.

Magazine options
Some people think magazines ought to just get with the programme, and adopt the web design paradigm so that their content can be easily pushed out to whatever digital channels are appropriate. This needn’t be as limited as it sounds. Your templates don’t have to be dumb buckets; you can make them pretty smart, so they introspect the content and format accordingly. It’s still lossy though; you’re still decoupling the design process from the storytelling.

Come to think of it, that decoupling is what in the CMS world we call “separation of content from presentation”, and it’s generally thought of it as a Good Thing. Is that a shibboleth we need to abolish in the magazine world? For search indexing etc, maybe it’s enough that it can be separated, after the fact.

Meanwhile, Adobe and Woodwing are building iPad-oriented solutions based around InDesign, the magazine publisher’s weapon of choice. This is a high-fidelity approach, which follows exactly the same design process as print. Which means it’s quite time intensive, and requires new design work for each device aspect ratio/orientation. Not to mention that the only way that they’ve found to make this non-lossy to date is to, er, bake the pages out as images… There’s talk about “adaptive design” and generating HTML5 in future releases. The truth is that a transition from InDesign to HTML (5 or otherwise) is likely to be quite lossy for the foreseeable future. Being a bit elastic is precisely one of HTML’s great strengths.

Which is the best approach? In short: I don’t think anybody’s there yet. It’s a matter of making a pragmatic decision that works for the moment (eg. only target iPad, “letterbox” your design for other devices, forget smartphones), while waiting for developments.

Advertisements

Filed under: Design, Publishing, , ,

3 Responses

  1. Rob says:

    Hi Michael
    Thank you for you interesting post. If you have not done so, please take a look at Treesaver.net. I think you’ll appreciate this HTML based app, which scales to different sizes and shapes of browser supported devices, enabling dynamic content to be read in pages and columns.

    • Michael Kowalski says:

      Looks like interesting stuff you guys have been doing, in the “smart layout” camp. Hope you can reveal a bit more detail on your site soon.

  2. Luke Hoyland says:

    I do wonder if “adaptive design” for multiple devices might have something going for it.

    Much like Michael Freeman talks about a discrete number of compositional archetypes in photography, Simon Esterson once joked to me that “there are really only a dozen ways to lay out out a magazine page; probably fewer than seven for newspapers”. Simon was probably just trying to reassure me about my undeniable lack of imagination when it comes to news design. But I took the idea to heart.

    I suspect that there are some underlying tenets about alignment, proportion and tone that are more science than art. If that’s true, you could in theory have a machine identify which of those “dozen” platonic forms lies behind a particular layout, then apply an interpretation of that form appropriate to target devices, flavoured of course with the publisher’s house style for typography, colour palettes, etc.

    Obviously we’re not talking about content-led design – but maybe a certain flexibility based on some smart paradigms is a step up from a entirely content-agnostic template.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

My tweets

Other stuff

%d bloggers like this: