Site update tip #2: Ajax

Posted Wednesday, 31 May, 2006 by Ron | permalink

For every website design or redesign, we not only afford tremendous efforts in coming up with bolder and more refreshing looks, we also explore how best to make use of new features and technologies to better the user experience. With all the hype going around about Ajax , we knew we had to look at Ajax seriously for our new website revamp. However, being our usual practical selves, we always made sure the use of new cool features, such as Ajax, is justified. Otherwise, the coolest features will still get thrown out the window if we cannot justify that the benefits are well worth the efforts.

So, instead of drowning the entire website in Ajax, we knew we would be better off focusing our efforts on the one section that would make the most sense using Ajax. We immediately saw that our Portfolio section was high on the list of being the most likely candidate to benefit from the Ajax feature. We decided that we could use Ajax to update parts of the Portfolio page without refreshing the entire page. This meant that our visitors will be able to enjoy a more seamless experience while browsing through our sample works. Hovering over the links for the projects, a nice little tooltip appears, drawing information through Ajax to display a thumbnail of the screenshot alongside bite-sized information. Clicking on the links, the larger screenshot and project details get retrieved, again via Ajax, and displayed in the main area. The benefits brought about by Ajax is a much more responsive page than using the traditional method of reloading entire pages.

One of our concerns with using Ajax, however, was how to ensure the page degrade gracefully in the case when JavaScript is not supported, thus rendering all of the Ajax goodness useless. Well, we decided that a simple solution to that would be to allow each portfolio piece to have its own referenceable URL. This means that each sample work featured in Portfolio has its own URL, like http://www.thepixelage.com/portfolio/web_om and http://www.thepixelage.com/portfolio/web_getspotted.

Although simple, the benefits are two-fold. Firstly, this allows us to be able to point our clients directly to the sample work that we want them to see. Secondly, by coding the links carefully, we were able to get the links to react in the traditional way to link to the individual URL, instead of the Ajax way, in the absence of JavaScript support in the user's browser. This degrades our page gracefully, thus still allowing our user to be able to browse through our portfolio. In this way, we are confident to say that we would not disappoint any of our interested visitors.

This is Part 2 of a series of posts relating to the ideas behind our new website look. We hope to share with you our experiences in working through our latest revamp. In the next part, I will share with you our experience with our first company blog.