Effective Use of Blog Sidebars

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?

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

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