This guest post is by the Blog Tyrant.
The sidebar is the second most important place on your site. It is where, after engaging with your content, people head over to subscribe to your list, follow you on Twitter, or buy your product.
It is vital that you get it right.
In this post I am going to show you some of the web’s best sidebars, and then talk about how you can improve yours with a goal to get more subscribers and conversions, and make more money.
NOTE: You might also like the best About Us pages and the best Contact Us pages.
Criteria for a great sidebar
So what makes a sidebar great? Well, I have come up with a few criteria over the years but, of course, I would love to hear if you can think of any others.
- Above the fold: Do you know what I mean by above the fold? It’s everything you see before you scroll. Good sidebars have good stuff above the fold.
- Eye-catching, but not distracting: The sidebar needs to be eye-catching in that it gets people to interact, but not so much that people forget about your content.
- Takes readers deeper: The sidebar should take people deeper into your blog or site. It should get them to subscribe or convert them in some other way. That is the purpose of true navigation.
Of course there are more but these are the ones that really do it for me. After all, the whole purpose of the blog’s sidebar is to increase conversions.
The 10 best sidebars on the Web
Okay so let’s get into those sidebars. Here are the ones that I thought ticked the most boxes and really helped their users navigate their way towards a sale or a conversion, while still providing a fantastic user experience.
1. Tumblr Staff Blog
The Tumblr Staff blog is really cool because they show you the faces and personalities of everyone who works there.
Tumblr staff sidebar
Their sidebar is particularly useful because it advertises their product: Tumblr Blogs themselves. They give you a little form to start your own blog right there in the sidebar and then underneath have a very eye catching graphic on 30 reasons you will love their site.
This is a great combination—a sign up form and a list of reasons for why you should act. Might be a good idea for all blogs to explain to readers what they will get from signing up.
2. Copyblogger
Brian Clark of Copyblogger has totally redesigned his blog to appear more like a landing page that sends you off to his other products. The result? No sidebar. And that is something really brave and something that I had to include in this list
Copyblogger sidebar
Sometimes the best thing you can do with a sidebar is get rid of it. If you are building a landing page that serves to get people to a sign up or purchase area, then a sidebar might just be distracting. Have a look at the way Copyblogger does things. It’s making money.
3. ViperChill
Pretty much everything that Glen does is amazing. He is a very talented guy. And his sidebars are simple but extremely effective.
Viperchill sidebar
The thing he does that I haven’t seen anyone else do is add testimonials from big players like newspapers and Fortune 500 companies talking about how good he is at what he does. This type of social proof really serves to solidify his brand and make him appear more authoritative.
4. Huffington Post
Huffington Post is the world’s most successful blog—it’s even listed on the Stock Exchange now. So following their lead is a very good idea.
Huffington Post sidebar
In my previous post on the best comment areas we saw that they used badges and rewards to “level up” their readers and make them feel invested in the site.
The sidebar takes that idea further by showing readers what’s hot on Twitter, Facebook, and in other sections of the site itself. The net result would be that they get more social shares and a lot deeper user interaction with their content.
5. Mashable
Mashable is the biggest social media news site online. And they get that part of it really right.
Mashable sidebar
One of the best things you can do with your sidebar is get your readers to engage with your Facebook and Twitter accounts, and Mashable does this by getting people to log in with their accounts. Then, they show those users which topics are trending. It is a very clever way to mix both the social outlets as well as the site’s content. The result? They get a lot of viral content.
6. Smart Passive Income
Pat is a super-nice guy, and his sidebar lets you know right away. The first thing you see is a picture of him with his young son.
Smart Passive Income sidebar
This instantly builds trust with the new readers and, aside from building his personal brand equity, it makes you feel at home and in a very personal space. Pat then follows up by offering his free ebook below, as a natural progression from his little introduction.
7. Digital Photography School
Digital Photography School, Darren Rowse’s other blog, is a gold mine of “how to do it right” information. It is one of the best blogs for user engagement and has a wonderfully successful and active community.
dPS sidebar
The sidebar is perfectly done for encouraging users to get involved—how to make money, how to write guest posts, how to start a weekly assignment, etc. Useing your sidebar as an advertisement for different areas and functions of your site is very important.
8. Youtube
YouTube, after Facebook, has the highest page views of any site in the world. Last estimates I heard were around 30 pageviews per person. That means that, on average, every time someone visits YouTube they end up watching 30 videos! The reason? It’s the sidebar.
YouTube sidebar
By showing people related content with enticing screen shots from the videos, YouTube gets users to dig deeper and stick around longer than they normally would. All this browsing makes it more likely users will see an advert and interact with it.
9. Facebook
For some reason people always overlook Facebook when it comes to discussing excellent website and blog ideas. I think it is because it just seems to big and impossible to mimic. But the way they have designed sidebars is extremely indicative of what we as bloggers should be doing on our blogs.
YouTube sidebar
It shows insights into the page, what your friends are doing, and any important notifications. All of these things, when applied to a blog, can serve to really make your readers more addicted to your site. And aren’t we all addicted to Facebook?
10. Men with Pens
Like some of the others, Men With Pens uses its sidebar to promote the variety of services on offer.
Men With Pens sidebar
One thing I really like about this sidebar is that it is totally consistent with the rest of the design. It goes a long way towards keeping the site true to its brand. But, as always, the best thing about James’s work here is the copy. The way the calls to action are written in this sidebar are second to none.
Which is your favorite?
Leave a comment and let me know which sidebar is your favorite. It doesn’t have to be one on this list, either; if you know a good sidebar that I’ve missed, please drop the URL below. Lastly, will you be changing anything in your sidebar as a result of this post? Let us know.
The Blog Tyrant is a 26 year old Australian guy who plays video games at lunch time and sells blogs for $20,000 a pop.
You read my mind! I was just looking at my sidebar earlier this morning, thinking, “How can I make this better? More informative? More helpful? How can I get more clicks? More interaction?”
And then this post comes out. Thanks!
No worries. Glad you liked it.
I love Pat’s sidebar. It totally fits his personality and it helps him to build his brand.
Ha, my thanks, Tyrant! Our sidebar is a continual work in progress, always being tweaked and experimented, so it’s nice to hear when we’re hitting the right note with readers!
Love to know the conversion rates if you’d care to email me! ;-)
From a *nice touch* design point of view I quite like http://christianheilmann.com/
I’m pretty sure I’ve encountered a lot of equally great (or better) sidebars out there, it’s just that they’re not as popular maybe to those you mentioned above. The Blogussion sidebar for example is excellent in my opinion :) Also, you forgot to include Problogger’s. On second thought, I think that’s a given. Haha.
I was also wondering about this same thing. I am primarily concerned about making this work with a more minimalistic style without totally be devoid or overwhelming a potential visitor.
Yes sidebars can be very effective, I like the one on google news.
Great collection of Sidebar example, I like the sidebar at smart passive income. He has covered it nicely by making sure he has personal touch and subscription option above the fold.
I don’t really have a favorite sidebar site in mind. I think if it has too much clutter it can actually discourage people from checking out what you have to offer. On the other hand, you probably need something over there if you intend to make money. I guess it might take a little testing to see what works. Nothing wrong with changing the sidebar a bit to see if the results are positive.
thanks for the list. It gives a few good ideas.
Just a little note: all the links are broken, because you inserted “http” twice.
philip
Makes you realise how important the sidebar of a website is. I’m very bad for adding it in as an afterthought. Must put some effort into optimising it on my sites.
Cheers for the article :)
I like the facebook side bar the most. Its true we are addicted to facebook and should learn a thing or two from them. The side bar is really a shortcut to the many things available on your site. Side bars can be really helpful if they contain the right links.
Awesome roundup, mate! People do not really pay attention to what their sitebar looks like and here is where the “opportunity is lost”.
I really like how you’ve pointed out that sidebar should 1) convert people into subscribers; 2) take them deeper into the site; 3) help them connect with you on socials; 4) introduce you / your blog to new readers.
I recently wrote a post that touches on this as well.
I wanted to redesign my blog and I decided to go and “cut” the best pieces (including sidebars) of successful blogs and build my new design this way. You can see the result right here: http://bloggerjet.com/freddy-kruegers-guide-to-blog-redesign/
Cheers,
Tim Soulo
They look pretty flash.
I cannot decide between Tumblr, the Huffington Post or you tube.
I will probably develop the habit of comparing sidebars every time I visit a site from now on. Especially considering the level of importance you have attributed to them.
Very impressive collection in fact these examples are giving us new ideas and understand how dedicated are these people with their blogs, I like the sidebar of PAT its much attractive.
i liked the design of Huffington Post very much.
You know something dear tyrant? When I read the topic of this post then I understood immediately that it must be from you even before reading your name as you have written on such topics before.
The images that you use on your blog are really awesome.
Each one of these sidebars is so different and I have to say I like them all! I also like that you don’t have sidebars full of ads like so many bloggers do.
I put a big opt-in box at the top of my homepage, however, now I don’t have one in my sidebar – do you think I should have both? My sidebar features rotating testimonials at the top and ‘most popular posts’ below that. You have given me a lot of great ideas to consider for filling up the rest of the space. I’d love your opinion.
Great Post,Thanks for posting.
This is awesome, thanks for this. Just wondering if this can be used on blogger blogs
I’m very very like the facebook sidebar, it gotten update so often if you aware about it.
I love the Copyblogger’s way. Very light concept and effective at the same time.
I just like a side bar that is clean and neat. I would have to vote for ProBlogger or ViperChill.
I started my business on Facebook and have decided the time is right to expand with a blog. Thanks for the sidebar inspiration.
Copyblogger still has a sidebar on their blog, the landing page that is now the homepage is kind of a separate entity don’t you think?
Gregory, that’s correct. We have the new homepage, and a variety of no-sidebar interior landing pages. But the blog has a newly designed sidebar that I’m pretty proud of as well.
Men With Pens hands down! It’s simple, yet stylish, minimalist, yet attractive. When you go to their blog, its for the killer info, but the call to “get on the list” actually gets your attention first before the topic of the day. They do that with the crisp squeaky clean contrast between the black box and its totally white surroundings, coupled with a beautiful font.
I’d have voted for You Tube because they probably rate the highest for reader engagement. But that’s hard to duplicate if your niche has nothing to do with pop music or video. But to take your ideas further, bloggers can get do very well for themselves if they use the same concept with videos. That’s why I’m waiting keenly for Darren’s follow-up content on talking heads and whatever else you can do with videos. That little “play” button is awfully hard to resist, particularly if the topic is naturally interesting. Personally I don’t have the resources to start as yet, but if anyone else can get going with combining the You tube and talking head format with the “you may also like” teaser, I’m sure the rest of us would love to get their feedback on it.
I think the best sidebar is by lifehacker.com
Great topic! I try to refresh my sidebar as much as possible, with a focus on establishing credibility, generating email sign-ups, and generating leads.
And I’ve definitely got a ways to go to reach the effectiveness of the sites you’ve listed above.
I second your vote Justin, leaning toward ViperChill. Glen is a talented dude who knows how to make simple look spectacular.
Thanks for sharing BT!
RB
Nice list. I have always like Pat’s sidebar. The personal touch is amazing. The subscription box is well designed with the book hanging off of the page to grab more attention.
I attempted to mimic that on my blog.
Thanks This is a great topic and one that I haven’t seem much about!! Thanks for the reminder to go back and review my sites!!
I especially liked the “lastest assignment” from Digital Photography School. It inspired me to clean up my sidebar a bit, and really spotlight the latest technique that I’ve presented.
Hi Tyrant,
Great post – But 50% of the links doesn’t work. They miss they “:” in “http://” :)
Thumbs up for the Copyblogger page – It’s very slick!
These ARE fantastic. I finally got the balls to have someone review my blogs and received some fantastic feedback that helped me improve the look and navigation of my blogs, reduce wasted space on my sidebar, and just make things look nicer/flow easier.
It was the best decision I made and I can’t wait to see what the changes I made do to our bounce rate. This post will drive me back to the drawing board to look again at my sidebars, because I want to keep people clicking around (reducing my bounce rate and increasing post shares/comments). Thanks for the info and examples.
Kimberly
great list. i really adore the sidebar at Mashable. it is just superb and nicely designed too
Great list of sidebars.. Although I think Brian Clark is on to something because we’ve built an ‘immunity’ to sidebars because they are everywhere.
By standing out from the crowd, you stand a better chance to get noticed. And I think Brian Clark has done this. Even Men with pens did this at the top of their blog.
BTW, all the links in your list are improperly set-up.
Very helpful! We’re just starting out, and our sidebar is pretty vacant while we’re learning the ropes. This definitely provides some valuable direction. I really like number 10. It’s very informative without being so wordy that you just ignore it.
Pat’s short bio is also really great.
It’s hard to choose from those lot, they’re all offering varied data. But I guess, if you’re data driven, the Huff Post sidebar makes it easier for readers to explore other news/articles.
Smart Passive Income has the best one.
Disclaimer: I’m a big fan of Pat. His site is great!
I like Huffington Post;s sidebar the best. It’s so much better and simple.
Is there a way to make Side Bars Easily?
I was looking for sidebar inspiration. These examples are great for traffic conversion. Thanks
The one I use the most is Facebook. The one I like the most is Men with Pens. Sidebars are one of those things I’m never completely satisfied with, but then again, it’s the one element that feeds my OCD urges so I don’t drive those in my real world nuts.
Nice post, thanks for tempting my OCD urges – I’ll be busy for days now. :)
Love the new design of CopyBlogger, simply awesome… Thanks for listing all of them at one place
Personally, I love the sidebar at http://www.gawker.com/.
By narrowing it down to just the most important info, they’ve glued it to the screen, so it scrolls with you. That way, no matter where your reader goes, your sidebar is above the fold!
I wants that sidebar. I wants it.
Thanks for this list. I am always looking for ways to improve my sidebar and you’ve given me some nice ideas!
WooW …. this is a nice collection.
Thanks a lot for sharing .
I agree with this list. But, I also think google has a pretty intelligent sidebar, in both news and the search results pages.