In the past few days, I redesigned my sidebar. It doesn’t sound like much, does it? But looking back, that one change has had quite an impact on the overall look.

In blogs in particular, the sidebar is a big part of your design. But also in blogs, they tend to be quite poorly done. The reason is that very few of us design our sidebars with content in mind.

I’m guilty as well. When I first designed the sidebar for this blog, I was thinking about leaderboard ads and various widgets. Since then, I’ve dropped the ads, changed the widgets and added a sideblog.

Odds are, your sidebar content has changed in the course of your blogging as well. It is important to reassess your entire blog every now and again, but the sidebar is one area that you should pay particular attention to because of its changing nature.

In this post, I want to go through how I reassessed mine, and worked to improve it. You can then apply the same process to your own blog.

You can click on the image below to see a full-size comparison of the two.

sidebar_small

Step 1 – Organize Your Content

You cannot design well without knowing what you are designing for. The first step is to list out all of the content you are designing for, and prioritize it by importance.

To do this, I wrote out all of the sections that I was interested in having (Widgets, RSS, sideblog etc.), and ran them through my prioritization flowchart, to get the following order of importance:

Group 1 – Slogan, Subscription Options, Search Bar
Group 2 – Nothing
Group 3 – Services Advert
Group 4 – Categories, Popular Posts, Recent Posts, Sideblog
Group 5 – Top Commenters, Twitter

Step 2 – Reassess the Layout

Now you must look at the underlying layout for your new sidebar.

I have written before about 3 column vs 2 column layouts, and chosen 3. There were good reasons for it at the time, but the sidebar has changed, and the reasons no longer applied.

3 column layouts work very well with sidebar images. Adverts? MyBlogLog widgets? Flickr photostreams? They all look good in 3 columns.

However, I now have very few images in my sidebar. The RSS button and the Services advert are the height of it. Instead, I have much more text than I did originally. Thin, 3-column sidebars are not easy to read from.

Look at the comparison image above and compare reading a sideblog description in the old and in the new. The extra horizontal space in the new sidebar makes the content much more legible, which was crucial for both the sidebar and the twitter widget. Even the long headlines are improved now as they all fit on a single line.

Step 3 – Reassess The Design

Another reason for redesigning my sidebar was it had become both bland and cluttered. Does the original style of your sidebar still suit?

For me, the blandness arose because the original design was very simple. It was meant for leaderboard adverts and images, not text and lists of links.

The clutter arose as I added more and more content. The sideblog was the last straw. All designs have a breaking point where you can’t reasonably force any more content upon them.

The first priority was the clutter. The RSS area was no longer well highlighted, and telling one section from the next was a chore. I solved this problem by dividing the content into very distinct sections, with ample padding. Depending on your own blog’s design, you could do something similar, or use well highlighted headings perhaps?

I also used the DOMtabs script to “tab” the majority of the textual content.

All that remained then was to design. What you do here will depend on your own blog’s design, but I found that adding contrasting background colors worked well and brought a new life to the blog. I’m not entirely sold on them yet though. The Twitter widget in particular is more eye-catching than it needs to be…

Step 4 – Special Circumstances

There are always elements of a design that need special consideration. As you redesign your blog, feel free to treat certain sections differently than normal. In my case:

  • The search bar is under-used here, so I moved it into the DOMtabs area. It even looked better here as it’s not large enough to have its own “section”.
  • According to the prioritization, the sideblog is more important than Twitter, but the sideblog is just text on the page background, and looks better at the end of the column (As opposed to having a “gap” in the middle of the design).
  • The list of categories is not shown by default. Instead, I felt that the list of popular posts was more useful to a visitor, and so I show those instead. More to come on this in a future post.
  • As Brian Purkiss recently pointed out, people can get the search and email subscribe bars mixed up. This is particularly true in my case with such a hidden search bar, so I’ve added the word “email…” to my email form. This, combined with the obvious sectioning of the sidebar (The bright orange background!) should help stop that mistake.

That is how I ended up with the design you now see. It’s not perfect, and in another few months, I might redesign it again, but it is much better than its predecessor.

Does your blog’s sidebar still suit its content? Or would a redesign be good for you as well?

And to the regulars here, what do you think? Better or worse than the original? (And do you use Twitter?)

And last of all, there was a bit of a hiccough with the DOMtabs code, so if you happen to spot “<div id=”stupidtabs”></div>” in my source code, you’ll know why…

Enjoy this post? You should follow me on Twitter!