Tobold's Blog: Blog layouts

Friday, January 30, 2009

Blog layouts

I get a lot of mail from people asking me to have a look at their blog or link to them, something which I'm happy to do, if I find something interesting. But today I want to talk about a thought that struck me when reading We Fly Spitfires: Hey, finally a blog with a readable layout! So my apologies to the author if I'm not discussing his post on the success of WoW. It's a good post, presented on an excellent layout, and I'll talk about the layout here.

The majority of blogs people ask me to look at suffer from one or both of two fundamental flaws: Bad color scheme or bad use of space. I have to look at far too many blogs with tiny fonts, in dark grey on black background, or in some shrill colors that make my eyes hurt. And quite a lot of them seem to have been designed for a resolution of 800 x 600 pixels, with a fixed width of about 600 pixels for the main text. If you watch that on a 1680 x 1050 wide screen monitor, you still get the main text 600 pixels wide in the middle, with the two sidebars now taking up 1080 pixels. And that 8 pt font which was still readable at 800 x 600 becomes far too small on that 1680 x 1050 screen where it only takes up the middle third of the space. I'm not a HTML guru, but I know you can either fix the sidebar width and let the middle part get wider at higher resolutions, or you can make all widths a percentage of the resolution, keeping always the same aspect. And you can make the font scale too!

So please, if you have a blog, try to look at it once on a high-resolution wide-screen monitor from 2 feet distance and check readability. If you want to get your ideas across, the first condition is that your visitors can actually read what you wrote. There is a lot of good advice on readability and layouting on the internet, if you want to do all the designing work yourself. But your blog hosting site probably offers a wide range of premade templates, and you could just choose one based on readability. Looking fancy is not always the first priority!
- posted by Tobold @ 3:42 PM Permanent Link

Comments:

Hmmmm...
My blog seems to scale well. Glad you pointed it out. But, I also view my browser on a 42" 1080p TV, and I expand the font somewhat in my options.
Chrome works wonders by resizing certain boxes to work with that text (just wish it had more of Firefox's options)

Anyways, I do note both your blog and the one you discuss seem to be the "newspaper" look, and I just do not feel that dry.
I like some splash of color...but I agree about the gray/black sites...eye killers.

Cheers

# posted by

Elementalistly : 30/1/09 16:42

Actually, I think your blog is not optimal in that regard, either. You should limit the width of the text. To read a line that streaches across 1680 pixels is quite exhausting. On the other hand, to make the text size big enough is not really necessary, because everybody can do it himself with Strg-'+'.

# posted by

Nils : 30/1/09 17:13

Narrower columns of text are easier to read because your eyes have to move less times per horizontal line of text. This explains the narrow formatting of just about every column of text in all media outside of your blog. ;-) As all my life I've been trained to read narrow columns of text, on my widescreen monitor I often make my browser window confortably narrow when I read your blog. If you wish to take advantage of the extra rea estate on widescreen monitors, consider formatting your posts into multiple columns instead.

# posted by

Anonymous : 30/1/09 17:27

I will not spend more than a minute or two on a site with light text on black. It's not worth the headache, despite the occasional bit of content on said sites that may be worth reading. It's good that I can read quickly.

Speaking of HTML, though, aye, it's not hard to tinker with it or CSS, but one, not everyone bothers to learn (or cares), and two, not all blog hosts allow for a high degree of customization. If you self-host, you can usually tinker to your heart's delight, but Wordpress, for one, is fairly constrained in what it offers as far as HTML/CSS tinkering. At least, with a free blog. Google's Blogger tools are a bit more malleable, but also a bit less polished.

...but there's still no excuse for light text on a dark background. Or a busy background. Or garish, high saturation colors. Oi.

# posted by

Tesh : 30/1/09 17:30

To be honest, I read most blogs on an RSS reader so the layout isn't a major concern for me. But I like ones that are clean without too much clutter.

# posted by

Anonymous : 30/1/09 17:55

The problem I have with most blogs is that their comment styles are crap. It's often hard to read and distinguish between comments made by different users. Your comment layout, for example, is awful.

I greatly prefer comments that have something that separates them strongly. That could be whitespace, background colors, or separating lines of some sort.

# posted by

Sean : 30/1/09 18:07

Er, to be honest Tobold your layout has been bugging me for quite some time. I'm using a widescreen and just as you praise using percentage as width on the columns yours is almost all the way to the edges. There is a reason newspapers columnize their text, and why some designs are narrow: readability. If I have to follow a sentence from one side of the screen to the other on my widescreen I might get lost when jumping down to the next. The columns shouldn't be too narrow, that's just annoying because you have to scroll a lot, but neither should they be too wide. The 600px example you mentioned is a pretty decent width depending what font size you are using.

I wouldn't mind if your column width was decreased by half on my widescreen.

# posted by

Regis : 30/1/09 18:36

I don't know what some people's obsession with very dark or black backgrounds are. They are terrible

# posted by

Sine Nomine : 30/1/09 20:07

Speaking about layout you should discuss your used font as well. Using fonts "Sans Serif" is for headers only, body text should be with Serifs for better readability as the serifs help the eye to connect each line

# posted by

Teut : 30/1/09 20:25

My blog has the big side bars on a widescreen monitor (like the one i use myself), but still i think its fine. It also uses a full black background and white-ish letters, a style which you seem to hate :) but in my view white (or yellow) on black offers excellent readability. Also to me at least, it is more relaxed on the eyes (this may be due to my eyes being not very good...:), on white screens i usually get the idea of staring into a lamp. Also i have few readers, and even less feedback, so my blog may be more aimed at what i like myself instead of the reader..

# posted by

Phantasmagoria : 30/1/09 20:35

SO YOUR SAYING MY BLOG IS UGLY? I SLAVED OVER A HOT MOUSE POINTER FOR A WEEK MAKING IT LOOK GOOD FOR YOU! IT'S OVER BETWEEN US, MISTER! /cry

# posted by

Rich : 31/1/09 00:56

The blog you highlight is none to different to a style I have been using for Construed, although it took me a few hard learnt lessons to get there. I haven't felt the need to change my theme since I started it back in September last year.

# posted by

Anonymous : 31/1/09 01:29

Thanks for the kind words, Tobold. Regarding the layout of my blog, I just picked something I thought would be simple yet readable. I don't have any artistic talent so I'm pretty limited in what I could get it to look like :) I'd like to add a nice banner at some point but I don't have any plans to radically alter the appearance.

# posted by

Anonymous : 31/1/09 01:48

I have to agree with other comments here Tobold. Limiting the width of the main text area is a good thing, not bad. Personally I find a size of about 2/3 of the screen for today's wide-screen monitors works well for me, but I gather it is really a personal preference.

I also have to agree, comments without clear separations are harder to read. I'm not sure how to add alternating background colors to blogspot comments but this article about highlighting comments by the blog author should be a good starting spot:
http://www.bloggerbuster.com/2008/05/how-to-highlight-author-comments.html

Good luck :)

# posted by

SolidState : 31/1/09 08:35

We Fly Spitfires is indeed very reader friendly blog, and it also has a fixed width text column. Tobold, you are giving advice that conflict with your given example of good layout.

# posted by

Ikuturso : 31/1/09 13:45

While it is proven that long lines are harder to read than short ones, everyone can adjust the length of lines with simply adjusting their browser window. I scoff at people who have their browsers maxed on their 24" screen. Stupid.

Once your layout adapts to viewport width, everyone can make the lenth of line to their liking. Those who max their window don't deserve a 24"

# posted by

Deltatango : 10/2/09 20:41