Latest posts by Andrea Ferguson (see all)
- Quick Thoughts on Where to Put Your Sidebar (or, Ode to the Sidebar) - March 7, 2017
- The Return of the Beautiful Web - March 5, 2017
- Creating Solutions Beyond the Obvious: Ideation - February 1, 2017
Ode to the Sidebar
Ah, the website sidebar.
Holder of secondary navigation,
Keeper of ad space,
And container for random things
Where else to
They’re not absolutely necessary, but if you decide to use them, please use them well.
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
Properly placed sidebars
Help your users.
Helped users are happy users.
Happy users become