On Blogging Australia

Following on the trail of A is for Akismet, B is for Blogging Platform, and C is for Content, this post is about blog design - layout, colour, and styles. It not only draws on 18 months of blogging but 12 years of user centered design.

But first… the bottom line
Let’s be a little lateral and cut straight to the chase - the bottom line to me is this:

It doesn’t matter how wonderful your PhotoShop or CSS skills are - anything that gets in the way of your readers reading your blog is your enemy and theirs - and you should start and end blog design by crippling anything that gets in the way.

Holy cow, Andrew, isn’t that a little bit harsh?

Yes, it is harsh, but no-one is going to admire your fancy theme if they can’t read your posts.

Layout
How does layout help or hinder blog readability? There are a couple of things to keep in mind:

• Context is king: clear titles, meaningful navigation and identifiable sub-headings let your readers know where they are, and what they are looking at. They probably won’t always come into your blog at the home page - they need to know which blog they are reading, what the subject matter contains, and how to get more information if they want it.
• Use the power of visual hierarchy: clear visual hierarchy is a fancy way of saying “make the important stuff stand out”. Following on from the last point, ‘clear titles’ means that (a) all headings stand out, (b) they are usually but not always larger than the surrounding text, and (c) the ads or anything else are not the biggest visual elements on the page.

One print layout trick I use is to view the blog from across the room - without reading the titles, can you see where the main blog heading, article titles and subtitles are in the page?

Colour
Does colour matter? Absolutely - if it gets in the way. I’m a bugger for dropping people in the cack without talking with them first, so I won’t name names, but there are some truly ugly blog themes out there.

Without sufficient contrast, colours can make text almost impossible to read. Try green text on a red background (or worse, dark grey on black) and you’ll see what I mean. The World Wide Web Consortium (w3.org) sets guidelines for minimum colour contrast - the following is from the CSS Techniques for Web Content Accessibility Guidelines 1.0:

Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

Try to put yourself in the shoes of someone who has a smaller monitor than you, or poorer eyesight, or a black and white screen.

Styles
Styles can be set using CSS. Here’s what I wrote about it in WordPress Theme Editing: The Actual Coding:

Changing your theme’s CSS is the easiest way to affect the look and feel. CSS controls a lot - when fully utilised it controls the size, colour, position, text style, mouse over behaviour, you name it, of every visible part of your blog.

This is an example of a single element taken from the style.css file for this blog:

body {
background: #CCFFCC;
color: #545454;
padding: 13px 0 25px 0;
}

It started out life looking like this:

body {
background: #3c3c3c;
color: #545454;
padding: 13px 0 25px 0;
}

What did I change? Basically all I did was change one of the colours - the background went from a shade of grey (#3c3c3c) to a shade of green (#CCFFCC). You can do this, save your work (through the Update File button on Dashboard > Presentation > Themes) and have a look at your blog to see what has changed.

Aussies please note: most coding languages were developed by people who couldn’t spell - a common error for Australian beginners is to spell “color” as “colour” and “center” as “centre”

Here is how you can start playing with CSS:

1. Read about surviving the process
2. In your WordPress blog, go to Dashboard > Presentation > Theme Editor and find your stylesheet (it is probably called Stylesheet inside WordPress but is actually a file called style.css)
3. Look for something that you recognise - a heading style, a page background, a sidebar style - and change it. Look at the result - is it what you wanted? If not, change it again, and check the result.
4. When you are confident that you know what you are changing (and how to change it back!), play by changing a lot of different elements. Check constantly so that you are changing the things that you think you are - and in this way, you will come to ‘master’ that particular theme.

To learn more (because there is a heck of a lot more to it than that):

• Flick through the colorlab colour wheel at Visibone,
• Check out the W3Schools beginning CSS tutorial, (it has a good explanation of the theory behind CSS) and
• Look at the CSSTutorial.net CSS tutorial that has some good practical examples.

Conclusion
There is more to blogging life than design considerations - but please consider this: it is hard enough to get and keep readers - if your blog design is getting in the way, then you will annoy some people enough that they will leave immediately and never return.