Maximise the Readability of Your Blog –

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:

1. Try increasing the size of the font.
2. Try increasing the line spacing.
3. Write shorter paragraphs.
4. Include images partway through your longer posts.
5. 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:

1. Purely from my own browsing experience, the vast majority of business sites use dark text on a light background.
2. 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:

1. Use a different font.
2. Use a bigger font.
3. Use a different colour.
4. Use a bigger margin.
5. 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:

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:

1. On a smartphone. Got an iPhone or an Android phone? Visit your blog and try to read a post.
2. 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.
3. 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.
4. 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.