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
UPDATE: I stuck with the theme described in this post for nearly 7 years but in December 2015 I switched to the WordPress TwentySixteen theme. The site look and feel has changed only moderately, with responsiveness being the most obvious change. I used many of the principles discussed here to make an already reader-friendly theme even more reader-friendly.
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: Sans Serif Verdana at <=10pt, Ariel or Verdana at >10pt. Among widely installed fonts, default Sans Serif fonts are the most readable on the low resolution screens most people use – FilterJoe uses Sans Serif. This article (backed by tests) describes in depth the best Sans Serif font choices.
- 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
- Allows site to be enlarged (control+) without spilling off the sides of the screen. Appreciated by people various vision issues or who set up monitors further away, as I suggest here.
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
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 is the subject of the next article:
Very good Joe. Although as a graphic designer I have to look at some of those competing priorities, I was taught in all of the design classes I ever took that readability should be way up at the top of the list. One thing you do well in this blog that you don’t mention in your priority list is designate hierarchies clearly. I think your subheads are possibly even a little too large, drawing too much attention and therefore distracting the reader from the body text. But the hierarchy of information is very clear with the entire site overall. I am a big fan of loose line spacing for easy reading – something very few people know how to adjust (usually best using CSS). I still find it strange to get to the bottom of the page and continue to scroll down, wondering what’s down there and not finding anything but blank space…
Thanks for your thoughts, Anita. I noticed on the design of your web site that you make a lot of good choices for readability. It’s amazing how two simple things get a site over half way towards good readability: Dark areas surrounding the content, with a light (but not bright white) area for the content itself.
I made tweaks to the heading styles to slightly reduce font size, and I removed the huge space at the bottom, at your suggestion.
For no reason in particular, I didn’t think to write about the impact of the content style on web design, though I did pay attention to that as well. I got ideas for how to design content from here:
http://www.webcredible.co.uk/user-friendly-resources/web-usability/web-page-readability.shtml
That’s why I chunk up the content. I tend to think in hierarchies so that part comes naturally.
I feel the need to credit the following sites which served as inspiration for the FilterJoe design, so I’ll do it here. It’s roughly in order of how much I was influenced by them:
http://31three.com/weblog/
http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/
http://www.simplebits.com/
http://blog.criticalwebdesign.co.uk/ (not counting the distracting background picture)
http://allancole.com/wordpress/themes/boumatic/ (click on live demo)
webrevolutionary.com/
http://zenhabits.net/ (the way it looked in 2009)
http://j-walkblog.com/
Glad I found your site (by way of the ThemeShaper forum). I just got the Thematic framework theme myself to use to build a church website. When I’m done with the site, I’m going to re-design my blog (using Thematic).
I’ve always been interested in readability and your post(s) has given me some fresh ideas for improving my skill as a blogger / communicator / designer.
I agree with many of your points. And while I’m not professional designer (like you, I do it because it’s part of the communication), here are some of the things that I like in site design …
Readability — post/article divided into easy-to-read sections with good headings; short paragraphs, and posts/articles that aren’t too long. I’d include good writing here as well.
Elegant, Minimalist Design. I like minimalist designs, but I don’t like ugly or boring designs. Even with minimalist designs, they should look good/attractive.
Thanks again!
Excellent work Joe – the research, the writing and the thinking behind it all. With high readability too. In fact I tested and adopted several changes on my blog based on your work and the increased readability I saw. Thanks
I am not a designer, but the above all seems like good advice, and you have come up with a very clean and readable look as a result. (My own attempts at making a design that looks nice to me is similar in many regards; great minds I guess.)
The one area where I don’t completely agree is the part about fonts. You mention two that are “widely installed”, but I have none of them on my system – they are Windows system fonts, right?
I get the default sans-serif font instead, which fortunately is clean and readable since the makers of my browser of choice seem to know what they’re doing, and since you specified “sans-serif” as a second choice.
Windows fonts – except “Veranda” which should presumably rather be “Verdana”. Yes, you have specified a font that doesn’t exist, serving up generic sans to everyone instead – and nobody seems to have noticed! (Yes, I checked the .css file too.)
So my advice on fonts is: Don’t try to be too clever with that. This is one of the things that people can control themselves in the browser settings if it needs to be tweaked, and site designers really shouldn’t muck about with those in that kind of detail unless there are very good reasons to do so.
And now, if you’ll excuse me, I have to go read the rest of the posts.
magetoo – First off – thank you thank you thank you for pointing out my error with fonts. That is a truly long-lasting and embarrassing error and I’m frankly amazed that nobody has every noticed and pointed out this crazy error to me. In my brain, I always think the word “Veranda” when I see the word “Verdana” and that pretty much explains everything.
As my post makes clear, I literally knew zero about design before I started FilterJoe – my site design was based simply on trying to not do what I didn’t like about 99% of web sites. I guess my web fonts didn’t look terrible because I was saved by the default settings of the amazingly well designed Thematic, the parent theme of my customized (and possibly butchered) FilterJoe child theme. And per your comments, it could be that the best thing I can do is nothing (I’ve tested all 5 of the major browsers extensively and FilterJoe fonts never look terrible with each browser’s default font settings).
I’ll look into the details over the next few days and sort out whether or not I want to make any changes. It’s been a while since I did the initial design for this site but if my memory serves me correctly, using Verdana gets gracefully mapped to Geneva on Macs and Arial gets mapped to Helvetica, but I’ll research that point again to make sure. I recently came across a font that I absolutely love called Vollkorn which is available as a Google Web font so maybe this is a time to look into that. But given how little I know about web fonts and web design perhaps I should not mess with what seems to be working.
I’m curious to see what your site looks like (care to share the link?), as I always like to get ideas from clean and readable examples. I’m not too thrilled with the trend in minimalism circles toward all white everything and so little on the page that it’s hard to navigate. But I’ve always thought if I come across something I like way better than my own site, then I’ll likely make changes to FilterJoe.
Thanks again for your feedback. I’m always so thrilled when someone points out any errors and I’ll certainly be taking corrective action (if warranted) on this one.
I don’t have a link to share, unfortunately. What I was referring to is really just experimentation while reading up on CSS/style sheets. If I had something to say perhaps things would be different! :–)
But the basics were similar to here: muted colors, not fully white background, unobtrusive sidebar, dark gray margins, etc. And using lots of serif font, for some reason; I’ll be sure to go easier on that next time.
Regarding Verdana, I’m not sure it gets mapped to specific other fonts in the browser – isn’t this an effect of most “professional” styles enumerating a list of fonts in order of preference, rather? (And using just “sans-serif” gets mapped to “some reasonable font”.)
Anyhow, this place still looks good, and I’m sure any changes in fonts you make will be so smooth I won’t even notice.
Very interesting that through tinkering you came up with a similar site design. I haven’t come across anything more similar to my site than what you’ve described (though I did get specific elements and design ideas from a half dozen different web sites). I would love to see this kind of design become popular as then I wouldn’t have to use an extra click so often in order to be able to read (see http://www.filterjoe.com/2009/03/25/filters-for-reading-on-the-web/ and note that you can use the readable bookmarklet to make any web page look almost identical to my blog style – it’s got the “Joe Golton color theme”).
Here’s a somewhat dated but probably still accurate list of pre-installed Windows and Mac fonts:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
And the bottom it links to a more detailed explanation of what is pre-installed:
http://www.webbedenvironments.com/css_dhtml_ajax/downloads/BrowserSafeFonts.pdf
It looks like Macs (OS X) have some Microsoft fonts pre-installed, and that is why the fonts I mentioned are referred to as browser-safe fonts. Of course this doesn’t say anything about Linux or ancient systems, but at this point well over 95% of systems in current use would have no problem with the browser-safe fonts suggested in these documents.
Just came across a very readable site design, and description of the thought process behind it:
http://stevelosh.com/blog/2010/09/making-my-site-sing/
I like that his main goal was a site so easy to read that nobody will be tempted to use a readable or readability button to reformat it.
Hi, Joe! Interesting comments you made on the “theme” controversy over at WP. I agree with you on “readability” without distraction. My eyeballs are tired of being inundated while I’m trying to READ (sorry, didn’t mean to shout…) and/or write. (E-mail is particularly horrendous with “flashing credit score ads” and the like vying for attention at the top of the screen.)
My teeny-tiny blog is far from perfect, but I’m mindful of “how it reads” (and where things fall visually), to the best of my limited technological know-how and the limits of the theme itself. (Of course I indulge three penchants in one blog — writing, cooking and photography — which is a big “no no” in a world bent on “focus,” but it suits my random lifestyle and I try not to overwhelm my readers with too much randomness. 🙂
Thanks for offering these distraction-free alternatives. If I ever make the leap to “just writing,” I’ll keep your site in mind!
P.S. The ipod packaging video was a HOOT!
A couple people from Hacker News (Terretta, wingo) pointed out to me today that the line heights on my lists and comment area were too small, making it feel cramped. So I increased the line height. Nice description of the concept of “vertical rhythm” here:
http://www.sitepoint.com/typography-baseline-rhythm-deciphered/
And a calculator for it here:
http://topfunky.com/baseline-rhythm-calculator/
Hi Joe,
I just installed Readability on my Firefox browser. Great application – thanks for recommending it!
That’s actually what I’d like for my theme . . . that once you click on a post it opens into this kind of clutter free, easy-to-read format. I see that it’s something that WordPress has built into their Twenty Eleven theme.
Thanks again for commenting on my post the other day!
Regards,
Lisa.
Kimby and Lisa – great to see all the interest lately in choosing appropriate themes for a site, and considering readability in the mix. I didn’t realize that WordPress now has the “readability” button built into one of their themes, and a prominent one at that (Twenty Elven). That is very cool and I appreciate your mentioning that. If that gets widely adopted, then perhaps an emphasis on readability in web design will get redundant as people will get used to clicking on the readability button.
For anyone who’s interested, Lisa’s post does a great job of discussing some of the more interesting themes at wordpress.com:
http://notesfromafrica.wordpress.com/2011/07/11/my-quest-for-the-ultimate-wordpress-theme/