The Science of What Makes Sidebar Content Effective

Sidebar tutorials are everywhere. With one search on Google, you can learn how to build collapsible sidebars with Bootstrap and jQuery, implement conditional sidebars in WordPress, and move your sidebar from one side to the other in any CMS. What you won’t find often are tutorials on what constitutes effective sidebar content.

Your sidebar content isn’t the main attraction, but just like the baked potato that comes with your steak, it’s an important part of the dish. Here’s what you can do to craft it well:

  1. Don’t fuss over left vs. right sidebars

Naturally, you want your sidebar to be in the right spot, but if you’re looking for statistics to tell you which side is better, there’s no objective answer. Some statistics support left sidebars for corporate websites while others support right sidebars for bloggers. Other studies say it doesn’t matter at all.

In truth, it’s not the side you choose that matters; it’s how you use your sidebar. A sidebar without a purpose is useless, no matter where you put it.

If you’ve been running your site for years and your sidebar has always been on the left – keep it on the left. Your visitors are familiar with it, and you want to keep it that way. If you move it to the right, you’ll interrupt your regular visitors’ routines.

If you haven’t launched yet, you’ve got some deep thinking to do, and tough decisions to make. The content in your sidebar should determine where you put it. For instance, if you’re using the sidebar as secondary navigation that remains on every page, then place it on the left. Users are used to scanning left-to-right when it comes to navigation; it won’t feel natural to navigate pages from a right-sided menu.

If, however, your sidebar contains secondary content like social media feeds, email signup forms, or ads, then place it on the right. Left sidebars command immediate attention, and you don’t want your secondary content distracting visitors from your main content.

  1. Create visible, aesthetically pleasing section headings

A great sidebar should be seen, but should not be the main attraction. Your visitors should be able to navigate each of your sidebar sections quickly and smoothly. This is done with section headings and sometimes dividers.

Some people use graphic images to separate their sidebars, but images can be distracting. When people are scanning your site for information, you want them to read your sidebar headings and know immediately if that’s the content they want.

Headings should be big, easy to read, and match the typography and colors of your site. Green Residential crafted sidebar headings that integrate all of these elements, and included one more: light borders around all headings. While boxed-in content with bold borders is popular, it’s a design element that interrupts the visitor’s flow. People pause when they see thick lines.

  1. Use your sidebar to hold unique content for each page

Most content management systems can be manipulated to display sidebar content conditionally based on page. For example, you can create ten different sidebars with unique content that display only on assigned pages.

Using sidebars this way can help your visitors access your content better. For instance, say you have a page dedicated to your services. Rather than forcing visitors to read a long section of content in the main area, you can use your sidebar to highlight specific aspects of your services.

If you’re a business coach, you might highlight some testimonials, special offers, or the types of businesses you’ve helped succeed. If you sell party supplies, you might highlight the types of parties your supplies are used for.

  1. Avoid using social sharing plugins and scripts that cover your sidebar

People won’t pay attention to your sidebar if the content is covered.

Floating social sharing widgets are popular, but many are overlaid on top of pages rather than being integrated into the site’s existing CSS. When the site’s existing CSS doesn’t apply to the floating widget, it usually ends up covering some of the content. When a separate design element covers your content, visitors are going to think it’s not important and they’ll ignore it.

Sometimes expanding the size of the browser window creates a margin between the widget and the content, but not usually. Before you install a plugin or script that floats a social sharing widget on the side of your page, check to make sure it works in multiple browsers as well as on mobile devices.

Plan your sidebar content well

By identifying a purpose for your sidebar content, you can avoid the mistake of filling up a sidebar just because it’s part of your template. If your content isn’t intentionally placed, it’s better to have no sidebar at all.