Webalon - web design and development

The BBC wanted its Seven Ages of Rock website (based on the eponymous TV series) to be a showcase of Web 2.0 technologies. Webalon's founder Alex Kearns played a key role on the project.

Seven Ages of Rock:

www.bbc.co.uk/music/sevenages/

This was one of the most exciting projects I worked on as a creative developer at Airlock (my former employer). It was the BBC, after all. The site we were making was supporting a flagship new TV show. Literally millions of people would visit the site. Plus, the BBC was really keen that we push the envelope in terms of Web 2.0 technology. That meant not only integrating the site with social media portals like Flickr and Last FM but also doing fancy stuff with the interface. The fanciest interface element was to be an animated timeline (Figure 1) that would form the centrepiece of the site.

Figure 1

Webalon's Alex Kearns was tasked with developing the site's centrepiece - an animated time line featuring the seven ages of rock.

zoom

At that time, there were only a handful of interactive timelines out there on the web and the vast majority of these were in Flash. We, however, wanted to use javascript because (1) it is an open technology and (2) we could not afford the extra bandwidth Flash would impose. BBC web pages are visited by millions of people, many of whom do not have the latest new-fangled computers, so it was vital that we kept the page size to a minimum. Then there was the fact that we love doing things with javascript that no-one thinks is possible.

The timeline:

Having demonstrated my javascript skills on a previous project, I was given the task of developing the timeline. During my research, I only came across one other animated javascript timeline. Although it was an admirable piece of software, it wasn't very pretty and - to be frank - was dog slow. We wanted to create a timeline that was as elegant and responsive as some of the best Flash ones out there. Well, the beautiful look was sorted by Airlock's amazing designers. But how to achieve fast and attractive animation using Javascript?

Enter John Resig's wonderful jQuery library (www.jquery.com). Before the emergence of javascript frameworks like jQuery, developing complicated javascript applications in the browser was a nightmare. There were so many incompatibilities between the different browsers that one would have to spend days simply fixing browser bugs. jQuery did away with all this at a stroke by abstracting away the differences between the browsers. Plus, it came with an amazing dom selector engine and some built-in animation functions. We certainly could still have built the timeline without jQuery but it would have been a lot more time-consuming and nowhere near as much fun.

The animated timeline proved a big hit with the BBC. And even drew some praise from Airlock's discerning technical director Joseph Denne, who described it as the best bit of AJAX he had seen.

Figure 2

A sample video gallery besides the thumbnails mentioned in the text.

zoom

The video and image galleries:

Given a wonderfully grungy appearance by Airlock's designers, the Seven Ages of Rock image and video galleries were the other major part of the project I worked on. With the image galleries, we were keen to create something a little more sophisticated than most of the javascript galleries out there. Again, we were after the slickness of Flash. Rather than going for a simple instantaneous change between images in the gallery, we opted for a fade-in transition combined with a separate animation sliding the image caption into view. This two-part animation gives the photo gallery a cool, slick feel.

The focus with the video galleries was to allow users to quickly switch between the various videos. We achieved this by displaying thumbnails that the users could roll-over to get information about the vidoes before clicking and loading the video. Some clever javascript was required to get the video and image galleries working perfectly but again we were helped by the versatility and reliability of jQuery. It really was a godsend.

Conclusion:

Seven Ages of Rock is a project that will always remain close to my heart. Even though it was developed a couple of years ago now (an aeon in web time), its animated timeline and image video galleries still don't half look sleek. The site also demonstrates the attention to detail and pioneering spirit that Webalon seeks to invest in every project.