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?



  1. Yes, I agree. The uneven length of columns can be unattractive.

    One to do solve this is the floating DIV which you did. But I think the designer could think of other ways as well to make the white space more appealing like those we see from

  2. I have yet to learn those tricks, so my old-fashioned solution is to come up with haiku-like posts: short, snappy ones. Which requires breaking down long entries into a series.

    It's serving me well thus far.:)

  3. Ahh, yes, playing around with the endless possibilities of CSS and XHTML :)

    By the way, Dominique, let me know if you are interested in exchanging blog links. I recently added a new entry, though it is a bit of an editorial piece on current events in Dumaguete.


    By the way, Marilyn and I have finally taken the first steps toward a fiance visa. The process begins...

  4. Hi, Ferdz: yes, CSS Zen Garden is an inspiration to me. I've picked up several ideas there. But I'm still a ways off from that caliber =)

  5. Hi, Willy: that occured to me but I didn't write it the first time around. I'll include it in the second draft shortly. On the other hand, I don't want my post lengths to be a slave to my blog design.

    The peek-a-boo comments do help a bit, though.

  6. Hi, Corey: Sure thing! I'm still fixing up my blogroll, which I plan to move to my Wiki. I'll let you know as soon as it's up.

    Are you in town? Let me know if you are so we can meet up. Best of luck on the visa!

  7. Hey Dom,

    I just sent you an e-mail.


  8. so, congratilutions now, it's perfect.*

  9. I'm not actually in Dumaguete now. However, I'm trying to ration my vacation days at work for a possible trip early in 2007. We'll see. Marilyn may actually be the one to take the next overseas trip (i.e. from there to here ;))

    Anyway, I did a bit of experimenting with the blog CSS to achieve a different look. I also changed my profile photo (again) to something that fit the theme of the blog better than a snowy scene from Michigan :)