Let\u2019s look at why the sidebar is losing popularity in some circles while still alive and kicking in others!<\/p>\n\n\n\n
Building a Website and Choosing Layouts<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
With the rise of mobile use, it\u2019s also necessary to remember that on small devices, the sidebar usually only shows up at the very bottom of the main content.<\/p>\n\n\n\n
So how do you Know if your Site Needs a Sidebar (or Two)?<\/h2>\n\n\n\n
Getting down to the nitty-gritty of a website, it\u2019s 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.<\/p>\n\n\n\n
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:<\/p>\n\n\n\n
- \n
- A subscription option<\/li>\n\n\n\n
- Related posts<\/li>\n\n\n\n
- Opt-ins<\/li>\n\n\n\n
- Author bio<\/li>\n\n\n\n
- Ads<\/li>\n<\/ul>\n\n\n\n
The amount of ads in a sidebar is what will make or break the experience. If it\u2019s all full of ads, it\u2019ll be instantly ignored (or at least winced at). If the content in the sidebar is genuinely good, then an ad or two won\u2019t be a bother. Bonus points if the ad fits well visually with the rest of the design!<\/p>\n\n\n\n
Let\u2019s look at some layout examples so the next time you have to cross the sidebar hurdle, you\u2019ll be more informed and hopefully more inspired!<\/p>\n\n\n\n
![\"options](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/08\/image7.jpg\")
<\/a><\/figure>\n\n\n\nEvolution from Three Columns to Two Sidebars and Back Again<\/h2>\n\n\n\n
We mentioned before that website layouts with two sidebars are mostly a thing of the past. What we didn\u2019t mention is that this type of layout was just an extension of the well known \u201cThree Column\u201d layout. This means there are still some websites out there using two sidebars and killing it in the process.<\/p>\n\n\n\n
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\u2019s still a hierarchy, but it\u2019s 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.<\/p>\n\n\n\n
Take a look at the website for Grain Edit<\/a>. 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.<\/p>\n\n\n\n
![\"desk](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/08\/sidebar-screen-replace-grain-edit.png\")
<\/figure>\n\n\n\nWhat works so well on these two sidebars is that they aren\u2019t invasive (due to how the page layout is boxed) and there\u2019s 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.<\/p>\n\n\n\n
Another great example of a well designed three-column layout is the website for Mashable<\/a>. Their front page has three sections, “What\u2019s New,\u201d \u201cWhat\u2019s Rising,\u201d and \u201cWhat\u2019s Hot.\u201d The columns are well organized and the content has different sizes, from smallest on the left to largest on the right.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
![\"mashable](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/08\/mashable-laptop-screen-replace-1.png\")
<\/a><\/figure>\n\n\n\nIt\u2019s 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.<\/p>\n\n\n\n
The Classic Blog Layout still Reigns Supreme, but to what Extent?<\/h2>\n\n\n\n
The blog layout we\u2019re 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. we’re sure you\u2019ve seen those around.<\/p>\n\n\n\n
New bloggers looking to make money with their blogs will usually cramp the sidebar with all sorts of things, much more than what\u2019s needed for good user experience. <\/p>\n\n\n\n
Look at this 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\u2019s it. As soon as you scroll past those boxes, it\u2019s all about the content on the article.<\/p>\n\n\n\n
![\"think](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/08\/sidebar-think-sem-screen-replace.png\")
<\/figure>\n\n\n\nThe \u201cNo Sidebar Movement\u201d and Ways to get Around It<\/h2>\n\n\n\n
A few years ago, a website developer and blogger, Brian Gardner, started a minimalistic movement called The No Sidebar Movement. He wasn\u2019t 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.<\/p>\n\n\n\n
His blog and community, No Sidebar<\/a>, 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<\/a>, available for anyone looking to create a functional and beautiful blog without a sidebar.<\/p>\n\n\n\n
![\"nosidebar](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/08\/sidebar-endangered-species-nosidebar-screen-replace.png\")
<\/a><\/figure>\n\n\n\nThe 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.<\/p>\n\n\n\n
So how do you manage to have a blog with no sidebar<\/a> and also include important information on the page? One of the best examples is the Medium<\/a> 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.<\/p>\n\n\n\n
![\"desktop](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/08\/sidebar-medium-screen-replace.png\")
<\/a><\/figure>\n\n\n\nSidebars, Conversions, and A\/B Testing<\/h2>\n\n\n\n
If you\u2019re still on the fence about keeping or scrapping the sidebar, you\u2019re probably worried about clicks. Maybe a lot of your conversions come from the offers on your sidebar. Brian Harris from Video Fruit<\/a> 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.<\/p>\n\n\n\n
Neil Patel from Crazy Egg<\/a> is a cheerleader for the sidebar, but only uses it in his own Neil Patel<\/a> Blog. The Crazy Egg blog doesn\u2019t have one. He\u2019s probably doing constant A\/B testing on his sidebars.<\/p>\n\n\n\n