Tabs Aren’t Always Good

One of the largest trends over the course of the past one to two years seen on blogs is tabbed areas, as in the sidebar areas, which were originally designed to help cut down on the amount of space required for areas that are generally not viewed as often. However, they have some significant flaws in terms of how they are utilized.

CNN’s Sidebar Area (Example)

We’ll take a look at the pros and cons of this popular design trend.

Pros

• Frees up other areas of your site, primarily in the sidebars for placing advertisements and other, more prominent content that would normally be placed further down in your sidebar, below the fold, and out of the view of people you are targeting.
• Readers are given more options as to what content they want to see on their screen at any particular time. When you use a two to four tabbed area, it means that the reader can view Archives and Recent Comments, expandable with size to also include Most Popular Posts and another piece of content, for example.
• Invites readers to continue reading additional posts, although this may also lead to a con, listed below.
• Your site becomes more “full,” leading to a (sometimes) more professional look.

Cons

• A major problem with tabbed lists is that they often make your site look more cluttered, especially if the same “feature” is used repeatedly throughout the sidebar.
• Users and visitors may feel overwhelmed with the amount of information at their fingertips. Again, not all content is necessary in the sidebar. For example, multiple pieces of the content relating to archives should be placed on that page. People can simply visit all your “archives” information on that one page – plus, it’ll be easier in terms of coding for you.
• As the tabbed areas become more advanced with “sliding” effects, page loading time goes up, and the pages begin to render in an unpleasing way. Unless they are styled properly, they look out of place at times.

Conclusion

As a general rule of thumb, you shouldn’t implement the tabbed sidebar navigation feature unless it is absolutely necessary – you have enough content and features to justify any negative effects. Sites that feature content that constantly changes, such as news sites, could easily implement the feature without major consequences, as most people would rather view this than an archives page with thousands of articles.

You also need to know how to ensure that the code doesn’t “break” in certain browsers or have less-than-appealing results for people who aren’t viewing your site in its full, native version (1024×768 pixels or larger, for a majority of users), which would include mobile devices and on smaller screen resolutions.

Major recoding may be involved before the entire process is complete – the default formatting of bulleted and numbered lists may indent the content too far, while the sidebar element requires less width.

Your View - Do you think these tabbed areas are useful or just a way to include more “useless” content on your blog/website?

Tutorials on good executions of this can be found at the following links:

• Adding Tabs to Your Blog Sidebar – Tutorial includes code snippets and uses Yahoo! TabView styling.
• 37+ Great AJAX, CSS Tab-Based Interfaces (Noupe)
• Blogger Buster – Adding Tabbed Sidebar Navigation
• Woork – Navigation Bar Using CSS and Sliding Doors Effect
• 50+ Nice, Clean CSS Tab-Based Navigation Scripts – Hongkiat