Squeak of the Week

A couple weeks ago, the Creative Department launched a new site for local photographer Tony Arrasmith. Besides the slick design and witty commentary, there are a number of cool technologies employed that make this a notable project for the company.

The primary goal was to create an online portfolio of Tony’s work, incorporating photos uploaded and managed through Tony’s personal Flickr account. With an emphasis on usability and speed, the portfolio was designed with a unique horizontal control scheme which allowed quick access to any of the available photos. Each individual photo carries a description that can also be managed through Flickr. Enlarged views for each image are available that illustrate the meticulous detail Tony brings to every one of his unique photographs.

Mostly for usability reasons, Flash was quickly ruled out as a solution. In hindsight, I’d probably reconsider this given that Flash content is now crawlable and there were a few logistical and privacy concerns we might have circumvented by going that route. But, nontheless excited at the proposition of building a usable, non-Flash solution to the problem, we settled on Javascript as the primary client-side technology.

Based on Mootools 1.11, we constructed a clean, object oriented solution using the Fx.Scroll and Ajax components among other common Moo-tilities. I wanted to use the recently released version 1.2 but haven’t had a chance to familiarize myself with it’s significant changes over 1.11 (not to mention, Google’s new Ajax Libraries API hasn’t made 1.2 available yet).

The server-side (that is, the part of the application that actually pulls data from Flickr and outputs HTML) is handled with automated PHP requests to Flickr’s publicly accessible API. Once an hour, via cron, a script is executed which requests all the latest photos from Tony’s Flickr account. Flickr returns that information in XML syntax, which phpFlickr hands back as an array. That array of photos is then passed off to the templating engine which simply outputs all of those files in raw HTML markup. When the page loads, the Javascript solution described above acts upon those image elements and rapidly builds the working components of the portfolio.

The cool technology of Tony’s site is not just limited to the portfolio section either. The homepage contains a few animated illustrations of Tony’s concepts coming to fruition in Flash. Elsewhere on the site we’ve skinned and integrated a copy of Wordpress, added an XML driven, Flash-based tour of the studio and implemented an AJAX-based contact form.

All of these features built on top of solid, standards-based XHTML/CSS make the new tonyarrasmith.com an intriguing technological case-study. We just hope Tony enjoys using it half as much as we did building it.