Stuff & Nonsense. Website designers in North Wales

It’s a mad, mad, mad, mad manimation

I gave my first talk of the year at An Event Apart in Seattle. I’m speaking at all six of the events this year (and hosting two workshops ). I called the talk Smoke Gets In Your Eyes after the first episode of Mad Men because I was showing, for the very first time Madmanimation, the Mad Men opening titles recreated using CSS.

Madmanimation was a joint effort between me, Anthony Calzadilla and Geri Coady. I’ve been wanting to work with Anthony and Geri again after they both did amazing work on the launch site for Hardboiled Web Design. Madmanimation was the perfect opportunity to create something we hoped would make people go ooh!.

Anthony animated, Geri designed and I progressively enhanced. To see the mad manimation, light up a Webkit-based browser (desktop or mobile). Other browsers’ users will see something different. More on that in just a minute.

There are plenty of CSS animations out there (most of them made by Anthony) but one thing about all of them has bothered me. Their HTML is (how can I put this politely?) semantically terrible:

<div id="bg-01"><img src="01-bg.jpg" alt="">
<div id="fan-01"><div id="bg-fan"><img src="01-bg-fan.png" alt=""></div>
<div id="fan-blade"><img src="01-fan-blade.png" alt=""></div>
</div></div><div id="man-01"><img src="01-man.png" alt=""></div>
<div id="blk-curtain"></div>

Working on the early stages Madmanimation made me wonder, ‘how can we describe the content of an animation meaningfully while still creating all the hook elements we need to create it?’ What makes up an animation? A list of scenes … in order. What might the most appropriate HTML element for that be? An ordered list <ol>, with each scene list-item <li> addressable via its own id. That’s what I chose. (View source on Madmanimation.)

<ol id="animation">
<li id="scene-01">…</li>
<li id="scene-02">…</li>
<li id="scene-03">…</li>
…
<li id="scene-016">…</li>
</ol>

Inside each list-item goes a description of the content/action/events that are happening in that scene:

<li id="scene-01">
<p>Don Draper pauses in the doorway of his Manhattan office. 
Everything except fan blades are still. 
Don’s desk is littered with bottles and glasses</p>
</li>

Now, instead of junk in our HTML, we have content that’s meaningful, accessible and SEO-friendly. We’re also able to style that content in about a gazillion different ways based on the capabilities of any browser or device.

You could, if you wanted to, style the list using lovely clear and readable typography, that would look great on even old or less capable browsers.

You could, if you prefer, style the list using floats and background images to create a storyboard. This looks great too.

Plus, a person who uses a modern, yet animation-incapable browser like Firefox 4 wouldn’t know about the animated alternative that their friends are seeing. Call that hardboiled if you like (I do), but that’s progressive enhancement in its truest form.

Modernizr

Modernizr’s not only useful for testing browser capabilities and adding classes to bind CSS styles to, it also creates a Modernizr Javascript object that we can utilise. For Madmanimation, we used Modernizr and jQuery to append the elements needed by the animation to each list-item.

if (Modernizr.cssanimations) {
$("#scene-01").append('<div id="bg-01"><img src="01-bg.jpg" alt=""> <div id="fan-01"><div id="bg-fan"><img src="01-bg-fan.png" alt=""></div> <div id="fan-blade"><img src="01-fan-blade.png" alt=""></div></div></div> <div id="man-01"><img src="01-man.png" alt=""></div> <div id="blk-curtain"></div>');});

Then we added a little more Javascript to trigger the start of each scene, by adding and removing a ‘go’ class at specific intervals.

$("h1 a").click(function() {
var li = $('#animation li');
var delays = [4500,2000,2400,2200,5000,3000,3000,3800];
function sumPrev(array, index){
var sum = 0;
for(var i = 0; i < index; i++){
sum += array(i);
}
return sum;
}

li.each(function(i){
setTimeout(function($ele){
$ele.addClass("go").siblings().removeClass("go");
}, sumPrev(delays, i), $(this));
});

What’s different about Madmanimation is how it’s built on solid, semantic foundations. This was certainly the aspect that sparked most of the conversation at An Event Apart. I also love how its approach means meaningful, accessible, SEO-friendly content and that in turn demands strategy, creative writing and storytelling as part of the process. The written word is as important as the animation.

Two things remain.

I want to say a huge thank-you to Anthony Calzadilla and Geri Coady for their hard work in making Madmanimation, and my talk for this year, possible. Hire them, they’re amazing. I also want to thank Geri, Nate Croft, Kat Durrant, Peter Hart, Mark Jaquith, Chris Jennings, Jeremy Keith, Maykel Loomans, John Morrison - Subism.com, Stefan Nitzsche, Warren Parsons and Jeffrey Zeldman for allowing us to use their photographs by saying ‘yes’ or publishing them under a Creative Commons licence.

Finally, I should mention Animatable, the CSS animation development tool I’ve been working on for the last few months with Naomi Atkinson, Dan Rubin and Mircea Piturca and that I demonstrated for the first time at An Event Apart.

We’re kicking the tyres on Animatable for the next few weeks before getting it in the hands of a select group of beta testers. Needless to say, we’re all very excited about Animatable and judging by the audience reaction, tweets and emails after An Event Apart, other people are too. We’ll have more information and a video demonstration live next week at Animatable and follow @animatableapp for other information too.