One trend in web designs to have not just one vertical sidebar, but two–or even three or four if page space allows. This columnar design hearkens back to the days of “table” site designs, where all the pieces of the layout as well as the content were aligned in table cells rather than CSS-styled divided layers. (Even though tabular web design has been pooh-poohed since the advent of CSS-only designs, we as web designers apparently haven’t traveled too far from our roots, especially when you look at dedicated news pages full of content “above the fold.”)
Note: I’ve highlighted the left sidebar in red, the content block in yellow, and the right sidebar in blue in all these screenshots.
(click for larger image in new window) This example, from CNN.com, shows lots of content crammed into a small space, and yet it still manages to be readable because of a good bit of white space around each element, as well as clear labeling.
(click for larger image in new window) From Kiss 95.1‘s website, you can see lots of pictures and links on the sidebar, and the content space is almost the same size as the sidebars. But it still manages to keep it organized with white space and iconic navigation.
(click for larger image in new window) On Ordinary Miracles (a favorite blog of mine to visit), the designer has incorporated two sidebars, but they don’t feel terribly clogged with information. Again, white space is the key.
Trying My Hand at It
I created a very simple (color blocks and dummy text) multiple sidebar layout for my own knowledge–available for viewing here. In my design, the two sidebars are placed next to each other rather than each beside the content block, but you still achieve the look, seen below:
(click for larger image in new window) Using color-blocking to show where each column begins and ends, you can see how the layout is divided up into five sections, 3 of them occurring side-by-side.
Multiple sidebars can give maximum content display space. Very little space is wasted, with links and excerpts everywhere, an images and clickable video starters sprinkled between blocks of content. It’s all very efficient, and users don’t have to scroll too much to find what kind of content they are searching for.
Two or more sidebars can also make ads, blogrolls, and linkrolls more plausible for a site that already has an overcrowded single sidebar. With another sidebar, you can put important content back up toward the top of the page where users can see it.
A layout with more sidebars also makes use of more screen space. With more and more users viewing sites with widescreen monitors, that’s a LOT of web design real estate you can play with. A wider site can mean bigger pictures and font, more eye-catching content, and generally a better user experience.
Multiple sidebars can make pages look overcrowded with information. Sure, the only consequence for a user is to lose a few seconds clicking the Back button if he or she hits the wrong link, but what about the frustration index? The first rule of web design I learned is that when a page is too difficult to navigate, the user will leave and won’t come back. All this information clustered right near the top of the page might be easy to see, but it also runs the risk of being overwhelming and confusing.
Two or more sidebars can also be hard to code effectively. In my example, I had to use a containing divided layer, floated to the right, to hold the two sidebars, and floated them left and right inside it. I’m honestly not sure how browser-compatible that is, but aside from using the much-maligned table, that seemed to be the only way I could do it.
What I Typically Use
I find myself favoring one sidebar for most web designs, either for small blocks of content or for the site’s main navigation. Sometimes, if I need more space for more generic navigation (Home, Guestbook, or Updates, for instance), or for external links (such as social networking site links), I’ll create a small bar of text or icon links across the top of the page (usually under the header image and above the main content block and sidebar). I find that this maintains the necessary white space that a typical user’s eye needs for easy information processing (especially if you’re like me and tend to write a lot on a page!).
However, I could see the possibility for using a second sidebar on my page, especially if I put ads on my page. Affiliates and other link exchanges could also benefit from a second sidebar, should I ever choose to do so.
Multiple sidebar layouts are plausible and doable in modern webdesign, but that doesn’t mean they are suitable for every page. Think about what your site really needs before designing a multi-sidebar look–do you really need all that content space right near the top of the page, or could you get away with just one sidebar instead?
I hope this article has given you a bit to chew on concerning multiple sidebars as part of the user experience!