Wednesday, June 09, 2010

Chris Jordan's New Site

Chris Jordan's new site is now live! Chris does amazing work, using art to highlight some of the great challenges we face today; I'm honored to be a part of it. I'm not going to talk about that here, though, but rather speak a bit about putting the site together.

It was a team effort, with Christina on design and web development, and me doing JavaScript and Silverlight. I guess some people might go crazy working with their spouse, but I find it delightful; we collaborate well and our strengths complement each other. It's also one more thing to chat about over the dinner table (much to Caitlyn's dismay).

The site has a bunch of Seadragon. It's been interesting working with the technology now that I'm on the outside. It's a good wake-up call to step back from the tools you've been creating and approach them from the standpoint of a normal user.

Chris wanted the smoothness of Silverlight Deep Zoom where available, but he wanted Seadragon Ajax as a fallback for people who didn't (or couldn't) have the plug-in installed. This would have been straightforward with the seadragon.com embed, which does just that, except that he didn't want the standard behaviors that are built into that player. This meant I had to write my own custom player, making changes in both JavaScript and Silverlight as we iterated towards a finished design (never a straight path, of course).

The key feature Chris wanted was for a single click on an image to zoom you slowly toward the image, ending with a nice soft ease-out once you've arrived at the full resolution. This sort of controlled path is unusual for Seadragon navigation; typically we let people zoom here and there however they want (once you've figured out to use the scroll wheel on your mouse). Chris's site, however, is really an artist's gallery, and obviously the artist wants to present his work in a specific way.

In terms of implementation, this seemingly simple change brought to light a number of assumptions built into the Seadragon frameworks (free navigation, springs instead of paths, etc.). Getting both JavaScript and Silverlight versions to properly match behavior was an interesting challenge as well; each had things I wished were in the other. Ultimately I put my JavaScript code in control of as much as possible, calling into Silverlight where necessary, so the logic could reside in one location instead of two.

Anyway, it's been a fun process, and I'm pleased with the results (both in form and content). Check it out and let me know what you think!

Comments

Looks great, Ian! I like the zoom that Chris had you implement, but I find the lack of springs on drag a bit jarring.
Ian, you rock my world! Thank you so much for making me an incredibly cool and functional zooming environment. The site looks way better than I had even hoped for.

Warm regards,

~cj
Really nice job guys. Looks great.
Fantastic. I really enjoyed flying through the forest of paper bags.
Post a Comment

Subscribe to Post Comments [Atom]





<< Home