Is your blog design helping or hindering the readability of your posts?
Text Concentration
If you regularly publish posts containing large blocks of text, you’re making life difficult for readers. The more text you cram into a small space, the more likely it is that readers will lose their place.
Breaking up your text concentration is fairly easy to do:
- Try increasing the size of the font.
- Try increasing the line spacing.
- Write shorter paragraphs.
- Include images partway through your longer posts.
- Split very long posts into a series, or put them into an eBook.
Line Length
Long lines can be difficult to read. A long line may be due to the width of your content area, or the length of your sentences.
On a wide screen, if a reader maximises their browser, does your text expand to fill the entire width? If so, that line’s going to be difficult to read.
How long are your sentences? Do you use a lot of commas, create a lot of run-on sentences, and avoid ending the sentence at all costs, similar to what I’m demonstrating here?
This doesn’t help readability. Keep your lines short and to the point.
Contrast between Foreground (Text) and Background Colours
Choosing colours that go well together will not only make your blog look good, it’ll aid anyone who is trying to read your content.
Opinion seems to be fairly divided in terms of whether to go with dark text on a light background, or light text on a dark background – there are readers on both sides of the fence. I’m partial to dark text on a light background.
Points to be aware of:
- Purely from my own browsing experience, the vast majority of business sites use dark text on a light background.
- High contrast is the key. So for instance, dark grey text on a black background is really difficult to read. Avoid red/green colour combinations, as they may not be legible for colour-blind readers.
Contrast between Headings and Body Text
Separating your content with subheadings is a good way to break up what would otherwise be a large wall of text.
However, it works better if you style your headings and subheadings differently to your body text. Here’s what I do at QBT to differentiate headings/subheadings and body text:
- Use a different font.
- Use a bigger font.
- Use a different colour.
- Use a bigger margin.
- Use a subtle border. (See the line that goes above each subheading?)
Use of Special Formatting
Are you using bold and italic styling in your posts? It’s easy to get carried away and over-format your posts, or conversely, to forget to use bold and italic at all.
Trying to make too many things stand out will make your posts look unprofessional, and won’t help readers to zero in on the good stuff.
Bolding a key message in your post will make it stand out. Bolding too much of your post will have the opposite effect.
Using special formatting for quotes can look awesome, but once again, don’t overdo it.
Avoid underlined text at all costs, as it looks like a link. Only use underlined text on the web if you’re actually displaying a link.
Link Scattering
Sometimes it’s helpful to include a link or two if you’re covering an intermediate or advanced topic and you don’t want to spend time explaining the simple stuff. Or if you’re using an external source to back up your argument.
But if you go crazy and scatter lots of links throughout your posts, it looks like you’re saying this:
Don’t bother reading this post. Go read those other posts. I can’t be bothered explaining myself when these guys do such a good job of it.
By all means link to stuff when it’s helpful. Just bear in mind that if you throw a few links in the middle of a paragraph, it really disrupts the flow and may send readers elsewhere.
Instead of link scattering, try listing your links at the end of the post. In this post, I’ve done exactly that.
Test, Test, Test
How do you usually read your blog? In Firefox, on your Windows desktop PC? In Safari, on your Macbook Pro? In Chrome, on the latest version of Ubuntu?
That’s already three different ways to read your blog – many more if you mix and match the various browsers and operating systems, throw in other browsers, screen size and resolution, browser versions, operating system versions and so on.
Here are some of the more eye-opening ways to try reading your blog – observe how your blog displays under the following circumstances:
- On a smartphone. Got an iPhone or an Android phone? Visit your blog and try to read a post.
- On a tablet. Whether it’s the Google Nexus 7, Samsung Galaxy Tab 8.9, Kindle Fire HD, or the iPad, your reading experience may be quite different to that of a big screen PC or Mac.
- In Google Reader. Your blog theme isn’t carried across to a feed reader, so you’re left with a bare bones post. This is a good way to see if you’re formatting your headings, paragraphs and lists correctly.
- With CSS turned off. This is an extreme approach but is a good way to see how your blog looks if the CSS fails to load. In Firefox, press the ALT key to make the menubar appear. Then go to View – Page Style – No style. Make sure to repeat the process and change it back to “screen” when you’re done.
Further reading:
- Designing for People with Partial Sight
- Essential Colour Checklists For Web Design
- Why light text on dark background is a bad idea
- Tips for Making Print More Readable
Discussion
How readable is your blog? I’d like to rate your blog’s readability and give you a few tips to improve it. If you’d like to take me up on this offer, simply comment with your blog URL and let me know that’s why you’re commenting. I’ll then reply with a rating and some tips.
Footnote: An Alternative?
Having written this post, I just discovered Readability. It popped up on a Guardian article. Now that might be an interesting tool to check out. Have you tried it? What do you think?
QBT Season 2 continues every Monday at 5pm GMT / 12pm EST / 9am PST.
Excellent post! This is full of great points and really, really useful. I took a chance moving to white on black for my Addicted to Media blog but I thought they overall theme looked better and more in keeping with the topics on the blog. I like your font on this blog, which font is it?
Recent post: Arc & Stones: Interview With Dan Pellarin and Ben Cramer
Hi Emm
Thank you! It took a bit longer to write this post, but I think it was worth the extra effort. I like the look of your blog, but unfortunately I find it quite hard to read light text on a dark background. At QBT, I use Arial for the body text, and Tahoma for the headers. 
That’s great advice Ben. I have tested many different things, but I haven’t asked my readers for what they enjoy the best. So it’s more or less what I enjoy
What I ended up doing was increasing the font size, and I am adding images to every post, and I try to add no more than one link in each paragraph. That’s about it 
Recent post: What is search engine marketing
Thanks Jens
Sounds like you’re on the right track. 
Excellent advice thank you, before following through though I’d appreciate some pointers on my blog. I know there’s a lot of room for improvement.
Recent post: How to Use Social Media for Charity Promotion
Hi Lisa
Welcome to QBT! The first thing I notice is a weird string of characters at the top of your blog – “tEVlgjGv-_t-D5e-vk-19C1gC_s” – that is a bit odd and should be removed.
I don’t know why but your blog seems to load quite slowly – it takes 10-20 seconds to load each page fully.
On the homepage, your right sidebar is longer than the content. The newsletter box (top of the right sidebar) could be condensed so it uses up less space. The Google ad (under the Pinterest button) is coming up blank for me. The Twitter box might be better as a button – I find that recent tweets aren’t all that useful to display on your blog. Also, the black/green colour scheme doesn’t match your blog. Then, with the 3 ads at the bottom, I’d recommend reducing this to 1 or 2 ads unless you’re getting a lot of money from the ads.
The “Related Posts” box under each post sometimes has several posts with your profile photo. I think this is because you don’t have images for those posts. Try using images for all of your posts – it makes the Related Posts box stand out a lot more.
I clicked through a few of your posts and found a lot of guest posts with paid links at the end. Examples:
http://www.liza-shaw.com/social-mediawhat/ (note the link “SEO in Bath”)
http://www.liza-shaw.com/social-media-charity-promotion/ (note the link “Mater Prize Home”)
http://www.liza-shaw.com/email-marketing-place/ (note the link “Exact Target UK”)
http://www.liza-shaw.com/top-tips-launching-successful-blog/ (“VPS hosting”)
All of these links feel incredibly spammy. On my blogs, I would never publish posts with a keyword link at the end.
I don’t know how many guest posts you’re publishing, but you seem to be putting up one post every day and a lot of them are guest posts. I’d recommend posting 2-3 times per week, and focusing on writing original content and making guest posts less frequent.
The readability varies from one post to the next. Some posts use long paragraphs and no subheadings. Such as this: http://www.liza-shaw.com/social-mediawhat/
This one is better: http://www.liza-shaw.com/top-tips-launching-successful-blog/
That’s all for now.
Hmm as I said there’s a lot of room for improvement.
The letters at top of screen are a pain and I’m yet to figure out why,what and how. Been there couple days for no apparent reason that I’ve been able to figure out.
The sign up box, is the smallest I can get it – its an aweber form and it wont let me change height, only width.
I’m not sure why the blog loads slow for you, I ran it through a few speed tests, inc. googles and load time came up below 5 secs. Just got a couple of other peeps to check load speed and they all telling me its fine.
I see your point re the ads, in side bar I’ll put them in 1 rotator so only 1 shows, and remove the google box. hadn’t noticed that till you mentioned it. That should also make the sidebar shorter.
I’ll also swap out Twitter for a button.
I see what your saying regarding the pics – or lack off, I am going through my old posts and adding pics and rewriting some of the rubbish. Thats taking a while – Hence the use of guest bloggers, keeping fresh content flowing.
Although – since using guest posts and publishing daily my visitors have increased 10 fold, so maybe its personal opinion. Here are this weeks analytics-
Bounce – 12.61%
Exit – 33%
Returning visitors – 49.61%
new visitors – 50.39%
page views – 3.03
length of visit – 00:04:34
Thanks for your feedback though, its very much appreciated and will be acted on over next 24-48 hrs.
Can I ask you though to please use links that open in a new window please. Its frustrating keep going off site every 2 mins, and can’t be doing your bounce rate any good.
Recent post: So I’m On Social Media…What Now?
Quick tip: you can use CTRL+click to open any link in a new window. I don’t use a lot of links in my posts so my bounce rate is unlikely to be affected by that point.
Whether or not to open links in a new window is a much wider discussion though, and something I can’t easily answer in a comment. But it does give me an idea for my next blog post. I’d be interested to hear your views when the post goes up on Monday. Thanks for the idea
hey Ben,
providing eye candy for the reader is a must to increase time spent on the site and page views – this gives users a pleasing reading experience, and they’ll come back for more
P.S. Here’s the website link to my partners’ blog (Codrut)
http://www.CodrutTurcanu.com
I plan to create a new design for my blog, and when it comes to readability it’ll somehow mimic Codrut’s layout and font… do you have any tips for that?
Recent post: Why You Should Consider Outsourcing Your Search Engine Optimization…
Hi John
Looking at Codrut’s blog, the readability is generally fine. However, I wouldn’t recommend displaying the full contents of the latest post on the homepage. Instead I would suggest using an excerpt or the “read more” tag.
I’m not all that keen on the theme, if I’m honest. When viewing a post, the font size for the post title is far too big. Also, the long posts (such as the latest one) would benefit from having subheaders, and additional images (not just the one at the top).
Why are comments disabled? Where is the call to action at the end of the post? There’s a suggestion to share the post but no share buttons.
Hope these suggestions help.
Great one, Ben!
Thanks for the reference to readability.com, you just made my day!
As you know, I am always open to improving readability of my blog. I have made a couple of posts focused on that subject matter on my blog, but I am still open to new ideas.
Ha ha, don’t bother reading this post indeed! Now that you mention it, I can see how too many links can become a distraction.
Learning everyday….
Recent post: Streamline Your Blogging With Front End Editing
Hi Yeremi
Yes, I particularly want to let other bloggers know about scattering links throughout their posts. I see it so much and it’s so distracting! There’s a time and a place where it works, but most of the time it means I don’t finish reading the post I’m on.
Hey Ben, Very interesting insights into blog or website readability. I love the way you have presented the information. I probably have to take a look at my blog design. Hey question, have you checked the news sites, they never have any of what you mentioned? Would like to know your opinion.
Recent post: Scribe SEO Review: An Unbiased Review of Copyblogger’s Content Marketing Tool
Hi Eddie
Welcome to QBT! I did think about news sits not being very well laid out. But when I went to research some sites, I found that they are looking better than they might have when I first formed that view.
Check out Techcrunch, Mashable, Readwrite, BBC News, The Huffington Post, New York Times… most of these have pretty good readability on their article pages. CNN.com wasn’t so good – the content is very narrow and often goes a long way down the page with no headers, and often long paragraphs.
Which news sites do you think have poor readability?
chicagotribune, and NYT for example. I know you mentioned some tech new sites or blog. Even those if you had taken a look a while back, you would say about the readability being bad. Most of those sites have had some really good design change.
Recent post: How To Increase Website Speed If Powered By WordPress
Oh boy Ben I just did a post with quite a few links
I hope it doesn’t distract the readers too much. I like to seperate paragraphs too but I like how you do it with rule line in between, very nice! I haven’t tried using different color fonts along the way yet. That would be fun to play around with and see the results. I agree with you on CNN they need to improve their website so you can find things easier and the text should be larger.
Recent post: Alexa Ranking Dropping Like A Meteroite To Earth
Hi Lisa
I think your post is probably one that would be difficult to do without so many links. Although it wasn’t a link love post, the part where you link to all those blogs is similar to a link love post in some ways. Maybe this is one case where it’s better to link in a new window? (See how I tie the topics together… lol) 
Hi, Ben!
Are you still doing the blog reviews? I’d love to have your feedback on mine! I appreciated the tips in this article.
Recent post: Review: The Practice Effect
Hi Anna
I’m not doing blog reviews anymore, but there are plenty of tips you might find useful on the blog. If you like the Facebook page, you’ll know when new posts come out and also when I organise some of the posts into digestible chunks 
Hi, this is a really helpful post – especially the bit about writing in bold! I skipped a bit and went straight for the bit in bold which highlights the point!
Could you take a look at my blog and let me know what you think? I get quite a lot of page views but it seems from google analytics that people don’t stay on my site for very long! Any tips?
Any that doesn’t work so well or is really unappealing?
Thanks! Becky
Recent post: A sixties retro wedding!
Hi Becky
Welcome to QBT! Thanks for stopping by. I think the blog looks fine, you’ve used plenty of pictures (but not too many) and your writing style is readable and friendly.
Personal preference but I always find it a little overwhelming to see entire posts on the front page of a blog. If you go to the homepage of my blog, you’ll see I have very little other than a title, image and intro for each post. This helps readers to get a general idea of what I’ve been writing about recently. I don’t know how to do that in Blogger, as I use WordPress – although to be honest, you’ll probably find plenty of people who aren’t bothered about this point at all
So it may not make any difference to the time people spend on your blog.
A couple of suggestions then:
but I do think “fashion and lifestyle” is maybe a bit too broad. Try to refine it a little.
1. Choose a couple of things you’d like to write about and try to focus all your efforts on those areas. I don’t think you’re far off, but as an example, a fashion blog that focuses mostly on nail polish or hairstyles might be a little easier to promote. I’m a guy and probably not a huge amount of help here
2. Once you’ve figured that part out, make it very clear to readers that’s what your blog is about. It could be as simple as updating your tagline or writing a bit more about the purpose of your blog on your About page. I definitely think it’s good to write about who you are – just maybe have two sections on your About page, one about your blog and one about you.
Small point: you say you’re living on the south coast. I didn’t know if you meant England or somewhere else
You do clarify this on Twitter. I’m in London so not too far away. Nice to meet another UK-based blogger.
Hope some of this is useful. As this is getting quite long feel free to drop me an email if you’d like to talk more. There’s a contact link at the top of the page