Anatomy of a Perfect Sidebar – The Nuances of a Good Design


In the previous part of the series, we've gone through the definition and the importance of the "sidebar" element on WordPress blogs and checked out layouts with one, two, three and four sidebars (and no sidebars).

In this second part, we're going to see how to design a sidebar and order the elements - specifically, the widgets - inside of it.

Designing the Perfect Sidebar

One of the main reasons visitors don't pay attention to the sidebars amounts to poor design choices. Other reasons could be using too many or too few elements, displaying dull and uninteresting content and not ordering the elements properly, and so on.

Neglecting to design your sidebar means lower page views, lower ad clicks, lower conversion rates, and lower sales. Even if you're not expecting any income from your WordPress website and just expect people to read your content, you still have to design your sidebar(s) well to be able to guide your visitors with your navigational sidebar elements.

We're going to go through three main factors of a good sidebar design: dimensions, colors and typography basics.

Width and Height of the Sidebar

The width of our own sidebar

Common sense for the width of the sidebar is to reduce the width of the sidebar(s) compared to the main content area. This is a sensible approach since the main content is almost always the most important element of a web page and a narrow content area with wide sidebars de-emphasizes the content.

A width between 20% and 40% is usually the best choice for a single sidebar and if you're going to use more than one sidebar, I suggest you don't exceed a total width of 50% (20% + 20% and 15% + 35%, for example).

For a single sidebar, you can also utilize the Golden Ratio approach, where the width of the sidebar is around 38% of the main content area's width. You can find more information about Golden Ratio in Jarel Remick's The Golden Ratio in Web Design article at Nettuts+.

As for the height, there isn't much to discuss other than "the fold". The Fold is the bottom line on the visitor's screen, where the visitor has to scroll before seeing the rest of the page. I used to advise my clients to try to stay "above the fold" but since there are lots and lots of different devices (thus, screen dimensions) and people are very used to scrolling, life below the fold isn't that scary anymore.

Having said that, you should mind the fact that the elements above the Fold are the first elements the visitors will see. We'll talk about it on the last topic, "Ordering the Elements of the Sidebar".

Oh by the way, you really, really should be careful about not exceeding the height of the main content area. If the sidebars are longer than the content, it looks very ugly.

Using Colors and Images

An extremely colorful sidebar

Recall the design motto, "less is more"? Well, we can read it as "more is less", too.

Colors could both attract and distract. If you use so many colors like the sidebar above, none of those colorful, ugly elements will get the most attention - they will get the least attention.

But if you use just a few colors for just a few elements (that you need to attract visitors the most), they will draw the most attention. You need to keep in mind that in order to pop out a widget, you need to set back the others. "Contrast" is the keyword here.

Images can be an exception, though. While all the things I said above apply to digital graphics as well, photos could be used in order to draw attention separately from the colored up elements. But as you can imagine, too many images will distract the visitor as well - that's why advertisements may or may not be noticed based on your sidebar design.

I suggest that, if you can, you should use faded out pictures (which fade in on hover) in your sidebar widgets. Try and see if that looks nice or not.

Font Sizes and Alignment of the Elements

Font sizes and alignment of sidebar elements

Typography is always important for good design. With good typography, you may not need anything else to make your web page look good.

With the sidebars I design, I like to set the font size slightly (10% to 20%) larger than the main content. It draws attention but does not distract the visitor from the main content — the visitors see what they want to see and that's the thing we'd aim to do. Don't forget that sometimes smaller text could be attractive, too.

I also like to align the headings to center and the text to the right but you can - and you should - do anything you see fit for your design. As long as they don't look messy and unrelated, it's good for you.

Ordering the Elements of the Sidebar

Even if you have just two sidebar elements or ten of them, you should consider ordering those elements a crucial practice. Doing it right will surely increase clicks and sales and doing it wrong can plummet them!

Think about the important elements that should definitely be seen by all visitors, and the not-so-important ones that doesn't necessarily have to be seen by every single person who visits your website.

For example: while subscription forms and buttons or latest/popular posts lists are considered "important", we can't say the same for latest comments lists or blogrolls. Once you identify the "important" ones, you can order them between each other and have a nicely ordered sidebar.

Also, you should consider the fold: Which elements should be on top and which ones could be at the bottom of the sidebar? Having the most important elements (like an email subscription form and a popular posts list and possibly an advertisement) above the fold will benefit both you and your visitors.


I don't believe that you should follow strict rules for a good design but there are always "guidelines" for you to create better designs. This series is one of those guidelines and I hope you've enjoyed it.

Do you have anything to add or improve? Share your ideas with us by leaving a comment!

Related Posts
  • Web Design
    Complete Websites
    Design a Travel Startup Landing Page Using PhotoshopLanding thumb
    In this tutorial I’ll walk you through a process of creating a simple and clean travel startup landing page design. I'll be using Photoshop CS6 to design a professional and lightweight layout combining beautiful imagery and some stylish fonts.Read More…
  • Web Design
    HTML & CSS
    A “Readability First” Approach to Media Queries and LayoutReadability first thumb
    In this article I'll be talking about a methodology that is a mixture of many approaches to Responsive Web Design, with a few extras stirred in. It's both "Content First" and "Device Agnostic", and was originally inspired by the typography focused em based "Goldilocks Approach". I like to think of it as a "Readability First" approach.Read More…
  • Web Design
    How to Become a Conversion-Centered DesignerUnbounce
    So you want to be a landing page template designer? You may think you have it easy - after all, landing page templates are just a single page. That’s much easier than designing a full-on website. But the rules of design change quite a bit when building conversion-centered landing pages.Read More…
  • Web Design
    Design Theory
    An Introduction to CompositionDsfd composition retina
    Composition is about laying out all your ideas and design elements into a whole; composing your design. We're going to combine all of the previous lessons that we’ve covered, and because of that it makes composition one of those really difficult aspects of designing anything.Read More…
  • Code
    Anatomy of a Perfect Sidebar – Introduction and Using the Right LayoutAnatomy of a perfect sidebar
    Admit it: Most of us see sidebars as nothing more than a simple container that holds stuff, in our blogs and websites. It gets our minimum effort on the design process and we fill it up without thinking which widget should go where. But for a well–designed website, the designer should consider a number of factors when working on them. For example, consider the number of sidebar containers, the width and height of sidebars, the order of the elements that go into the sidebars and so on. In this post, we're going to study the anatomy of the "perfect sidebar".Read More…
  • Business
    How to Setup Your Authority Blog With the WordPress Canvas Theme4 authority blog wordpress
    Many would-be bloggers are intimidated into inaction by the perception that creating and running a blog is too technically challenging. If you count yourself amongst that group then this post is for you. In reality, the fact that you are currently reading this almost certainly qualifies you to create a website. You need little more than a basic level of computer literacy in order to learn what is necessary to create and maintain your very own blog. Gone are the days when you needed to get your hands dirty with code such as HTML and CSS in order to create your own corner on the web -- although such skills are certainly still useful in many applications, they are no longer a necessity. When it comes to creating a blog, all you need is a good idea and a few hours of your time (or even less) to get up and running. Furthermore, with an enormous selection of highly customizable theme frameworks to choose from, you can create a professional-looking website in short time with relative ease. The next three posts in this series on creating a successful authority blog will focus on the nuts and bolts of creating your very own blog, and this post will focus specifically on how to create a unique design for your website. Let's get started!Read More…