Jonathan Saipe

Website Design for Web 2.0

3 March 2008, Jonathan Saipe


Effective website design for web 2.0 generally results in interesting debate.

What is web 2.0?
Before discussing the ins and outs of web 2.0 website design, let’s remind ourselves what web 2.0 is about.
Web 2.0 is not officially a set of new online technologies, rather it is a trend of second generation web-based communities and hosted services that facilitate and promote social collaboration and sharing among its users. Such collaboration results in what is often termed user generated content (UGC).

Websites and/or services that fall under the web 2.0 phenomenon include social bookmarking sites, wikis, blogs and folksonomies, otherwise known as collaborative tagging and social tagging.

If you’ve used services such as Facebook, Stumbleupon, Flickr, Wikipedia and Technorati, you’re in the right area.

Technical differences
Where web 2.0 stands out from a technical viewpoint is in its architecture of participation which goes beyond the concept of open source software; it is the idea of opening up a mix of APIs and content production to all users and exposing data for re-use in what are termed “mash-ups”. The simplest example of this is site owner installing Google maps by directly tapping into the Google maps API.

It is often quoted that Ajax (asynchronous Javascript and XML) falls under the banner of web 2.0. Ajax is in fact more a by-product, as many web 2.0 sites use Ajax to improve GUI usability as it allows the display of additional “pages” without causing the HTML page to reload. This is ideal when carrying out typical web 2.0 related tasks such as uploading files or content.

O’Reilly make a nice comparison between how “web 1.0” has evolved into web 2.0 with the following examples:

Web 1.0 Web 2.0
DoubleClick »» Google AdSense
Ofoto »» Flickr
Akamai »» BitTorrent
mp3.com »» Napster
Britannica Online »» Wikipedia
personal websites »» blogging
domain name speculation »» search engine optimization
page views »» cost per click
screen scraping »» web services
publishing »» participation
content management systems »» wikis
directories (taxonomy) »» tagging (“folksonomy”)
stickiness »» syndication


Web design considerations for Web 2.0:

Let’s not lose site of the original aim of this article: where does this leave web design in relation to web 2.0?

The most notable factors to take into consideration when designing for web 2.0 are as follows:

Simplicity
Whilst we always advocate simplicity when it comes to effective web design, the very nature of web 2.0 being more interactive and engaging requires simple design that creates a hierarchy between the visual and the functional elements of a page.

Allow for growth
Given that web 2.0 often refers to user generated content (UGC) in the form of blogs and wikis etc, be sure to allow your pages to grow gracefully whilst remaining digestible. Facebook is a classic example of this where users’ profiles can be packed full of UGC whilst still remaining relatively easy to read and understand.

Don’t forget Ajax
Given that Ajax and web 2.0 go hand in hand, ensure that you understand where Ajax can benefit your designs. When designing GUIs (graphical user interfaces) or pop-ups, consider Ajax over forcing a user to reload a page which can lose you usability points.

Adopt a column layout and consider your navigation
Many web designers adhere to a structured column layout such as the 3-column approach seen on many corporate websites. Some criticise this lack of invention, whereas others argue that web design has matured and these approaches clearly work from a persuasive perspective. I have to say I agree with the latter argument.

When it comes to web 2.0, you might want to consider separating site-wide navigation from functional navigation in separate columns. Equally your content should be separated yet again. Having clear demar ation zones aids usability and will result in higher user engagement levels.

Font sizes
With the advent of tag clouds, varying font sizes has become more prevalent among web 2.0 web designs. Tag clouds are a simple and obvious use of font size variations where the most popular links are bigger in size to the less popular ones. There is no reason why this approach cannot be adopted elsewhere providing it is carried out with care.
Consider the use of mixing serif and san serif fonts to convey a different personality among site-wide content. A good example of this (albeit not “web 1.0”) is the Times website.

Disseminate information
The use panels to display “chunks” of information is increasingly ubiquitous among web 2.0 designers. Not only does is it a useful mechanism for disseminating information, but it goes hand in hand with the technology where “includes” and “portlets” are published via 3rd party APIs or “mashups”.

Accessibility
Finally, let’s no forget accessibility. As is commonly known, accessibility and SEO go hand in hand, but so does good GUI design. Given that web 2.0 requires consideration for flexbile and growable amounts of content, functional components enabling users to add/edit content and technologies such as Ajax, design with your accessibility hat on so as not to alienate your audiences.