Sidebars have been a mainstay of website designs for years. They provide a handy content area for navigation, summaries, calls to action, social media feeds, and all those little extras that don’t seem to fit anywhere else. They can also slow your site down, distract your users, and display strangely on mobile devices.
So are website sidebars still desirable? As with most design decisions, it depends.
We know that opens in a new windowwebsite users typically scan a web page in an “F” pattern, going across the top in one horizontal band, scanning across a little further down in a second horizontal band, then down the left side in a vertical band. This suggests that the most useful information (logo and primary navigation) should be at the top of your site. A recent opens in a new windowGerman studyopens PDF file showed that this behavior persists on mobile devices as well, with an even stronger emphasis on the left vertical band. Thus, a left sidebar can be a helpful place for important information as well.
The Case For Sidebars
Navigation: If you have several levels of navigation or page-specific navigation, include them in a left sidebar. Your users will see them easily, and they will appear properly on mobile devices. Subnavigation can also be put in a right sidebar, but be aware that it will move below your main page content on mobile devices, making it invisible to users unless they scroll all the way down.
Highlighted Content: Sidebars can showcase blog posts, testimonials, contact forms, or other content. Since this content is secondary, put it in a right sidebar so that it won’t compete with your main content, and so that it will display below the main content on mobile devices.
Calls to Action: Sidebars can hold big buttons, colorful links, and other calls to action. Theoretically, this makes them more likely to be clicked, since they’re visible on every page. In practice, however, it’s still best to place calls to action in your header or main content area.
The Case Against Sidebars
Landing Pages: In general, a landing page website should be clean, simple, and drive users elsewhere (e.g, to an order form). Sidebars in this case could clutter and confuse.
Simple Content: If your website content is lean, ditch the sidebar. Use the clean full-width page to display your message as quickly and simply as possible.
Repeated Repetitive Redundancy: Sidebars can give website visitors multiple ways to find things. However, they can easily end up as a catch-all for options available elsewhere. Sidebars shouldn’t be used to remedy sloppy site architecture. Instead, organize your navigation properly to lead users through your site.