Quick Thoughts on Where to Put Your Sidebar (or, Ode to the Sidebar)

Andrea Ferguson

Andrea Ferguson

President at AndiSites Inc.
Andi is founder and President of AndiSites Inc. She writes about website design and development, best practices, and random stuff her busy brain thinks would be useful.
Andrea Ferguson

Ode to the Sidebar

Ah, the website sidebar.
Holder of secondary navigation,
Keeper of ad space,
And container for random things
That
You don’t
Know
Where else to
Put.

They’re not absolutely necessary, but if you decide to use them, please use them well.

Content matters.
So does location.

How to Use Sidebars

Here’s a few good takeaways from our friends at Webdesigner Depot:

  • Navigation elements (e.g., WordPress Custom Menus) should go in a left sidebar. Some sites put their primary navigation in the left sidebar, but it’s better used for secondary navigation:  additional navigation items or categories that help the user but don’t fit into the main navigation area (typically displayed at the top of a site).
  • Right-hand sidebars are more common, but their content is likely to be missed. Eyeballs don’t naturally land on the right-hand side of a web page, so don’t put important information there. Note that ads placed in right sidebars cost less than ads located in other places on a page. That should tell you something.
  • Sidebars are good for highlighting additional interesting content. You can include links to related posts or pages, leading users further into your site.
  • Dual sidebars are an option, but use with care. Using left and right sidebars easily results in information overload. Be sure that the most important items are in the left sidebar. Use the right one for less-crucial elements like social media links and RSS feeds.

Sidebars are still popular, and we love them for secondary navigation on information-heavy sites and “persistent” information like APPLY NOW buttons, search boxes, and shopping carts. They look lovely on mobile-responsive websites, becoming nice little “chunks” set apart from your main content.

In addition to information hierarchy—placing more important information on the left and less important on the right—you must also consider how your site reformats on mobile devices.

“Restacking” typically happens left to right. This means that on a mobile device, your left sidebar appears above your main content, which appears above your right sidebar.

If you have plentiful page content, and you place important items like navigation in your right sidebar, users are unlikely to see it without scrolling down the entire page.

Ode to the Sidebar

(Epilogue)

Properly placed sidebars
Help your users.

Helped users are happy users.

Happy users become
Happy customers.