When building a new website, you’ll always tackle numerous layout and functionality hurdles. One of them is the placement (or not) of the infamous sidebar.
The most common place to find a sidebar these days is on a blog. Either on a blog-based website or in the blog section of a company website. Landing pages and service pages hardly ever have sidebars anymore; it’s actually quite rare to find a company website with a sidebar.
Let’s look at why the sidebar is losing popularity in some circles while still alive and kicking in others!
Building a website and choosing layouts
Back in the early 2000s, it used to be quite common to have a website with a sidebar on each side and the content in the center. Both sidebars would be full of ads, offers, and other distracting graphics or blinking gifs. It was hard to stay focused on the actual content. But then as time went by, the sidebars got a bad reputation and people started having sidebar blindness.
The usual two-sidebar layout passed on to the sidebar on the right, and from there, to no sidebar at all. The newest WordPress templates now have no sidebar or a no-sidebar option.
Some say that having a sidebar is great for clicks, navigation, and user experience, while others say that the sidebar is pretty much dead space.
With the rise of mobile use, it’s also necessary to remember that on small devices, the sidebar usually only shows up at the very bottom of the main content.
So how do you know if your site needs a sidebar (or two)?
Getting down to the nitty-gritty of a website, it’s all about user experience. If a sidebar will help visitors navigate the site in an easy and non-confusing way, then add it. If you have other creative ways in which navigation can be dealt with seamlessly, ditch the sidebar.
The most common solution is to have a main page or landing page without a sidebar, and then a sidebar in the blog section. What you include in your sidebar will depend on your specific site, but the main things are:
- A subscription option
- Related posts
- Author bio
The amount of ads in a sidebar is what will make or break the experience. If it’s all full of ads, it’ll be instantly ignored (or at least winced at). If the content in the sidebar is genuinely good, then an ad or two won’t be a bother. Bonus points if the ad fits well visually with the rest of the design!
Let’s look at some layout examples so the next time you have to cross the sidebar hurdle, you’ll be more informed and hopefully more inspired!
Evolution from three columns to two sidebars and back again
I mentioned before that website layouts with two sidebars are mostly a thing of the past. What I didn’t mention is that this type of layout was just an extension of the well known “Three Column” layout. This means there are still some websites out there using two sidebars and killing it in the process.
The difference between two sidebars and three columns can be deduced from the names themselves. Two sidebars means there is one main content area and two accompanying bars. A three-column layout is more of a design mechanism for organizing content. There’s still a hierarchy, but it’s used in a way that makes more sense than just extra content on the sidelines. The three-column layout is great for online periodicals like magazines or large blogs.
Take a look at the website for Grain Edit. They have a three-column layout that is essentially a two-sidebar layout, but well done. The main content is on the left, and the two sidebars are on the right. These sidebars do not change throughout the site, only the content on the left does.
What works so well on these two sidebars is that they aren’t invasive (due to how the page layout is boxed) and there’s so much empty space on either side. The empty space on the left side helps the reader stay on track while reading the text without any distraction at the eyeline.
Another great example of a well designed three-column layout is the website for Mashable. Their front page has three sections, ‘What’s New,” “What’s Rising,” and “What’s Hot.” The columns are well organized and the content has different sizes, from smallest on the left to largest on the right.
In the case of the Mashable front page, you can barely call any of these a sidebar at all! All three columns are full of great content. Once you click on any of the articles, the layout changes to the classic main content on the left and sidebar on the right.
It’s actually a conceptual layout. When content is new, it goes in the left column. If it starts to trend, it moves to the middle column. And if it goes viral, it makes its way to the largest column at the right.
The classic blog layout still reigns supreme, but to what extent?
The blog layout we’re all used to is the one with the content on the left and the sidebar on the right. Some blogs do it well while others are still dependent on the sidebar space for placing all the ads they could possibly fit. I’m sure you’ve seen those around.
New bloggers looking to make money with their blogs will usually cramp the sidebar with all sorts of things, much more than what’s needed for good user experience. This blog (Layout!), on the other hand, has a simple and non-invasive sidebar with four sections: a subscription box, a list of popular posts, a CTA to Local (a free app), and a link to more info about the Flywheel platform.
Another blog, ThinkSEM, has a minimal sidebar with only two sections housing four simple things: categories, archives, a subscription box, and an offer for their services. That’s it. As soon as you scroll past those boxes, it’s all about the content on the article.
The “No Sidebar Movement” and ways to get around it
A few years ago, a website developer and blogger, Brian Gardner, started a minimalistic movement called The No Sidebar Movement. He wasn’t the first to create blogs and websites without a sidebar, but he was the first to really get the word out about how to do it well. His manifesto is all about living a minimalist life without unnecessary distractions. He visualized this way of life by getting rid of the sidebar.
His blog and community, No Sidebar, has grown exponentially the last few years. Brian and his team inspire a minimalistic lifestyle as well as the new generation of no-sidebar bloggers. He went on to create his own No-Sidebar WordPress template, available for anyone looking to create a functional and beautiful blog without a sidebar.
The No Sidebar blog is the ultimate example of how to not have a sidebar. There is literally nothing on either side of the content, not even social media sharing buttons. But not all blogs can be this extreme, even with no sidebar.
So how do you manage to have a blog with no sidebar and also include important information on the page? One of the best examples is the Medium layout. Inside the articles, there is no real sidebar; just a tiny little section for claps and shares. Lots of blogs that decided against the sidebar have this layout: content in the middle and the sharing buttons on the side. Sometimes they have a little author image.
Sidebars, conversions, and A/B testing
If you’re still on the fence about keeping or scrapping the sidebar, you’re probably worried about clicks. Maybe a lot of your conversions come from the offers on your sidebar. Brian Harris from Video Fruit conducted A/B tests on his site to see if there were more clicks with or without the sidebar. The results were positive for the no sidebar version. He got rid of the sidebar on his blog for good.
A/B Testing is when you create a test for two different things inside your website. Some WordPress themes like DIVI will let you do this. For other themes, you might have to look into the back-end for a solution. This article from Crazy Egg might be able to help.
So what do you think? Is the sidebar on the road to extinction? I personally don’t think so. But I do think that more and more people will find ways to get rid of it on their own sites, while others will keep filling them with ads.
The sidebar choice about your own website or your client’s website really depends on their visual style and brand message. Now that you’ve looked at different options, it might be easier to make a decision in the future.
Next: Master the web design trends of 2019!
Explore the inspiring web design trends of 2019 (plus get the resources to create them!) with our free email course. Click here to sign up for the free course today!
Loved this article? Try one of these: