Table of Contents
What is a Sidebar in Web Design?
Common Placements of Sidebars
Sidebar vs. Header, Footer and Main Content
Main Functions and Purpose of a Web Page Sidebar
Responsive Design Considerations
Prioritize Above the Fold (Desktop View)
On a few occasions, clients have asked me what was that “thing on the side” of their website pages. Back in the day, before smart phones gained popularity, most people browsed websites from their larger desktop monitors. As such, implementation of sidebars seemed to be an effective way to better organize web page content.
Sidebars are used to display extra info (such as online forms, side menus, etc.) next to the web page’s core content. Now, despite the ubiquitous use of mobile devices, the implementation of web page sidebar still remains strong. So, what exactly is a sidebar? Why does it matter for keeping users engaged and driving results? Let me break it all down.
What is a Sidebar in Web Design?
A sidebar in a web page is a vertical column that sits either to the right or left of the main content area. It holds ancillary information (such as menus or online forms…contact, registration, service request, etc.), that helps to more easily distinguish it from the main content.
Sidebars are popular on news, blogs and e-commerce websites because of their usefulness in effectively providing secondary content that can enhance user engagement and user experience.
Common Placements of Sidebars
Traditionally, websites place the sidebar on the right side of the web page, however, it depends on the purpose. For example, you may want to place the main navigation element within a left sidebar of the web page, because it facilitates a better user experience (in languages where users read from left to right). Or if you want to increase conversions, it may be a good idea to place a call-to-action, such as a “Request Service” form, inside a right sidebar.
Sidebar vs. Header, Footer and Main Content
The header sits at the top of a web page, often containing the organization’s logo and main navigation links. This is a great way to immediately grab your visitors’ attention, as this should be the first thing they see on your website.
The footer sits at the bottom of the web page with less pertinent “secondary” information such as copyright verbiage and/or links to privacy policies, contact info, etc.
Main content is the central section below the header, but above the footer, containing information that is the primary or main topic of the web page.
Headers and footers are sections of a web page that repeat the same information, such as logo, navigation, links, copyright, etc., across all web pages.
While sidebars can contain the same information from page to page, sometimes they are used to contain unique/dynamic information for each web page.
Main Functions and Purpose of a Web Page Sidebar
Enhancing Navigation and Accessibility
Sidebars are great for displaying navigation. For example, they can contain secondary navigation/menus that let users jump to content more easily. In long articles, a table of contents in the sidebar saves time.
Driving Conversions and Lead Generation
Want more leads? Put a request a quote form in the sidebar. This can be quite an effective location to place calls-to-action that increase conversions. Some studies have suggested that sidebar CTAs can really boost clicks due to enhanced visibility.
Displaying Contextual or Related Information
Sidebars can also add depth with related posts or popular articles. They suggest more to read, which can keep users hooked.
Responsive Design Considerations
Mobile usage changes everything. In a responsive website, sidebars generally fall below main content on small screens, such as those of smart phones. This keeps things readable.
Challenges include reflow issues, content jumps if not coded correctly. This includes the implementation of media queries in CSS for smoother layout shifts.
Prioritize Above the Fold (Desktop View)
Above the fold is the immediately viewable content on your web page before scrolling downward is required. Thus, having your sidebar appear above the fold is recommended, especially if there is an important CTA.
EMAIL US