Design: Improving Readability Without Lifting A Pencil (Part 1)

eyesThis post is part 1 of a two part series on improving blook readability.

Have you ever tried reading a Project Gutenberg novel? Yes? No? They deliver classics (well written and of superior quality, I must add) to you in a variety of formats. Amongst those is the ubiquitous HTML file: the webpage. Let me describe it to you: the story is one page long. It is unstyled, unpaged, and the font is Times New Roman.

I can never get past the fourth paragraph.

Most of us stop in the middle of our writing to see how our words read (You don’t?! Then what are you doing here? This blog is for writers!). But have you ever stopped to consider how your words look? Typography, whitespace and colour are terms alien to our worn fingers, and rightly so: designers are supposed to be the ones grappling with these elements, aren’t they? Why the hell should us writers think about the way our words look?

There is a simple answer to this: because we have to. As bloggers/blookers we operate little publications of our own, and we’re in charge of every facet of them: how our words read as well as how they look. I’ve talked about how 1st impressions matter on the web, and how this is of particular relevance to blog fiction writers: we have content that is not as accessible to the average online reader, because we are telling a story.

With that out of the way let’s take a look at designs that focus attention on the writing, as well as a few others that wow you but fail to make you read, and one that is just plain impossible.

The New York Times Online

New_York_Times_homepage
Always a good example to start off with, The NYT website (powered by WordPress, no less) has done a great job with its redesign. Stories are divided into bite sized pieces on multiple pages, pictures – when used – boost the impact of the text, and the fonts used are a beautiful, big Georgia. Keep this in mind: typography (fonts) play a big role in determining the accessibility of online writing.

useit.com

useit.com
You must be wondering why I’ve included this ugly monstrosity website to our list of examples. Jakob Nielson is a renowned authority on design and web usability, and his minimalist website reflects his design principles. Think of it like this: if NYT is a pleasing cocktail, useit.com is concentrated fruit syrup. The lack of links and the simple layout actually forces you to read what Nielson wants: his content. No distracting blog roll, and the only non-article links are the navigation at the top and the bottom of the page. It works. Another thing you’d notice about useit is its big Verdana font. Big means easy to read. Verdana looks good. Again, it works.

A List Apart

A List Apart articleA List Apart is a design magazine. Like NYT, ALA’s design gives precedence to the text. The text may not be as big, nor as easy to read, but the cream colour scheme and the smooth lines make for a relaxed (and slightly plain) experience. To make up for that articles are presented with whimsical illustrations by Kevin Cornell, usually to drive home a point the writer is making.

Dooce

dooce.com]Dooce‘s strong point are in its aesthetics. Of all the examples given Dooce is the closest, I feel, to us blookers: I won’t be surprised if she lands herself a book deal very soon. Heather B. Armstrong’s personal blog is read, and read much, because her writing is wonderful. Her design thus plays to her strengths: it’s a real looker, with wonderful colours, visual motifs and a well organized layout to catch the prospective reader’s attention. And once they start reading, they very likely don’t stop.

The above sites share a few points that encourage reading, most of which I’ll cover in Part 2. But let’s take a pause now and go over some designs that don’t. You’ll notice that these sites don’t actually look bad, but content and readability take a beating from all the things going on.

Mika’s Website

MikaMika isn’t a blogger per se – he’s an artiste. This website is his web presence. It’s beautiful, but the problem with it is that there are too many things going on at the same time. Designs like this are more suited for extremely short content, or for showcasing other forms of media besides writing. I’m not likely to read what you’re saying if I’m playing with that little bird in the corner (It poops when you click on it. Seriously).

Scobleizer

scobleizer.pngHere’s an example of a design that will never work for blooks. Scobleizer may be one of the most popular blogs in the known universe, but that’s only because Robert Scoble provides regularly updated, high quality content that matter to the tech masses (specifically independent software developers). He was a Microsoft evangelist. He reads and monitors streams of information fanatically – think of him as an Internet Sauron – and he admits his blog is ugly. But it works, simply because of the nature of his content. Fiction, on the other hand, makes for an emotionally draining read. This design is not going to make readers’ eyeballs happy.

I’m including, for fun, what is called The World’s Worst Website. It showcases all the common mistakes bad designers make when creating a website, but I don’t believe it is of particular relevance to this post. Someone once told me it is hard to make blogs completely unreadable, and anyway the focus of this post is to take a look at some ways blook readability can be upped.

In part 2 I’ll be exploring the common points that help make a blog/blook easier to read – most of it being really simple stuff that doesn’t require much design sense. A last reminder before closing: the easier it is to read your writing, the better that writing has to be. Focusing attention to substandard writing makes no sense – have mercy on our eyeballs.

Possibly Related Posts:

Category: Design · Writing Web Fiction