With web design, and thus blog design, I think the concept of “less is more”, and particularly, the use of White Space is horribly neglected.
Often I find commercial, professional blogs to be cluttered, and difficult to read due to ads, gimmicks, extraneous navigation and other confusing, real-estate-hogging extras. And the thing is, you’re ads and navigation could actually work much better when designed with simplicity in mind.
Professional Designers Know about White Space
I was going to write a story today titled “10 Signs of a Professional Blog”, to follow the hotly debated 10 signs of a cheap blog. But as i wrote the list, i realized I’d cross over on that first list far too much, so instead i’ll take the opportunity to talk about a few of the things i think make a blogs design strike the right chord, one by one.
Professional designers know all about this stuff, and I should say up front, that I’m not one. I do like the subject though, and think i have something worthwhile to say on it, so with that pinch of salt added, read on.
What is White Space?
It’s exactly what it says, white space, though if the background of your site isn’t white, it could be blue space, or yellow space. It’s unused space in your blog design. Though it can be very, very hard to not use space, and even harder to not use space in such a way that it enhances your site, and makes it more usable and professional looking.
Some Examples Of Blogs I Like Using White Space Well
Signal vs Noise
Strangley enough, the Signal vs Noise blog pictured here is about design and usability. These guys, makers of all kinds of natty productivity services such as Basecamp, really get the whole idea of white space. Whereas their design isn’t without flaw, at least to me, it’s s pretty good example – there are 2 major elecments to look at on that page, the posts, and the ads – and your eye gets drawn to both.
White Space
With Paul Scrivens’ blog, aptly titled “White Space” there are no ads. This does make the task somewhat easier, just like here at Performancing, but as with Signal vs Noise, you just get that feeling that you’re on a quality site don’t you? Once upon a time I would have scoffed at the very idea of right hand navigation, but like Paul, I’ve come round to the idea when it comes to blogs – it seems to work very well when there’s clear margins between it and the body of the page.
GigaOm
Lastly, Om Malik’s broadband blog which was recently redesigned by the clever chaps over at businesslogs.com – This one is much busier than the other two, and goes to show how you can actually still fit a fair bit of information in when you pay attention to the amount of real estate you have to work with, and where your priorities lie in terms of what users should be seeing.
Im sure there are TONS of great examples out there, those were just a few I found on my personal reading list that I thought could demonstrate the point. Feel free to drop a few examples in the comments.
Show me the Money!
It’s not all asthetics and design snobbery™ though. Good use of white space works wonders with advertising, increasing CTR and drawing the readers eye to those areas of the site that make you money, if done well.
I recently tweaked my time sensitive adsense on one blog to include white space at top and bottom, aswell as put images next to it. The CTR went from an average of 6% to an average of 9 or 10 (it’s too early to say for sure yet..). The images may well have played a large part, and in retrospect i wish i’d made one tweak at a time, but i know the white space is also having an effect.
The unit in question is a large rectangle that sits directly beneath the title of a post. I’ve put 40px between it and the title, and 100px between the bottom and top of the actual post text – (remember, this is only shown on archived posts, not active topics) so the body text is just showing it’s first couple of sentences above the fold.
It seems to work a treat, but i’ll have to give it a month to get a real fix on that CTR average.
Relax
Claire, our resident CSS guru, talked about the calming effects off off-white backgrounds and off-black text over the weekend. She said that a reader may not notice it, but sometimes design choices, such as color can make them feel uncomfortable. I’d say the same thing applies to white space vs cluttered.
The human mind doesn’t like being confused, and as complicated an instrument as it is, it prefers things to be simple, and easy to understand (read).
The same white space principles needn’t be confined to space around elements on the page, or margins either. How about the actual text of your blog? putting a little extra line-height on text can make it very, very slightly easier to read, it’s one of those small details that go together with other things on the page to give an over all impression.
I like about 1.2em on line-height (it’s a CSS property that controls the gap between lines of text). You could do it something like this if your template doesn’t already:
#content {
line-height: 1.2em;
}
Im not here to teach CSS though, im not qualified any longer heh! and it’d take all day if I went off on that tangent.
Some Areas to Look At
When you look at your own blog, try and look at some of the following areas, and see if a little more white space would make a positive difference.
- Page Margins: These are the major spaces between the edges of the browser and the body of your page and the main columns.
- Ad Units: Tread carefully here, too much and they dont blend, too little and they clutter.
- Menus: Are they easy to see, easy to recognize and easy to use? Try putting a little more white space around them, as well as marking them clearly.
- Posts: Often overlooked i think, you should have a clear space, maybe even a line or other seperator between posts on your home and category pages. It makes skimming the list so much simpler.
Spaced Out
Wow, i’ve not written much about design in years now. What was intended as a quickie post to get a discussion rolling turned into a bit of a essay heh.. thing is, I dont think I’ve covered even half of the subject here.
Do let me know what you think of the use of white space in blog design, i’d love to discuss it, as it’s something i feel particularly strongly about (well, there’s a thing eh?) — In general, where is it working, or not working, for you?