Effective Use of Blog Sidebars

If you like getting design inspiration by looking at excellent blog designs, you’ll love our new gallery site Blog Design Heroes.

While sidebars aren’t the primary focal point of blogs, they still have an important role in usability and appearance. A well-designed sidebar can make it easier for visitors to find what they like, which will keep them at your site longer and improve your overall effectiveness. On the other hand, a poor sidebar can lead to lost and frustrated visitors.

Before the re-design of this site was started, the sidebar (or in this case sidebars) was a focal point of need. I felt that whatever direction the new design went, it needed to improve the usability of the site by making navigation easier and directing visitors to the appropriate parts of the site. The decision was made to use two sidebars in order to include everything that was needed without cluttering up the sidebar too much.

While I was thinking about what I wanted to do with the sidebar, I did a good deal of analyzing other blog designs that I like to see specifically what was effective about their sidebars. In this post I’d like to take a look at several examples and highlight some key points.

What is the Purpose of a Sidebar?

When you’re designing a blog , why do you use a sidebar? In some cases sidebars are probably used because it’s just the thing to do. All blogs have sidebars, right? But without knowing the purpose it’s unlikely that you’ll have an effective sidebar. In my opinion, the primary purpose of a sidebar is to aid in navigation by making it quick and easy for visitors to get to many different places on your site without searching everywhere.

Additionally, I think an effective sidebar will give a new visitor a good idea of what your blog is about and what types of content they can find on the site. If a new visitors arrives through a search engine they’re probably looking at one specific post. They will obviously be able to see the content provided in that particular post, but that doesn’t tell them what else is available at the site. A sidebar (through category listings, popular posts, recent posts, etc.) can give them a better idea of the big picture of your blog.

What Should a Sidebar Accomplish?

Highlight the appropriate content

Many blogs, mine included, use the sidebar to display the best or most popular posts or pages. The sidebar provides you with an opportunity to show readers something other than just the post they are reading. What ever is most important to your blog should be highlighted. If your most important content is your popular posts, than a simple listing of those posts can do the trick (you can do this either manually or through the use of a plugin). If you’re selling a product, this is something that you’ll probably want to highlight on your sidebar. RSS subscriptions are a priority for most bloggers, so you’ll typically see links to RSS feeds at the top of sidebars.

Give an Overview

As I mentioned earlier, the sidebar can quickly give new visitors an idea of what your blog is all about and what topics/subjects are covered. Look at the sidebar as your opportunity to explain your blog. A few bloggers do this by actually having a paragraph or two to say what the blog is about, but what’s more common is to tell the story through the content that is highlighted. Judging by the content of your sidebar(s), can new visitors get an accurate idea of what your blog is really about?

Add to the Attractiveness

Some well-designed sidebars, like the ones we’ll look at in a minute, can go beyond just improving the usability of the blog by adding to the visual appearance. You don’t want the sidebar to take too much attention away from the primary content, but it can still me more than some simple text and links. In attempt to improve the look of the sidebar at this blog, images were used to accompany the links to popular posts. It’s still too early to tell if this has been effective in terms of getting clicks to those links, but that was probably the part of the design that drew the most comments from readers.

Allow for Scaling of the Blog

Because blogs are publishing new content so frequently, the sidebar needs to be able to adapt and scale with the blog. If you add several new posts per week and your sidebar hasn’t changed for six months, chances are that it’s not reaching maximum effectiveness.

Some sidebar elements, such as a list of recent posts, will update automatically, while other changes will need to be done manually. Don’t forget every now and then to evaluate your sidebar and see what needs to be added, changed, or removed.

Examples of Excellent Sidebars

The examples listed and broken down below are just a handful of excellent sidebars that you’ll find if you look around. The images that I’m using are obviously just a portion of the sidebars, so please click-through in order to see them in all their glory.

Freelance Switch

On of my favorite sidebars is from Freelance Switch. Their sidebar is one of the most attractive ones that I have seen. The color, typography and use of several small images create a sidebar that looks great while improving on the usability of the site. One thing you may notice that Freelance Switch does differently than most blogs, there is no category listing. Instead, they link to an archives page where visitors can browse through the categories if they like. Personally, I almost never use the category links on blogs, and I’ve considered removing them on this blog for that reason. At Freelance Switch the space in the sidebar is used for other purposes, such as an “Explore Freelance Switch” section that will take new visitors on a bit of a tour through the major topics of the blog.

FSW Sidebar

Pearsonified

The sidebar used at Pearsonified primarily consists of links to specific posts in a few classifications, including Must Reads, Improve Your Blog, and Worth a Look. This navigational approach in the sidebar of highlighting popular or important posts is pretty common, but Chris gives his links a stylish, colorful look that you don’t see everywhere.

Pearsonified Sidebar

Pro Blog Design

Michael Martin of Pro Blog Design uses an attractive sidebar that features one of the nicer feed subscription areas that you’ll see. Right below that he has a spot that advertises his design services, which is a good use of the prime screen real estate in his sidebar.

Pro Blog Design Sidebar

David Airey

Graphic designer David Airey uses a very nice, clean blog layout with sidebar on each side. The sidebars are mostly lists with some CSS styling for appearance, which goes nicely with the overall look of his blog. At the top of the left sidebar, where most visitors will look first, he has a small picture of himself and links for “Hire David Airey” and “View David Airey’s Portfolio.” Since David’s blog serves in part to indirectly sell his services, this section of his sidebar is an excellent choice. It puts the most important parts of his site where visitors will see it, and the picture helps potential clients to feel like they know him a little better.

David Airey

Copyblogger

Copyblogger also has a sidebar on each side. The top of the left sidebar, which starts very high on the page, includes an attract call for subscriptions, and then it links to some of the more important sections of the site. This list includes links to a few individual posts and links to pages that have been set up to funnel visitors to posts on particular topics (a nice use of WordPress pages).

Copyblogger

The 9513

The 9513 is a country music blog with an excellent design overall. It uses two sidebars, however, most of the content is in the right sidebar. The part that I’d like to point out links to recent album reviews on the blog. Album cover images are used to link to 8 recent reviews. Very little screen space is taken up by this, but it adds to appearance of the sidebar and makes it easy for visitors to read the reviews that interest them.

The 9513 Sidebar

What’s Your Approach with a Sidebar?

When you’re designing a blog theme, what do you hope to accomplish with a sidebar?

Published July 6th, 2008 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

30 Responses

Comments are now closed on this post.

  • Dan Cole, July 6, 2008

    I make sure that anything added to the sidebar is going to help out the majority of the visitors. Besides that, it should be clear and easy to skim over.

  • Graham Strong, July 7, 2008

    Certainly, blogs should promote themselves. But if you are writing a blog to attract clients, then you should also add something in the sidebar that allows them to learn more about you and your services — and how to contact you of course! You mention this with David Airey’s blog, but I think it’s an important point to underline.

    ~Graham

  • A u d e e, July 7, 2008

    Great Examples! Sometimes scrolling the sidebar way down can be boring thing to do when you have long list of links in it. I think I like how Pro Blog Design arranged the link list into sort of compact tabs… Neat and clever!
    Thanks for sharing this!

  • Michael Martin, July 7, 2008

    Thanks for the complement Steven!

    Allowing for scaling is a great point. The first sidebar I had on Pro Blog Design didn’t do that at all. It held the content I had at the start, and that was about it. I had to completely redesign the sidebar a few months back to get the one you see now, which can hold the content much better.

    Sidebars can start to feel cluttered so easily, but because you work on your blog every day, you don’t always notice. Took me months to catch on to mine…

  • Jacob Gube, July 7, 2008

    This is an excellent piece! I’ve been considering having two side bars on my site (similar to yours and copyblogger’s) because it does maximize the space.

    This article on Personified about categories:
    http://www.pearsonified.com/2008/02/what_every_blogger_needs_to_know_about_categories.php
    is an excellent a must-read. His argument on having a list of categories convinced me not to have it on the sidebar early on in my blog’s design. But now that I have more content, and each topic/category has a fair amount of content associated with it, I’m now thinking of publishing the category list on my sidebar.

  • Vandelay Design, July 7, 2008

    Audee,
    I agree. It’s nice and compact but still has a lot of information and links involved.

    Michael,
    Your welcome. Thanks for giving me something to write about! I think the scaling issue is so easy to overlook, and even when you are aware of it, it’s still hard to see your own blog from the perspective of a new visitor and what they would want to find in a sidebar.

    Jacob,
    So far I’m liking the change to two sidebars. I think the main content area is still wide enough and it give you more options (especially when ads are thrown into the mix. On the subject of categories, I’m thinking about removing some categories from the list and keeping the most relevant ones. I’m not sure if that would make the list more manageable and effective, but it would look better I think.

  • Bill Stevens, July 8, 2008

    Good info. I like this article as well from WPDesinger – http://www.wpdesigner.com/2008/02/15/static-sidebar-sucks/

    I’m updating my wife’s art blog and combining her website so she only has to manage one site – her blog. For the art gallery page on her blog, I don’t show the sidebar at all, so to draw attention to the art on the gallery page. One of these days I’ll be done with it. :)

  • Jeffro2pt0, July 8, 2008

    I’ve honestly never given the sidebar this much thought before. Certainly some things to consider after reading this post. I don’t think I’ll be using my sidebar to house all of the crap that I can’t put anywhere else anymore.

  • Vandelay Design, July 8, 2008

    Bill,
    Thanks for linking to that article, I hadn’t seen it before. I agree with his points and I’ve thought of changing up my sidebars a bit for different categories to make them a little bit more varied for visitors (just isn’t on the top of my priority list yet). I agree with what you’re doing for a portfolio page.

    Jeffrp2pt0,
    I’m glad the article had some impact.

  • Alex Weber, July 9, 2008

    Thanks for these tips! I’ve used them on my own blog, linked above.

    Now, for a redesign… :excited: :shudder:

  • Andrew Garcia, July 10, 2008

    Awesome tips. Because of this post I have chosen to review my sidebar implementation. I’ll definitely consider some of the things that you mentioned!

    Thanks!
    -A

  • The Otaku Blog, July 10, 2008

    Really good read. I’ve been having some trouble getting my sidebar to look the way I want it to, but this definitely helps!

  • uk vps, September 5, 2008

    Sidebar is everything these days.

  • pollux, December 12, 2008

    Personally, I like to have NO sidebar on my blog. And it’s just a matter of fact: I don’t look at sidebars on most blogs.

    No sidebar = better visibility, no noise and for it’s the must.

    However, if my blog was commercial focused I’d think about it differently…

    Besides of that: great sidebars’ samples!

  • Mandy | Print n Ink, July 20, 2009

    This is great thing to use to be honest I don’t use any side bar and maybe I should start as this is great. Thanks for the information

  • Sprucey, October 2, 2009

    Your piece of advice on blog design is quite worthwhile

  • Phaoloo, October 4, 2009

    Nice post! Although sidebar is not a focal point of a blog, but it can give us more traffic and even subscribers if you design it properly.