Good Web 2.0 Design Elements

In the recent days, ive had renewed interest in web 2.0 application development.

Web 2.0 is a vast domain, and a very important (and overemphasized, i must admit) aspect of it is design and layout. There have loads of gurus who've written about the new css standard and clean development methodology. In this post, I choose to document some of the killer tools that are helpful in adding the extra edge to a web 2.0 website with minimal effort.

First off, however, some highly irritating stuff that happens when you go into div alignment for tableless design is that sometimes float:right and float:left dont work correctly. At times they appear one below the other, and at times the outer parent div just doesnt expand to include the child div elements (imagine if you had a background image on the parent div that was supposed to strech all along). Quick fixes learnt after a lot of fishing through the web:

• Make a div extend automatically to cover the child elements: use "overflow:visible" and "height:auto" on the parent div and watch it extend smoothly to cover all children inside. "overflow:auto" also works but visible is the safer choice. If you want fixed height and scroll bars on parent div in case the child overflows, use "height:100px; overflow:auto;"
• To make sure ur parent div's width is enough to accommodate the child divs which are both floating left and right. instead of manually setting the parent width to greater than the maximum width of float:left and float:right children, a better way is to add a dummy element below all children (but inside the parent div) with a "clear:both" attribute. The dummy element could be a "br" or "div" or anything.
• If you're in a situation where all children divs floating left or right, appear one below the other and not stacked side by side or horizontally as needed, you need to add "clear:none" to the style of the child divs.

And now we come to some excellent tools that can be used to enhance display

Photo display cloud:

Photo display: adding a photo display widget that looks like a nice photo cloud. Its released under GPL so you can tinker around as well. <link>

Roy tanck, the original author of this tool, also has a flickr/picasa tool that will import pics for display directly from the flickr / picasa rss for the photos you want to display. But he has decided to keep that project under closed control and hosted on a cloud platform. If you intend to use that, you will have to import the plugin directly from where he has hosted it and provide it with the necessary rss url to load the photos. I personally prefer to use the GPL version as I can download and set it up on my webserver without hassles and can also customize it the way I want. Btw, the flickr / picasa widget details can be found here: <link1, link2>

Word Cloud

A word cloud can be a good way of displaying a set of concepts and not having to clutter up the screen with rows and columns of data at the same time. Not to mention the way it catches your eye as an innovative mode of information display. Originally developed to display a tag cloud on a wordpress blog, it has evolved to support every major blogging software (including blogger and movable type) and now its also available for standalone integration into web pages. You just need to embed the swf and set the flashvars with the data in the correct xml format, and you're done. Of course there are loads of customizations for color combinations and background image etc, but all that is here in the documentation: <link>. You might also want to consider this funky interface if you're looking for something out of the ordinary.

JQuery

If you'd ask me for a single best tool to pick out of the lot for web 2.0 usability, It would be Jquery. It makes very complicated things very easy to do, if you know the underlying concept and want to cut the chase to get what you want the way you want it without hassles. Most of the plugins and display tools that dont rely on flash, depend on jquery. I dont think I need say more. <link>

Tabbed interface

A handy tabbed interface for use on web pages. There are many available, but I personally liked the feel and usability of this one. You can obviously change the color and border styles.

Here's the link: <link>

There are two good fixes in the comments, one for adding a fade style between change of tabs submitted by Andrew Strachan. Additionally, if you want to fix the lack of support for nested div tags within the master tabs, you need to modify the javascript to as follows:

$(document).ready(function(){
$(’#tabs div’).hide(); // Hide all divs
$(’#tabs div:first’).show(); // Show the first div
$(’#tabs div:first div’).show(); // Show the nested divs
// Set the class of the first link to active
$(’#tabs ul li:first’).addClass(’active’);
$(’#tabs ul li a’).click(function(){ //When any link is clicked
// Remove active class from all links
$(’#tabs ul li’).removeClass(’active’);
//Set clicked link class to active
$(this).parent().addClass(’active’);
// Set variable currentTab to value of href attribute of
// clicked link
var currentTab = $(this).attr(’href’);
$(’#tabs div’).hide(); // Hide all divs
$(currentTab).show(); // Show div with id equal to variable
// currentTab
$(currentTab + ” div”).show(); // Show nested divs
return false;
});
});

EDIT: I'll add to this list more tools that I feel are decent enough to keep in my web 2.0 collection.