#contextaul elements

New Post has been published on http://mocco.sk/anatomy-of-a-perfect-sidebar-introduction-and-using-the-right-layout/

Anatomy of a Perfect Sidebar - Introduction and Using the Right Layout

Anatomy of a Perfect Sidebar – Introduction and Using the Right Layout

Admit it: Most of us see sidebars as nothing more than a simple container that holds stuff, in our blogs and websites. It gets our minimum effort on the design process and we fill it up without thinking which widget should go where.

But for a well-designed website, the designer should consider a number of factors when working on them. For example, consider the number of sidebar containers, the width and height of sidebars, the order of the elements that go into the sidebars and so on.

In this post, we’re going to study the anatomy of the “perfect sidebar”.

The Definition and the Importance of the Sidebar

First things first — we need to define what a “sidebar” is:

A sidebar is a graphically separated section that contains informational and navigational parts of the website.

Granted, I cheated off from Wikipedia’s definition of the term “sidebar” a little bit.

Sidebars hold contextual elements to the content or the whole of the website, like navigational menus, search forms, or subscription widgets. They may also hold non-contextual elements like advertisements or “daily quotes”. They’re almost always narrower than the content section to emphasize that the content is more important than the sidebar. Their main purpose is to help the visitor to understand and navigate the website better.

As a content management system, the WordPress platform considers sidebars as “widget areas” where WordPress theme developers should allow WordPress widgets to be displayed in their themes.

Although they’re not technically “side” bars, the widget areas that belong to the “footer” of the theme could also be considered as “sidebars” since, well, they’re also widget areas.

For the sake of naming things properly, they should be called “footer widget areas” but in this article, we’re going to talk about them, too.

How Many Sidebars Should Be Used in a Theme?

As you might have already guessed, there’s no right answer to this question. Depending on your website’s complexity and the need for sidebar elements, it could be one to four – or none.

Single Sidebar

Single column sidebar design example: Twenty Twelve WordPress Theme

A single sidebar is probably the most popular choice for a blog design. And since blog pages tend to be long with the post lists or post content and comment lists, a single sidebar can hold 5 to 10 sidebar elements. Don’t forget, though: If your sidebar exceeds the height of the main content area, it will definitely seem ugly.

The sidebar can be on the left side of the main content area or on the right side. There’s no significant difference between the two but since people read left to right, left sidebars can attract more clicks while decreasing the importance of the main content, thus lowering the visit duration of each page. (The other way around goes for the RTL languages like Arabic or Hebrew.)

Two Sidebars

Single column sidebar design example: Seventeen WordPress Theme

Two sidebars could be useful for corporate websites or magazines, since they should be displaying more navigational & informational elements than blogs. The downside of having more than one sidebar is that you need more space for them and that means you have to narrow down your main content area. Although, you can still enjoy two sidebars with a responsive approach: On screens narrower than a standard laptop (1366 pixels wide), you can take one of the sidebars under the other one.

Also, you can design one of the sidebars very narrow to hold some icons or one-word links, too; but, if you design it poorly, the unevenness could bother your visitors.

Three or Four Sidebars

Four column sidebar design example: SmashingMagazine.com

This one goes without saying: You have to use responsive design techniques for this. Unless you want to annoy your visitors with screens smaller than 1600 pixels, you need to collapse or move the sidebars for narrow screens.

Smashing Magazine’s current design is one of the best examples for four column WordPress designs with a responsive approach. As the screen narrows down; the leftmost sidebar which holds the main navigation becomes the top navigation, then the second left sidebar gets under the first one on the top, then the main sidebar on the right disappears completely while the second left sidebar gets back to its original place, and finally the second left sidebar joins together with the leftmost sidebar on the top as the main navigation (which is activated with a button).

No Sidebars

“Sidebarless” design example: Beyn.org

Minimalism could be the right answer for any kind of website. If you’re into that, you might want to reconsider which sidebar elements you want to display and which ones to eliminate from your design.

Then, you can display those elements at the bottom of your pages. You can also try displaying them on the top but that could risk the main content area to be below the “fold” — you must consider the height of visitors’ screens, too.

The theme above is a theme of mine, designed for my blog, Beyn. I always used/coded themes with a single sidebar for Beyn but with this new theme, I wanted to try a “sidebarless” design and it worked out beautifully: At the bottom of every page, I only have three widgets: An “announcements” list, a list of email/feed/social subscription buttons and a “latest comments” widget.

The benefit of a “sidebarless” design is your main content drawing the most attention possible.

To Be Continued…

This is the end for part one of this series. We will be covering subjects like the two dimensions of the sidebar, ordering of the elements and other issues to consider (like colors, images and font sizes) in the next part.