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
  • Pingback: Ghillie Suits » Design: Improving Readibility Without Lifting A Pencil (Part 1)

  • http://gadgit.vox.com/ ed-infinitum

    An interesting article indeed.

    I’ve often spoken about this to my acquaintances – with regards to taking into consideration the information processing-friendly factor, IPF.

    This does not refer to styles of writing and content as to make these IPF these days require that one throw out half the intellectual content, poetical forms, relatively novel concepts and paradigms, and make sentences bart-friendly. On top of this, it requires a non-westerner to discard her/is culturally nourished ways of communicating and ‘think and speak like the white man because you are communicating in his tongue. Thus, relatively unusual ways of communicating, by frequent recourse to analogies, poetical forms, rhymes, proverbs – that are quite the norm amongst, say, the indians in south india, are discarded for the dispassionate and clinical style of the west – a style of communication that stifles thought in other forms.

    What i refer to by IPF is, amongst others, spacing between paragraphs and lines, emboldening the first few words of each paragraph to catch the attention of the reader whose finger might be hovering irresolutely over the ‘click-away’ button, summarising the article with a quote at the top to give the reader a formula with which s/he might make sense of the content, etc, etc.

    The useit.com site is interesting. It is a site that is for the true ‘information-processor’ as opposed to the ‘entertainment-imbiber’. Sites geared for the former assumes the intelligence of the reader, whilst sites structured for the latter attempts to circumvent the attention-span-deficit, amongst other deficits, suffered by those reared within the auspices of ‘click-culture’.

    Finally, efforts need to be made to define the term, ‘blogger’. A ‘blogger’ is as descriptive as ‘a person who uses a pen’, or, ‘is able to communicate’. If this is not done, then the masses of impressionable minds that are joining in the blogging world are going to take their ideal selves as that which is most lauded amongst bloggers, or that which is the ‘trend’. Thus, their tendency to be other than that which is applauded is undermined.

    Interesting article. Thank you.

    ed

  • http://www.novelr.com Eli James

    You’re welcomed, ed. You’ve just summed up my thoughts on the matter, quite eloquently, in one comment. That’s just friggin amazing.

    I particularly enjoyed what you said about language being inhibited by the nature of the web – I haven’t given much thought to Indians writing on the Internet and how they differ from the ‘clinical’ English we get everywhere. But thinking about it made me realize how true that statement was: some Indian blogs I came across used language that felt … weird. Beautiful, but weird. They translated poems quite literally from their mother tongue, and some of the beauty was lost, but certainly not the effect.

    The useit.com is controversial. Some designers exhalt it, others damn it. Either way it’s going to stay: Jakob Nielson is very happy with how it looks and reads.

    Ed, your point about defining what bloggers are shouldn’t be that much of an issue. Spending time reading blogs and absorbing influences will slowly shape their blogging style, so the danger of being ‘what is applauded’ may be present, but it will/should dissapear within the person over time.

    Readers can tell when we’re not writing from the heart.

    PS: Is ITF a term of your own invention? It describes the situation pretty well!

  • http://blooking.blogspot.com Cheryl Hagedorn

    Just a link about Dooce’s Dilemma. She had her chance.

  • http://www.novelr.com Eli James

    Cheryl, if I’m not mistaken Heather is currently working on a book. Read about it a few weeks ago, lemme find the link and I’ll get back to you shortly.

    Edit: Can’t find the link. Owh well! Thanks for the link, and the update. :)

  • Pingback: JPS/fact » Blog Archive » I'm Not There.

  • http://www.webmonkey.com/user/profile/Squirt germeags

    Thanks !

  • http://www.novelr.com Eli James

    You’re welcomed!

  • Pingback: Need to be a Genius to Comprehend Skillful Means? « Skillful Means

  • Pingback: JPS/Fact » Blog Archive » I’m Not There.

  • Pingback: NGUY CƠ DÍNH VIRUS TỪ CÁC TRANG WEB TRÊN INTERNET « vanht