The sidebar is an important element of every blog. In a standard two-columns layout it’s placed to the right of the main section and includes information and links related to the content of blog posts.
A well organized sidebar should include some important items, such as subscription options, advertisements, recent and popular posts, and help blog readers find contextual information related to the article they are reading or, in general, about the blog they are browsing. Many blogs also add on their sidebar optional items such as external widgets (Facebook Fan Page or Google Friend Connect) and other various elements (for example job boards or Twitter updates).
All cited items are ordered and distributed within a sidebar according to their function and importance. Here is an example of the order and balanced distribution of those items (each item take up in average a certain percentage of the sidebar):
Subscription options: this section, which in some cases also includes a short presentation of the blog, is placed on top of the sidebar and covers in average approximately 5% of the sidebar area. It should include a link to the RSS feed, subscription options via email, Twitter and Facebook profile (many blogs use small or big icons for these links).
Advertisements: the sidebar is the perfect area to place advertisements. In average this section covers in many blogs 35% – 40% of the sidebar’s area. Widespread practice suggests to use not more than two banners (favorite size 125 X 125 pixels) for single row.
Recent and popular posts: separate sections with lists of recent and popular posts are a good way to suggest to blog readers what’s new, highlight popular articles, and increase in this way global page views.
External widgets: Many blogs add external widgets on their sidebar such as Facebook Fan Page or Google Friend Connect. This kind of widgets are not strictly necessary but can be useful to allow a major interaction between readers and contents and increase blog visitors.
Other elements: in average 10% of the area of some sidebars is taken up from various optional elements such as job boards, Twitter updates, tag lists or tag cloud and so on.
A last consideration about sidebar’s width. A too big or small width is not recommended: I suggest you to set the CSS width property to 260px so that your sidebar can contain two advertisement banners for row with a gap of 10px between banners.
Thanks Antonio, for the useful info… it helps me a lot.
Antonio,
Nice post, however I feel this post only constricts readers into how they should design their sidebar. If everyone read this article then all sidebars would be the same, is this really what you want? I agree that many sidebars are in fact like the above statistics however I feel it is time for change. Designers should be letting their creativity flourish rather than being bombarded with “current trends” and abiding by posts such as these.
Just my 2 cents :)
As I dream about building my own web site one day, I read your article with a great interest. My current dilemma is having a portfolio page as home or blog as home. Or does it matter at all?
I was thinking the same as Liam when I read this post. This might be a perfect sidebar assuming that all the things you’ve listed were first determined as necessary items to include. While this is typically what many blogs will include in their sidebar, the truth is not one element you listed is necessary by default. In fact there’s no reason why a sidebar should be 260px wide, needs to be on the right, or needs to be included at all.
I understand your points, but I also think this may limit others into thinking there’s one and only one way to design a sidebar.
Antonio, nice post, thanks! Btw, what is that font you are using in the image of this post? It’s awesome!
The font is Museo: http://new.myfonts.com/fonts/exljbris/museo/
I merely think Antonio was suggesting the width of sidebars to be convenient for advertising.
im not ok with you … I think sidebar depends on each blog ! because not everyone needs a recent post widget for exemple ;)
I like how you make the sidebar into an objective formula however as others have posted, variation and trends will inevitably change “the perfect sidebar” in the future. Great post nonetheless!
> should include some important items, such as […] advertisements
Aren’t ads placed between, or near *important items*? I’d never thought advertising was *important*, at least for the reader.
Thanks your post are always full of useful information.
Nice post! But I have to agree with comments made by Liam and Steven earlier. I don’t think anyone wants to see the same style sidebar on every single blog they go to. It leaves so little room for personality, creativity and inspiration.
I’d say you should order the contents in the sidebar after relevance (exception of ads that should be as far above “the fold” as possible). Some sites don’t need “recent posts” for example. The sidebar is like a toolbar in photoshop, adding some extra, but general, features to the main content.
The width should also be set relative to the main page width. 260px doesn’t go for all sites. Smashingmagazine.com, has a very large sidebar, and I want to call it very attractive.
sometime i was confused by sidebar of my blog. it need a lot of mind thingking
Very useful information. Thanks!
Great post. I like you very much Antonio. Because of you i love to learn CSS and HTML. Although I just started few months ago. I want to send you an email. How it is possible?
thanks for the great advice. can you tell me if the pic on the fan page at the top can be different then the wall post icons and if so how?
nice blog post! interesting read, im a designer but have not yet got around writing my own blogs. just a matter of time and always useful to hear beneficial information. cheers
paul
Nice tips
loved it,now i can arrange my blogs sidebar in a nice way,,,,,,currently the things are just haphazard.
thnx a lot
Nice points here, but what about the most important aspect of a page (a blog page to me at least) — the search area?
If you’re assuming that it would just be elsewhere prominently placed on the page, then that works. But, not having an easily visible, search area (again on blog page) seems like a big fail to me.
I just launched my new website, and I was having the hardest time with my sidebar. I was thinking google doesn’t like my sidebar because I’m using jquery to animate the drop down and to get the drop down to not display on page load I am using the display none css property which after reading several blogs is a bad idea and google will banish you. So I will take into consideration all these features when redesigning my sidebar thanks Antonio.
Your last suggestion of having sidebar width=260px…. is a bit contradictory to what you have in your present site.
I guess 280px which is what you currently have is perfect since it also has room for side padding.Also I think that it gives you better chances of getting golden ratio with main container div..
BTW, do you think golden ratio really affects site aesthetics.
The width of my sidebar is 260 px! 280px includes padding left and right.
Antonio, How do you feel about the use of footer space? Should it be reserved for standard site links and meta links? Or, what about putting the lower value items? Finally, do you feel it is wasted space to put an “About”?
Great input and tips.
Thanks for the reply,
Matt
Good thoughts Antonio on the sidebar. I have to agree with the others though on just what should be put in it. Depends on the blog and objective.
Question: I am accumulating a few advertisements and instead of parading them down the sidebar I would like to animate them. By that I mean flash as your wordpress themes ad does. I realize this is just one ad that flashes but I would like to do the same with two ads. I have seen it on many sights but can’t find out how to do it. Can you tell me? I set the ad section up as html gadgets and tables.
Any help would be greatly appreciated.
Thanks,
Deborah
Very nice and informative blog post now i can arrange my blogs sidebar in a nice way…. Thanks for sharing.