Designing for readability - a priority if you want to be read

Update: this whole post was a precursor to the redesign of our own blog. You can read more about the resulting redesign here.

We write content all the time that we really hope you won’t read. Don’t bother reading the testimonials - click on the button:

Don't read the testimonial, enroll instead

Other times, though, we reallyreally want you to read what we’re writing. Like now, for example. The primary goal of most blog posts is to be read (closely followed by shared). When I’m writing blog posts, I’m hoping to engage you through to the end. I’m hoping you will get enough genuine value that you share it with others, I’m hoping that you might subscribe in one way or another or join our community. And yet, too often, we create sub-par reading experiences.

I’m increasingly of the opinion that all pages designed to contain long-form copy that is supposed to be read should be designed with readability as the #1 priority. That wasn’t our own approach when we built this site. We focussed first on the brand:

Distilled homepage

And then on branding consistency extending to the blog:

Annotated blog post

In the process, we ended up with a relatively small content window, a plethora of distractions from the copy and a format in which it is relatively hard to make consistently beautiful posts. It’s a familiar story, and one that is no doubt repeated at businesses of all sizes throughout the world. It’s about at this point that I should emphasise that I don’t believe this is typically designers’ faults (it certainly wasn’t in our case). The buck stops with management (or with you, if you’re an SEO advising management).

Well, I’m learning my lesson. I’m working on a new brief for a blog redesign that will have a single over-riding priority: readability.

There will be some ability to share the post, but only discreetly - available if you want it. Likewise main navigation and other distractions. In the traditions of the lean startup, I have a hypothesis:

Making readability the primary focus of our blog will result in measurably higher engagement (time on site, pages per visit) and sharing will increase such that we will see an increase in visitors to the blog as a whole

In order to create this brief, I have been delving into what the experts say leads to the most readable pages on the web. I’m going to run through some examples of pages that work really well for reading and end with a checklist:

Instapaper - the readability experts

I use instapaper to save articles to read later. I love the readability and I also love the ability to send new articles automatically to my Kindle every week so this was where I started in my search for readability. This post on allthingsd is so easy to read on Instapaper:

I started with instapaper


The print version of the New York magazine

While the main version of New York magazine articles is also readable, I actually really prefer the printable version:

NY magazine print version


Forbes does remarkably well

A few too many share buttons, perhaps, but the recent Forbes redesign has made for a much more reader-friendly experience (if you can ignore the interstitial ad):

Forbes readability


Too few media sites get design, FastCoDesign is an outlier

Unsurprisingly, FastCoDesign excels with a fantastic combination of readability and visual display:

fastcodesign excels


I’ve also been impressed with Kernel mag’s readability

Whatever your opinion of their controversial journalistic style, there’s no doubt it’s easy to read:

kernelmag


A readability checklist

I am trying to take a two-pronged approach to my briefs and recommendations these days - to show and tell. Partly this is to ensure my recommendations or requirements are comprehensible to all different kinds of communicator and partly it’s to ensure that my thinking is clear and consistent in my own mind. So after collating the examples of what readability means to me, I went in search of the rules. I found a few (thanks information architects), added some of my own and came up with the following - feel free to re-use this if you are briefing a readable design:

  • Is the font big enough? (information architects recommends 100% - i.e. the browser default size)
  • Do the column widths allow for around 10-15 words per line?
  • Are the lines spaced widely enough? (information architects recommends 140% leading)
  • Is it high contrast without glare? (information architects benchmark: #333 on #fff)
  • Is it left-aligned? (the eye is drawn back to the flat left-hand side)
  • Is there a larger gap between paragraphs than between lines?
  • Is the amount of clutter minimised as far as possible?
  • Are fonts kept to a minimum? (ideally no more than 2, max 3)
  • Does it stay readable on mobile devices? (for example I recently found this excellent post totally refused to scroll on my Android touch-screen-based browser)

What have I forgotten? I’d love to add more readability items to my checklist and support Information Architects’ 100E2R. And I’d love to see more SEOs recommending a readable design as part of their blogging and news site strategies - hit me up in the comments.

Will Critchlow

Will Critchlow

Will founded Distilled with Duncan in 2005. Since then, he has consulted with some of the world’s largest organisations and most famous websites, spoken at most major industry events and regularly appeared in local and national press. Will is part...   read more

Get blog posts via email

17 Comments

  1. Hi Will. I think the last point is very important, especially as we progress away from desktops and on to tablets and mobiles. Responsive design is key for readability (and Google's preferred way of showing mobile sites), and so many sites render badly on mobiles. Ideally you should have a site that scales no matter the device or screen size.

    It's something we spent a lot of time on in our redesign. It's tough as you have to design a site for three sizes (at least). We started with the least possible content, then built upwards and it was a more important factor for the overall design than anything else. It's the feature that we get the most positive feedback on.

    reply >
  2. I think of readability as something that extends to all parts of a site instead of just the blog. I can think of numerous instances where, despite great content, I've struggled to read the copy on a site and then leave.

    I had a friend in college who was a psychology major and actually wrote a paper about the neuroscience behind what makes websites readable. I'll have to see if she still has that paper tucked away somewhere.

    I know in my own experience, the typography and COLOR, and white space (which I consider to be part of user experience--not overpowered by ads, etc), are the factors that influence me the most.

    While we're on the subject, The New Yorker online is very uncomfortable to read.

    reply >
  3. Jessica Obermayer

    Excellent post: I've seen more focus lately on organizing content an key messaging components in a hyper-clean design with appropriate white space. Your post lays it out in dome nice detail.

    For me, readability is about white space, a legible and clean font of adequate size, and being able to red the entire article easily on a mobile device.

    Most sites #fail on one of these core elements. Like recent research indicates, I'm one of many who will not go to certain sites any longer from a mobile device - and that includes from my iPad.

    As I prepare to overhaul one of my sites, I appreciate the info you've provided.

    reply >
  4. Great overview. Honestly, this is something that I didn't have very much of a background in but have quickly come to value as crucial to the success of a business. One big point that I might add to your list is resisting the urge to use too many lines/boxes. The best websites don't rely on visual, brute-force tables/lines/boxes to build structure but rather create it through strategic section placement, color coordination and contrast, proper use of proportions, and leveraging the idea that users follow visual cues (for websites, this means going from top left to top right, up to down).

    I would also recommend one of my favorite books on the matter, "design for hackers" to anyone (particularly coming from a Comp Sci background) who wants to get started in the world of design. If anyone wants to add to this, I always love to hear more about design!

    reply >
  5. Hi Will,

    Excellent article, This is a great article. You have explained the right things that designing should be good and your blog should have a good design so that users can read it !

    I would say that giving reference is the best way to make your design looks better !

    Thank you

    Rick

    reply >
  6. Really interesting blog post and like the check list. Would be nice to have had a handy little printable version of it! Looking forward to seeing the redesign of the blog you talk about at the beginning. Thanks again!

    reply >
  7. Great insight. I found myself on forbes a few times lately and noticed the clean layout but never gave it much though. Good luck with your redsign!

    What have I forgotten?

    Maybe mention they may want to keep their links to a minimum. I was just on a blog that probably had 20 links in their post. It was an instant turn-off and a big distraction.

    reply >
  8. Hi Will,

    Excellent post. I would say that if you have a good design and good look for your blog, your user will come to you automatically. If you have a good design then you can convert your blog reader and users into sales.
    A good blog should have a nice and clean design so that it looks good to eyes and attract readers and urge them to contact the owner. It would be better if there is some call to action in your designs.

    Thank you

    reply >
  9. Will,

    Have you seen the golden ratio of typography by Chris Pearson:

    http://www.pearsonified.com/2011/12/golden-ratio-typography.php

    I'd be interested to know if his tool meets your readability goals.

    Al.

    reply >
  10. Hi Will

    Interesting article with some good points. I think this also highlights the need for better typesetting online. Coming from a print background with lots of book and magazine design experience I am really old school with typesetting rules and how they attribute to legibility. We do have a great deal of limitation when publishing copy online compared to in print but basic design rules can make a huge difference. I am pleased you mention limiting fonts because I think that limiting your design makes it better - especially with colours and clutter - use white space to place emphasis on the content.

    Now that content is becoming the focus of our campaigns more investment is needed in the design and layout of pages. I wrote about recently which makes a similar point to yourself that good design is an essential part of information communication and our content has to rise above the noise to be seen before it is even read.

    Am I the only person the doesn't like the FastCo design? I find it too cluttered, slow to load and the main image area too large and distracting from the content.

    Alistair: The Golden Ratio principles that Chris Pearson talks about are historically classical and applicable to static design but his typography calculator is a little gimmicky and taken out of context; it would be a near impossible to apply to responsive web design pages which are seen in so many different sizes.

    Shelli

    reply >
    • Sorry didnt come out right above (I should know better!):

      Now that content is becoming the focus of our campaigns more investment is needed in the design and layout of pages. I wrote about
      How Design Matters to SEO recently which makes a similar point to yourself that good design is an essential part of information communication and our content has to rise above the noise to be seen before it is even read.

  11. Will Critchlow

    Thanks for the links guys.

    @Shelli - I saw your article on twitter as well - thanks for sharing.

    @Alistair - I hadn't seen that article. Typography is a dark art to me - so I found it fascinating. Thanks.

    reply >
  12. I'll stick to 100E2R advises for my next website, but still the size is so much bigger compared to what we're use to see on the web!!
    Great article!

    reply >
  13. Jim

    This is a great article that exemplifies some of the issues you raise. All of us SEO people know that Google favors lots of content - like this article - but realistically how is all that information suited to an iPhone user or even a tablet user? I don't think it is! I've also written about the juxtaposition of design and SEO. I think changes at Google this year are against smartphone usage as well as Twitter etc. I like Alistair Lattimore's link also. It's an interesting read... but not on my smartphone!

    reply >
  14. Great intro to your blog redesign, Will. I wondered why you didn't chose to max out on contrast, black copy on white canvas?

    reply >
    • Will Critchlow

      Hi Jacob. The 100E2R talks a little bit about this - slight off-black and off-white is apparently easier on the eyes and easier to read.

  15. Thanks Will. Got to the end of 100E2R-article "...as the text starts to flicker." Great insights.

    reply >

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>