Site Design for Reading

Site Design for Reading -- sounds like an oxymoron, right? When is the last time you read a 1000+ word article on the web that was just as easy to read as a chapter of a paperback? Never, if you’re like me.

Typical Priorities for Site Design

To be fair, there are many conflicting priorities behind site design. Priorities usually include most of the following:

• Look great
• Draw attention to the brand
• Draw attention to online ads to generate revenue
• Draw attention to other page elements, as needed
• Be sure to include links to affiliates or other parts of the site
• Take care of necessary chores like navigation, RSS, credits, contact information, etc.
• Make it readable

While readability is usually a part of the mix, I suspect it is not usually the top priority for site design. The overall design philosophy which permeates the web seems to encourage skimming and rapid movement through many pages, not lengthy reading and contemplation. The end result of all these competing priorities reminds me of the following hilarious video about packaging design.

Microsoft Design Philosophy Applied to iPod Packaging

The Goal

The site design for FilterJoe is driven by one overriding goal: make it easy to read content. Make reading so easy, that a user with a default browser setting has no temptation to print it out, copy/reformat text, or use some other trick to make it more readable, even if it’s a long article. Make the medium on which the words are written so unnoticeable, that the only thing a reader notices is the content, which he or she can stay with and contemplate. Just like a book. Or at least a lot closer to a book than the typical blog. And it should remain readable on any size screen, any type of device, with any amount of scaling.

The Realization

With thousands of themes in existence, I thought it would be a simple matter to pick an existing theme that had been designed with reading as the top priority.

How wrong I was. I rejected first dozens, then hundreds of potential WordPress themes. With surprise, shock, and dismay, I realized I’d have to design my own theme!

What? Say again?

I Must be Missing Something . . .

The idea of me designing my own theme is crazy. Here’s why:

• Everything I know about design was learned during the past two weeks. Prior to that I knew nothing.
• Surely some blogs are easy to read? Yes, I found some. But all were proprietary, custom designs.
• Starting a free blog using WordPress.com as host is really easy. Going with an independent host and designing your own theme is not so easy if you’re new to this.  Couldn’t any of the 74 themes available on WordPress.com suffice? No.
• Were there any other themes, anywhere, that were close? Yes, I gave serious consideration to a few, especially a number of themes that described themselves as minimalist. However, virtually all of them had white backgrounds for the main content area (including Contemp and Day Dream from wordpress.com which I seriously considered using in order to save myself 10-20 hours of research and 30-50 hours to build a theme). My eyes tire quickly from maximum contrast (black print on bright white background). There were a number of other shortcomings, but the black on white in and of itself was a deal killer.

In the end, I discovered the fantastic Thematic framework, which is the parent theme to my custom designed child theme, FilterJoe.

Blog Design Elements for Easier Reading

After straining my eyes looking at hundreds of themes and websites (and reading about site design), I identified the following elements that contribute to easier reading for me:

General

• Page navigation menus should be just words in a title bar
• Ample white space helps readers focus on content
• Needs to remain readable when scaled up or down using browser commands like control+
• Two column (main text left, sidebar right) makes scaling work better than 3 column (One column design also possible, if navigation can be gracefully handled)
• Outside of the content area, there should be very little clutter (This means no ads, graphics, bright color, boxes, etc. -- only the absolute minimum needed by the user)
• In general, use of color should be restrained (This means no bright colors anywhere, not even traditional uses like the bright orange RSS icon)
• Link color cannot be in high contrast to the background color (Make it easy to continue reading and contemplating without distraction, as opposed to getting lost in an exploratory journey)
• Outside the web page, there should be an unnoticeable bordering color such as gray (This makes it easier to stay focused on reading, especially after hitting the f11 key which causes most browsers to fill up the screen)
• If ads are present, they need to be very unobtrusive

Main Text

• Font: veranda at <=10pt, Ariel or Veranda at >10pt (Among widely installed fonts, these are the most readable)
• Black or very dark text
• Ample line spacing
• Background color a light, neutral color, but not bright white
• No more than 66 characters wide for content, because:
  • Paperback width is 45-65 characters
  • This is conventional typographic wisdom
  • Works well on rotated netbook screens (600px)
  • Works well on cell phones

Sidebar

• Insure sidebar is less noticeable than content
  • dimmer is better
  • perhaps background a different color
  • perhaps no color unless mouse hovers over sidebar
• Bullets or dots or arrows to help see where items start
• Keep as little as possible in this area

Banner

• Banner should both recede from and set off content.
  • Dark color (Blue? Green? Dark Grey?)
  • Slim
  • Site name and tag line in light color
  • No pictures
• Menu needs to be part of the banner.

None of this should be taken as gospel.  It’s just a list of what makes various sites more readable for me, based on careful observation.  I fully expect to stumble across a site that does it far better than FilterJoe, motivating me to overhaul the site interface.

The End Result

Stanza e-book reader on iPhone

Interestingly, the end result is similar to the Stanza e-book reader’s iPhone interface. I didn’t consciously start with that in mind -- but I now see why reading with a dedicated e-book reader on the iPhone is easier than reading on a computer, despite the much smaller screen. The site design of FilterJoe is easy for me to read (though I’m not yet satisfied with the right sidebar interface -- I’d prefer that to be less noticeable). However, it may not be so easy to read for others. So please comment below with both praise and constructive criticism -- the more specific you can be, the better.

What About Other Sites?

While there are quite a few blogs out there that are easy to read -- and I hope this is one of them -- what about the vast majority of sites out there that aren’t? Thankfully, there are 3 very simple steps which make nearly any text heavy web site easy to read. That will be the subject of the next article.