Web 2.0 Site Design Guidelines

August 15, 2006


Web 2.0 Site Design Guidelines

If you want your website to be Web 2.0–worthy, there are some guidelines you can/should follow to ensure that your site visitors will instantly develop an appreciation for your insightful design and ability to stay current. Here is a partial list:

1) Markup: Ensure that your site’s markup is XHTML 1.0 Strict standards-compliant. For bonus points, place appropriate chiclets at the bottom so visitors know that you are a CSS God and should they wish to examine the source code, they will not find any ugly

tags. (In case you missed the memo, having a

tag on your site is the sure-fire path to ruin for your business since most users look for this and shun businesses that use this tag in their HTML markup.)

2) Gradients: I cannot stress how important this is — use gradients for all background and buttons. Without them, your site will look pathetic and laughable. If you can, try and include gradients in headers of sections within your site. If you really want to be hip, add a pattern of angled lines. Be careful with this one…an angle of 15–25 degrees is considered cool. Any more and you risk turning-off users.

3)  Lists: Use HTML lists for organizing as much content as possible. By using


  • tags combined with style classes, you can make information that would have been very difficult to comprehend in
tags, much, much easier to comprehend. When defining the style classes for the list elements, try and include as many CSS hacks as possible. Sure, this makes your site work in all browsers, but most importantly, it conveys your commitment to customer satisfaction. It shows how you will go out of your way to ensure that the three users visiting your site with the WallyWollaWidget Browser v0.5 alpha also have a fantastic user experience and, of-course, ease of content comprehension.

4) AJAX: Do a search-and-replace of all site content and change all occurrences of “XMLHttp” with “AJAX.” If your search does not return any results, then you have a serious problem. Immediately edit content to ensure that there are at least 3–4 references to AJAX on each page. If you have the time, add functionality that allows users to drag things around the page. This will keep them occupied and if you don’t have any meaningful content on the site, it will convince them that your site is a must-bookmark anyway.

5) Soft lines: Thoroughly check your site to ensure that there are no unsightly dark lines. Change the color of all lines to light grey. If possible, ensure that one end of each line fades into the background. Dark lines have been known to cause problems with content flow. By using light grey lines, you can be assured that your site visitors will not lose their train of thought between paragraphs.

6) Rounded Corners: Web designers are finally catching-on to a concept that furniture desginers are all too familiar with. Sharp corners hurt! Round-off all corners on your site. It’s OK to leave the occasional odd corner sharp if the other three are rounded. This is stylish and as long as the sharp corner is out of the way, it is unlikely to cause any harm. Superior web sites will combine gradients, rounded corners and soft lines for the ultimate in user comfort while browsing the site.

7) Badges and Chiclets: Badges and chiclets are an important aspect of any Web 2.0 site as they give users choices that they would otherwise not have. For instance, an average user would never know the URL for the official CSS specification. However, the convenient CSS chiclet on your site will put this spec one click away. Your site visitors will be overjoyed. I don’t have to tell you how critically important it is to have one or more RSS feeds on your site. Note that the orange XML chiclet is now uncool. You must use the official RSS logo and for best results, include chiclets from 5–10 other sites for the huge numbers of people that are specific about the feeds they subscribe to such as RSS 0.91, RSS 0.92, Atom, PomDiddly 1.0 etc.

8) _____ this: Include as many action links as possible within your content. It is terribly inconvenient to copy and paste URLs and it significantly raises the bar for site visitors to share content if you do not provide action links such as “Blog This,” “Email This” or “Digg This.”

9) Tabs: Find a way to incorporate tabbed-navigation on your site. It goes without saying, but I will say it anyway — make sure the tabs are rounded, have a gradient and use soft lines. It is also helpful to include numbers in tabs. It’s OK if the visitor has no way of knowing what the number represents. Just seeing the number there hints at the plethora of content that awaits them if they should choose to click the tab.

10) Reflections: Adding reflection to one or more images and text on the page will instantly add a lustre to your site pages that your content never can. Another advantage is that you do not need to update content for many months and your site will still continue to look fresh. Remember to add a “beta” kicker to your primary site logo.

11) License: Having put in all the effort in creating a fantastic Web 2.0 site, the last thing you would want to do is confuse site visitors who want to borrow a background image or graphic from your site. Eliminate the guesswork and include an ultra-cool “Creative Commons License” chiclet on your site. Even if no one borrows the graphics, at least they get a sense of your fairness and willingness to share.

(If it isn’t clear, this is a total tongue-in-cheek post.)



Co-founder/CTO WhenHub; co-founder DNN Software; founder Edaptable; educator; Open Source proponent; Microsoft MVP; tech geek; creative thinker; husband; dad. Personal blog: http://www.kalyani.com. Twitter: @techbubble
Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.