Wednesday, November 01, 2006

Blog layout philosophy

Call it an obsessive compulsion, but the reason I really wanted a blog redesign can be summed up in two words: white space.

Ever since I started blogging, the problem of white space is one that's been nagging me. Take a look at the picture on the left to see what I'm talking about: long blog posts often leave plenty of hanging white space on the side.

The graphical layout of most blogs only take into account the top half of the browser. Here the main post column lives harmoniously with the title, sidebars, and other navigational elements. Lower down, the posts are orphaned.

White space by design can be a beautiful thing, but unintended white space often is not.

The problem is much worse when a long sidebar is orphaned by a short post. This usually happens in older blogs when the blogger has put a lot of thingamabobs into the sidebar, or even when the blogroll has grown somewhat unwieldy.

This leaves a lot of white space on the page with a narrow sliver of auxiliary data. Not very pretty to look at.

Blogs, more than other types of web media, seem more susceptible to the orphan / white space phenomenon. Because of the linear nature of blogs, where posts can just pile upon posts. It just so happens that most blog designs, taking off from earlier corporate web designs, have opted for two- or three-column layouts. Unfortunately, long main posts and short sidebars do not mix visually.

On the first problem -- that of longer main posts and shorter sidebars -- here are some possible solutions:

1) Adjust the number of posts to fit the length of the sidebar. This only works with the front page and can be quite tedious to do over and over.

2) Use expandable post summaries to limit the overall length of posts on the main page. Wordpress, I'm told, implements it as part of its standard functionality. On Blogger, it's a minor hack that's simple enough to implement.

3) Limit the lengths of posts by breaking up long posts into shorter pieces.

The second problem -- shorter main posts and longer sidebars -- is really just a problem of restraint.

My alternative solution has been to incorporate floating title and sidebar elements into the blog layout. That way, the blog maintains its intended look all throughout. I got this idea from Basang Panaginip and Brass Buddha Machine. I've taken their ideas a bit further and decided to keep my main navigational elements always in view.

Of course, this has another consequence: drastically reduced real estate. Whereas before, I could still use some real estate on the sidebar for other things, now that opportunity appears to be gone. I'm left with the same size of sidebar throughout.

I say "appears" because it's not really gone. Those sidebar elements could just as easily go to the bottom of the main page (or in another viewport window). The page still maintains its overall visual cohesion. This is the solution that I prefer over that of uncontrolled white space.

What do you think?