TL;DR: Go check out the CSS3-based visualization of the CC license model (Chrome, Safari, or Firefox 4). Read below for details of why and how I built it.
We launched a refresh of the Creative Commons’ site design on Thursday. Part of that refresh was updating the content of some key pages, based on user feedback. We heard from users that the pages could be clearer, and could give better examples of what Creative Commons licensees are, how they’re used, and who’s using them. One of the pages we updated was the Licenses page, which provides an overview of the CC licenses.
When I was looking at the page on Thursday, I was particularly taken by the graphic Alex put together to show the three conceptual layers of a CC license: machine readable, human readable, and legal code. This concept is part of CC’s unique approach to public licenses since day one, but it’s something I’ve always struggled to describe in a way other than a lawyer joke (“get it? lawyers aren’t humans!”). Alex’s graphic seemed like a great, simple illustration of how the layers stack and complement one another. It also seemed like it was begging for an interaction implementation.
Thursday afternoon at the end of the work day I sat down to read up on Transitions and Transformations, and to see if I could make three isometric squares stack on top of one another, like Alex’s graphic. (I found this article particularly helpful in its clarity and directness.) Within about 30 minutes I had a working transformation and transition, using jQuery to listen for click events, and applying a different CSS class on click. Alex converted the graphic elements to an SVG I could pull apart, and Thursday evening I started hacking, applying the SVG elements as the background on <div>s, and writing additional CSS classes to show details about each layer.
One of the interesting challenges of putting this together was how to chain transitions. In particular, when you first click the CC logo, we wanted it to shift to an isometric projection, and then expand. While it was clear that we needed to apply two different classes in sequence with a delay, we found the jQuery’s .delay() call didn’t seem to work. In fact, using .delay() seemed to cause the browser to skip the transition, and apply the new class right away. window.setTimeout did work.
I also ran into some issues with my SVG graphics. The first iteration apparently had some issues in the SVG exported from Illustrator. While they worked adequately in Firefox 4.0 beta 8, Chrome rendered them in a pixelated fashion, and Opera rendered them in a spectacularly broken manner. Removing the offending elements from the SVG and regenerating the individual images made them render smoothly in Firefox and Chome, and Opera also improved from broken to pixelated.
Overall this was a really fun experiment, and it was gratifying to see how support for these new specifications makes visually engaging pages really straightforward.