Nothing pleases me more than when I land on a blog to find an organised, well-designed sidebar that makes it easy for me to find my way around the site (web design geek over here).

That being said, there is also nothing worse than a poorly designed sidebar. A cluttered, unorganised sidebar can distract your readers’ attention, make your site look unprofessional and even decrease the engagement of your readers.

So its important to put some thought into the design and content of your sidebar.

THE CONTENT OF YOUR SIDEBAR

Think of your sidebar as another menu.

It should be a way of enabling users to find the information they are looking for and a way for you to guide their attention to what you want them to see.

What it shouldn’t be is a dumping ground for anything and everything. A place to put things when you can’t figure out where else they should go.

The content you decide to include in your sidebar will be entirely unique to you, your blog and what you are looking to achieve. But below are a few pointers as to what you would generally find in a well designed sidebar.

AUTHOR’S BIO

As a blogger, its crazy important to make a personal connection with your readers. People like to see who is behind the blog. To put a face to the voice.

When we are designing websites, we always put a mini author’s bio at the very top of the sidebar. That way, readers are immediately met with a picture of you and a short snippet about what you are all about.

You can have a bit of fun here. Customise it to fit the look of the rest of your site and inject a bit of personality into it.

In the sidebar for my travel blog (below left), we added a border and some handwritten font to bring it more in line with the design of the rest of my site. In contrast, the bio we made for Stephanie at History Fangirl (below right) was much more simple and professional to fit with the look and feel that she was going for.

Sidebar Author Bio

SOCIAL ICONS

Blogging is all about building a community. And one important factor in building a community is social media.

You need to make it easy for your readers to find and connect with you so put your social icons somewhere near the top of the sidebar.

Sidebar Social Media Icons

EMAIL OPT-IN INTEGRATION

As I’m sure you already know, building your email list should be priority numero uno so, like the social icons, you want to place the opt-in form high up in your sidebar to grab people’s attention and encourage more people to sign up.

Instead of having a boring form consisting of a couple of blank fields, customise your form to draw your readers’ attention to it.

Nomadic Matt personalises his signup form by including his profile picture whereas Alex in Wanderland uses beautiful styling that fits in with the rest of her website and different options to allow you to choose what to sign up to.

Sidebar Email Opt-in Form

LINKS TO CATEGORIES

Or popular posts. Or recent blog posts. Or a combination of each.

As I said before, your sidebar should provide your user with another way of navigating your site. So try to think about what would be helpful in helping them to find their way around your site.

Personally, I always love to include a way of navigating by category. If I have just read a really good post on blogging tips and want to see what other posts there are within the same category then the first place I will look is the sidebar.

Sidebar Category Navigation

SIDEBAR DESIGN

There is nothing more distracting and off-putting than a big, intrusive sidebar flashing away at the side of the screen competing for your attention.

It may only be a small strip of space at the side of your page, but that small section can make or break the whole look of your website in a second. So it needs to look as good as the rest of your site.

You want to make sure that its easy on your readers’ eyes – that means making sure the layout is tidy and that there is enough white space around the elements.

When designing your sidebar, try to do the following:

  • Leave enough breathing space between the different elements
  • Make sure there is sufficient spacing and separation between the sidebar and page content
  • Separate the different elements with headers or dividers
  • Keep all website elements the same width
  • Keep colours, fonts, graphics consistent with the rest of your site

History Fangirl (below left) and Nomadic Matt (below right) are both examples of how you can use headers to separate different sidebar elements.

Sidebar Titles

Want your own custom sidebar but just don’t have the time / skills / inclination to do it yourself? Hire us to build you a beautiful sidebar in a day.