Web 2.0

Web 2.0 is a broadly defined term that describes the move from static websites as simply a source to view or download information to those that facilitate participation, information sharing and collaboration. The term first surfaced as far back as 1999 with Darcy DiNucci’s article “Fragmented Future” where she described it as:

“…a transport mechanism, the ether through which interactivity happens”

but really gained exposure following the 2003 web 2.0 conference hosted by O’Riley Media and MediaLive. In 2005 O’Riley redefined the core principles of web 2.0 in the light of what he described as:

“a huge amount of disagreement about just what Web 2.0 means…”

listing the concepts of “The web as platform”, “Software above the level of a single device”, “The end of the software release cycle” and “Rich user experience” amongst others. Together these ideas describe web content that exists as a fluid, multi-platform, frequently updated service that values the creation of user generated material. A spectrum of web platforms that covers wikis, blogs, social networking sites, multimedia sharing sites and more.

Joopz - A web 2.0 texting site.

The technology that provides the “rich user experience” listed above, turning web pages from stodgy content displays to responsive GUI’s is AJAX. Back in the 1990’s every user action performed on a website required the reloading of the entire page, this was inefficient and slowed down the experience. In 1995 Java applets were introduced that allowed client side  code to handle data asynchronously from the web server, streamlining the experience. The term AJAX however didn’t appear until around 2005 when it was coined to describe the suite of technologies behind some of the Google applications at the time like Google Maps and Google Suggest. AJAX stands for “Asynchronous JavaScript + XML” and incorporates:

  • dynamic display and interaction using the Document Object Model;
  • data interchange and manipulation using XML and XSLT;
  • asynchronous data retrieval using XMLHttpRequest;
  • and JavaScript binding everything together.

Ajax isn’t really a platform in itself, its a suite of technologies used to create a sort of architectural framework for handling HTTP requests. It works by sandwiching a Javascript engine between the user and the server. This engine is responsible for rendering the interface and communicating with the server on the users behalf.

HTTP requests that do not need to be sent back to the server like data validation and some navigation are handled by the engine while those that do like loading additional interface code are handled asynchronously via XML without stalling the user experience.

Web 2.0 has also come to define a particular design aesthetic, one that is characterised by a friendly, clean feel, with bold logos and simple often very subtle use of colour and texture. To identify some of the recurring themes in web 2.0 design let’s take an example site in this case  “Tumblr” the social networking and blogging site.

1. Simplicity – less columns more “white space”

Compared to older websites web 2.0 tends towards layouts that centralise and highlight content. In the example above Tumblr opts for a simple two column layout with the majority of the page given over to user created material. The site is immediately understandable, its pretty much main content and sidebar navigation without any clutter.

Additionally the site elements are spread out so that there’s a lot of plain space both between content areas and the various navigation elements but in the site itself that surrounds the whole site. Compare this to another website, in this case http://www.techlearning.com and you can see how this “Zen” approach to layout pays off.

2. Subtlety – Textures and gradients.

The simplicity of web 2.0 continues over into the use of gradients for content and body backgrounds although gradients also appear on pretty much everything from buttons to logos. In the tumblr example the content background is an almost imperceptible top to bottom fade into the darker blue of the body. Another ubiquitous use of gradients in web 2.0 is the characteristic use of “glass” gradients.  These use simulated reflections or specular highlights to give a tactile feel to buttons and navigation encouraging the user to explore the site. Tumblr uses a very subtle “glass” effect on its login and signup navigation at the top of the page as well as on its logo. In contrast to the distressed look of many “grunge” websites, web 2.0 also keeps textures extremely subtle often using nothing more than a very fine grain, although paper and textiles are also used. The idea is to create interest without highlighting the effect until it becomes distracting. Here on the Tumblr website the grain is so fine is almost invisible making the effect almost subconscious.

3. Letterpress and friendly fonts

The whole idea in many web 2.0 sites is to promote a more human, approachable image.

With this in mind Tumblr has chosen Bookman old style bold for its logo, a serif font and spiced it up with a reflective gradient and some drop shadow. In many ways its going against the grain as many web 2.0 sites prefer san serif fonts to further emphasize the clean, modern feel. For other elements of the site Tumblr has employed drop shadow in other ways making a slim highlight/shadow on opposite sides of the elements making them seem either raised or slightly sunken into the background. This is known as a letterpress effect (taken from the print process) and is hugely popular across many web 2.0 sites.

4. Rounded corners

Rounded corners on content containers/boxes is a favourite of web 2.0. In general they help to soften the look of a site and help the site to seem less boxy and grid-like. For a long time rounded corners were only achievable using a severe amount of CSS fudging or through images but are now relatively easy through CSS3’s border-radius property.

On Tumblr rounded corners are everywhere from the navigation to the user avatars helping to create a smooth, friendly feel that gels with the rest of the site.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s