As someone who owns a business or works in web design, it’s common to ask yourself questions about what’s best for your website. After all, you want to be sure users have the best experience navigating it. If you plan on updating your site or building a new one, a question you may be asking yourself is whether you should design a website with a sidebar.
Are they still relevant since UX design best practices are constantly changing for the better? Or, are they obsolete? To help you make the right choice for your next project, you must weigh the pros and cons.
What Is a Sidebar On a Website?
A sidebar is a vertical column on a website, typically located to the left or right of the main content. On websites, sidebars are used to hold extra information, navigation links or important features that users may need. Essentially, they’re there to help the user find additional parts of the website that the site owner believes would be helpful to the user. However, it’s placed on the website strategically to avoid being in the way of other important information.
Today, sidebars are still quite beneficial in web design. They’re useful because they make it easier for visitors to find what they need without searching the entire page. However, the relevance of sidebars depends on what your website aims to do.
Before, there was a time when sidebars were a must-have element on a website. Yet today, you must determine whether it’s the right design choice for you. For example, for a blog or a news site — where lots of content needs to be accessible — a sidebar can be incredibly helpful.
However, a sidebar may be extra clutter for a sleek photo gallery or a minimalist design. Therefore, it’s about choosing what’s best for your visitors, making sure they can use your site with ease and pleasure.
The Pros and Cons of Having a Website With a Sidebar
While a sidebar can be useful for multiple purposes, you want to be sure your website is user-friendly. Here are some of the pros and cons to help you understand why they can be beneficial but could also end up being obsolete.
- Organization: Sidebars structure the layout by separating additional information from the main menu.
- Easy access: Users can quickly find tools, links or information without scrolling through the webpage.
- Ad placement: They provide a space for advertisements when the website owner aims to monetize it.
- Engagement: Sidebars can house calls-to-action, advertisements or subscription forms that engage visitors.
- Content highlight: You can put important popular posts, upcoming events or featured products in the spotlight.
- Clutter: If not designed well, sidebars can make a page look crowded, overwhelming users with information.
- Mobile unfriendly: Sidebars can be problematic on mobile devices, often pushed to the bottom or requiring special design adjustments.
- Distracting: They can divert attention from the main content, especially if they’re too flashy or packed with information.
- Reduced space: A sidebar can take up valuable space, making the main content area smaller, which may not work well for certain design aesthetics.
- Overuse: Some sites use sidebars unnecessarily, filling them with irrelevant content, which can diminish the overall user experience.
Examples of Websites With Sidebars
To give you some ideas for how other website designs implement sidebars strategically, here are a few examples to look at.
Big Creative Cat
Big Creative Cat’s website showcases a right-aligned sidebar that is appealing and functional. The sidebar features an image-based CTA for “free training” on DIY website design. This design approach entices visitors with a personalized touch, offering value while allowing easy access to the site’s main content.
Alongside, there’s a minimalistic yet informative description of the training, emphasizing its importance for budding web designers. The sidebar effectively complements the main content, enhancing the overall user experience without overshadowing the primary information.
Cambrea Bakes offers a cozy, warm aesthetic tailored for baking enthusiasts. The right-aligned sidebar introduces Cambrea, the blog’s author at Cambrea Bakes. A personal touch is added with a professional photo, establishing a connection between the creator and her audience.
However, this sidebar serves more than one purpose. It also provides a quick navigation to seasonal Fall and other popular cookie recipes. Simultaneously, it has room for one ad placement for monetization. The sidebar is the perfect companion to the main content, making navigation seamless and personalized.
The Pro Sidebar
The Pro Sidebar designed by Mohamed Azouaoui on CodePen exemplifies modern web design. At a glance, it’s evident that the sidebar is crafted with functionality and responsiveness in mind. Various components — from charts to maps — ensure there are options for navigating to different parts of the website. This sidebar is great for adapting varying screen sizes, providing the user experience is consistent across devices.
This is partly because the sidebar is collapsible. Sidebars that collapse are essential for maintaining a clean layout. At the same time, it provides easy access to other options. Plus, it’s great for those viewing a website on a mobile device, ensuring it ranks for mobile-first indexing.
Types of Websites That Benefit From Using Sidebars
Sidebars can be integral to website design in the right setting. With that in mind, certain types of websites particularly benefit from sidebars:
- Blogs and news sites: These can display categories, recent posts, tags or even advertisements. This makes content discovery more straightforward and increases page views.
- E-commerce websites: Sidebars can streamline the shopping experience by listing categories, filters or promotional deals, guiding customers to the most desirable products.
- Educational and resource portals: With vast content spanning many topics, a sidebar can categorize and provide quick access.
- Portfolios: For artists or professionals, sidebars can list different project types, client testimonials and even a resume.
- Forums and community websites: With various discussion threads, sidebars can prioritize hot topics and recent discussions.
Websites With Sidebars: Should You Use One?
A sidebar can be a strategic tool for enhancing user experience, especially when organizing and prioritizing content-heavy websites. However, the decision to design a website with a sidebar depends on the type of website you have. If you decide to use one, ensure it’s clutter-free. Prioritize essential items and consider a collapsible design for mobile views.
While trends in web design are continually evolving, the functionality and purpose of sidebars remain important. Be innovative, trust your design instincts and always prioritize your users’ needs.
About The Author
Eleanor Hecks is the Editor-in-Chief of Designerly Magazine, an online publication dedicated to providing in-depth content from the design and marketing industries. When she's not designing or writing code, you can find her re-reading the Harry Potter series, burning calories at a local Zumba class, or hanging out with her dogs, Bear and Lucy.