All About Website Sidebars: Content, Design, and Examples

All About Website Sidebars: Content, Design, and Examples

What goes into your sidebar? Some site owners may choose to fill it up with anything – a place for anything and everything, just like a website junk drawer. However, a sidebar can be valuable real estate on any website, and depending on what the website’s purpose is, can help further reach the goals of the website.

All About Website Sidebars: Content, Design, and Examples

In this post today we’ll talk about sidebars in detail, from what goes in them to how they’re designed. Both can have a profound effect on how the website is used, and what content is highlighted. What’s featured can even have an effect on how and how often that content is used. We’ll also take a look into some examples of websites that use sidebars correctly in a number of different niches.

What’s a Sidebar For?

A sidebar is not the main content. It is usually not for a primary means of navigation. (Although there are some exceptions where primary navigation is included towards the top of a sidebar.) So what is a sidebar for? A nice design filler or excess real estate on the web page? Of course not – a sidebar can have many purposes that are practical, and very usable.

A sidebar is most often for secondary content purposes. Secondary content is indeed essential to a website, even if its attention doesn’t come first. Content that can help users navigate in a different way (e.g. by content they may be interested in, over a logical navigational menu), it can highlight sections of the site that need to gain more attention to meet the goals of the site, and a sidebar can be a great place to hold content that needs to be included, but shouldn’t take away focus from the main content.

Let’s look a bit now into what secondary content may be.

Left and Right Sidebars

Where main elements should go on a website is one of the first considerations in web design. If a website needs a sidebar, where should it go – to the left or to the right? Or, should there be two sidebars, one on each side? Or perhaps two sidebars, both on either side? For many it may seem like a silly decision, but we as designers know that it can have a real impact.

Deciding on how many sidebars has an easy answer that depends on how much content is needed to be featured. If it’s getting too crowded, separate it into columns. Then one can decide on where to place them. Otherwise, just go with one for simplicity. Below we’ll cover the pros and cons of each option and how to best work with each situation, whether using one sidebar or two.

Left Sidebar

Left Sidebar

Pros:

  • Left sidebars gain the most attention, and gain the attention first. They’ll have higher hierarchy and content in this sidebar will be noticed before the main content. This is best for primary navigation, basic user functionality (for web apps), and so on.
  • Categories, Post titles, and indexes and so on that would lead directly to content can help the user navigate to content quicker. Suggested topics or titles are not recommended, and should be secondary navigation.
  • If the list of primary navigation is extensive, there may not be a lot of room to fit it into a horizontal navigation bar. A left sidebar is good for this as it will be noticed first.

Cons:

  • Left sidebars can get in the way of other content if the wrong content is placed inside of it. Left sidebars should only be used to promote the content to the right of it, not lead the user away.
  • Most websites use right sidebars, so unless a left sidebar has a practical and smart purpose, it goes against regular design patterns, which diminishes the usability of the website.

Right Sidebar

Right Sidebar

Pros:

  • Right sidebars are generally the standard because sidebar content is usually secondary, and right-hand sidebars are second in hierarchy.
  • For smaller screens, if the design is not responsive or flexible, the right sidebar of less important items will be cut off as opposed to the essential content. While this is undesirable, it’s a better fallback than having the user scroll to read content.
  • Cons:

    • It is a secondary location in terms of hierarchy, so if important information is held there, it may not be noticed.
    • Ads within right sidebars may have less monetary value, although they should be secondary content anyway.

    Splitting Sidebars

    Some websites feature two sidebars, one on each side. For websites that need to hold a lot of information on each page, this approach can be beneficial. However, a negative use for this is when important and less important content is switched between the two sidebars without consideration.

    Split Sidebars

    To use this design pattern effectively, place primary navigation, main web application uses, and so on to the left, and additional features and secondary content to the right. If it is all one or the other, then splitting the content up on either side should be avoided. Rather, place all the content into multiple content (separate practically) and place to either the right or left of the content. Furthermore, content can be organized based on hierarchy where the left-most sidebar places higher than the right-most, even if they are both on either side of the main content.

    Content for Sidebars

    What content do you want featured? A better question may be: what content benefits most from being featured? Is there a site section that is not well-known but has great potential? Or, would it be more beneficial to highlight a site section that is already very popular – making it easier for new and returning visitors to go to that site section again?

    A great purpose for a sidebar is to highlight content in short blurbs, lists, or images. While the primary navigation may still be available, sidebar content can act as essential navigation as well.

    Sidebar Content Can Further Define a Site Section

    Having a link to a site section up top is essential, but it can also benefit from being included in the sidebar as well, along with a blurb, imagery, or otherwise that can help give it more attention.

    Sidebar Blurb

    There is a link to “services” above in the primary navigation, but it is further defined as a sidebar block again, with a bit of a blurb to really give this site section attention. The author wants more attention on his services (one of the main goals of the site), so he highlights it once again in the sidebar.

    Sidebars Can Highlight Most Popular or Recent Content

    Any content that needs to be highlighted again, or highlighted by a different categorization method can be done well in the sidebar. Anything that requires skimming is great in a list within a sidebar.

    Latest Popular

    The latest posts from the entire network and most popular posts are highlighted in the two sidebars to the right here. All of this content could be found if needed through the main navigation methods, but highlighting it to promote interest in the content is a great function for the sidebar.

    Sidebars can Fuel Community Interaction

    Another common trend we see on the web are websites that feature Twitter feeds, RSS feeds, Flickr feeds, latest comments, and so on. This is for a good reason – websites with a strong community are successful ones. One way to increase interactivity on a site is to allow users to see how other users are already using the site – allow users to see what the “popular” thing to do is.

    Doug Tweets

    Some websites hold a lot of features that create community while others can be fairly static. However, even for the personal site of Douglas Menezes, latest Tweets are featured that can promote a community around him as a designer and as a web presence.

    Sidebars Are Great Unobtrusive Places For Advertisements

    Lastly, and perhaps the most obvious, is that many ads go into sidebars. Off to the side, and out of the way of the content – a great place for ads to still get noticed, but not in an obtrusive way that would annoy visitors.

    Ads

    Ads are usually placed towards the top of a sidebar, usually in order to give the ads more monetary value. However, it has also become standard and therefore many users now expect that design pattern – making it even less obtrusive. Using quality ads that are relevant for users can also act as valuable content if those visitors happen to be interested. Towards the bottom, other sidebar content may not be as essential, yet still help peak interest to new content.

    Sidebar Design

    Below is a small showcase of how some popular websites have organized and designed their sidebars. Take note of all the best practices used (see below), and how we see some of the common trends mentioned above being used.

    Instant Shift
    Everything in this sidebar is well aligned and well designed. While much of the content in the sidebar is non-essential and merely promotional, it is separated clearly between design elements and blocks. One unique part of this sidebar design is that ads are featured up top, but then are also featured throughout the sidebar content as you scroll down. This can create more useful and effective advertising space without interfering with other sidebar content.

    Instant Shift

    Copyblogger
    Copyblogger uses a lot of sleek design elements to give each section the proper hierarchy within the sidebar. Also note how the design elements of the sections within the sidebar have the same sleek look as the advertisements, creating design repetition and also helping the content and ads integrate together.

    Copyblogger

    Income Diary
    Income Diary uses a lot of blurb and imagery in the sidebar to attract users to other areas of the site. Enticing sidebar content gets the visitor more involved in the site, helping them stay there longer, find more useful content, and ultimately turns them into recurring visitors. There is also a nice use of tabbed lists and advertisements that go along with this same goal of the sidebar content.

    Income Diary

    Problogger
    The Problogger sidebar puts all the relevant information for subscribing or following the Problogger brand into one confined box, relating all the content together. Each section in the sidebar is clearly defined from one another through this boxing method, although there isn’t a lot overall in this sidebar. In this example, the entire front page acts as a sidebar – promoting content and highlighting what’s needed throughout the rest of the site. The simplicity is kept, however, on the inner pages as well.

    Problogger

    Sidebar Best Practices

    • Place advertisements and search bars towards the top if included in the sidebar. Search bars are a main source of navigation if needed and must be easy to find, and advertisements have higher monetary value when seen on first view of the page.
    • Separate content-heavy sidebars into multiple columns for better organization.
    • Never fill up a sidebar with content just because. The more content that is in the sidebar, the more attention it takes away from everything else within that sidebar, as well as from the content throughout the rest of the site that needs focus. Have a purpose.
    • Separate pieces of sidebar content into visual boxes, or create hierarchy in another way. Not all sections need to look the same, and many can benefit from standing out more than others. This also creates a much more interesting and organized web design overall.
    • Use tabs, collapsible layers, and more to show or hide related content as necessary. This can free up space, and keep a sidebar full of content better organized and more usable for the visitor. (For example, all community-related lists can be in the form of tabs — Recent Tweets, Flickr Photos, Recent Comments)

    Conclusion

    Sidebars are a very important piece of the web design puzzle. They should always be planned for adequately, and not treated as extra space to do whatever with. The content that goes into sidebar(s) and the design involved with each piece of content can have a significant impact on how the website is used. Design consistency is a must, as well as content consistency for the most part.
    Do you have any favorite sidebar designs? How have you designed your sidebar, and what have you put in it? In what order did you place things, and why?

    Deals

    Iconfinder Coupon Code and Review

    Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

    WP Engine Coupon

    Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

    InMotion Hosting Coupon Code

    InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

    SiteGround Coupon: 60% OFF

    SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.