‘Mad Men’ opening credits in CSS3 and JavaScript

April 7, 2011 12:45 PM

Mad Men opening credits in CSS3 and JavaScript. Using scripting and CSS, designer/developer/sharp dresser Andy Clarke and animators Anthony Calzadilla and Geri Coady reproduce Mad Men’s opening credits in-browser.

Don’t have the necessary Webkit browser? Thanks to Web standards, what you’ll get is a text equivalent (as in Lynx) or a nicely-laid-out storyboard – but not a placeholder telling you to install Silverlight or update your Flash.

Arguably this is not an appropriate use for CSS, but indisputably it is an appropriate use for JavaScript.

(Names of “actors” changed to correspond to the conference for which it was created.)

posted by joeclark (74 comments total)

Incredibly cool. Thanks for sharing.

Also, you have to click "WATCH" at the top for it to start playing. Spent a lot of time checking my version of Chrome and relaunching before figuring that one out.
posted by randomname25 at 1:01 PM on April 7, 2011

I saw this when it was demo'd at An Event Apart last week, and I think my brain is still leaking out my ear.

And it wasn't the animation that did it, though amazing. It is the semantic markup underneath. Holy mind blown, batman.
posted by [insert clever name here] at 1:03 PM on April 7, 2011

Can anyone explain why Firefox 4 is considered an 'animation-incapable browser'? What exactly are they using that's not supported by Firefox 4?
posted by SweetJesus at 1:04 PM on April 7, 2011

SweetJesus: your browser needs to be powered by WebKit in order to work, and Firefox isn't. Safari and Chrome should work though.
posted by randomname25 at 1:05 PM on April 7, 2011

As somewhat of a useability wonk, I love this.
posted by muddgirl at 1:05 PM on April 7, 2011

What exactly are they using that's not supported by Firefox 4?

I don't know in this specific case, but I do know that 3d transforms aren't yet supported in ff4.
posted by [insert clever name here] at 1:06 PM on April 7, 2011

Awesome demo, but wtf is with the "watch" link to start it playing? They've never heard of a big giant play button?
posted by zachlipton at 1:08 PM on April 7, 2011 [2 favorites]

Please tell me I wasn't the only one who automatically started humming the theme from the opening credits? Anyway, this is freakin impressive. (The Adidas kicks were a nice touch.)
posted by bayani at 1:09 PM on April 7, 2011 [2 favorites]

Although I would like some notification that there's a "higher level" of content available. The second link was sort of confusing before I realized that for some browsers there is actual animation.
posted by muddgirl at 1:10 PM on April 7, 2011 [1 favorite]

SweetJesus: your browser needs to be powered by WebKit in order to work, and Firefox isn't.

No, I understand that, but what in particular is unsupported by Firefox 4? It's certainly not Canvas-related. Are they using webkit-specific CSS hacks?
posted by SweetJesus at 1:10 PM on April 7, 2011

Hard to call this CSS3 when 90% of the styles are prefixed by -webkit-
posted by nmiell at 1:11 PM on April 7, 2011 [2 favorites]

Hard to call this CSS3 when 90% of the styles are prefixed by -webkit-

And there's my answer...
posted by SweetJesus at 1:11 PM on April 7, 2011 [2 favorites]

SweetJesus: Firefox uses the Gecko engine. You need to use a browser powered by the WebKit engine, which means Chrome or Safari.
posted by linux at 1:12 PM on April 7, 2011 [1 favorite]

This will work in IE in what, 8 years?
posted by localhuman at 1:12 PM on April 7, 2011 [1 favorite]

Well, vendor-specific prefixes are explicitly allowed in CSS3.
posted by joeclark at 1:13 PM on April 7, 2011 [2 favorites]

Browser specific content? Ah, it's the good ol' days all over again!

"This site best viewed in Safari or Chrome. [Get Webkit-based browser now!]"
posted by kmz at 1:19 PM on April 7, 2011

Big minus points for being webkit only.

On the other hand, the non-webkit view is actually very cool, so big plus points for that.

And yeah, it's sort of annoying when people pretend their browser specific stuff is some kind of standard.
posted by Artw at 1:20 PM on April 7, 2011

localhuman: "This will work in IE in what, 8 years?"

/optimism
posted by brundlefly at 1:20 PM on April 7, 2011 [2 favorites]

Can someone who 'does' flash tell me if it would have been 730k in flash too? Or more? Or less?
posted by sodium lights the horizon at 1:22 PM on April 7, 2011

Less. Flash is compressed bytecodes instead of uncompressed text.
posted by nmiell at 1:24 PM on April 7, 2011

Arguably this is not an appropriate use for CSS, but indisputably it is an appropriate use for JavaScript.

Well, let's face it, for non-tech demo use you're talking video or flash animation.

Can someone who 'does' flash tell me if it would have been 730k in flash too? Or more? Or less?

Probably less, it would depend how you did it - the limiting factor is almost certainly the size of the .jpgs.
posted by Artw at 1:25 PM on April 7, 2011

What ever happened to the term DHTML? I liked that. Had a certain ring.
posted by inedible at 1:26 PM on April 7, 2011 [2 favorites]

As we’ve demonstrated, the project is not “browser-specific.” It uses advanced features of one browser and appears in other browsers to the limit of their respective capabilities. It’s an excellent example of progressive enhancement.

Can anyone give us screenshots in IE8 and IE9, please?
posted by joeclark at 1:26 PM on April 7, 2011

As we’ve demonstrated, the project is not “browser-specific.” It uses advanced features of one browser and appears in other browsers to the limit of their respective capabilities. It’s an excellent example of progressive enhancement.

Sort of. Kind of. Try that with a real world client and your ass would not hit the floor on the way out of the door.
posted by Artw at 1:29 PM on April 7, 2011 [1 favorite]

As we’ve demonstrated, the project is not “browser-specific.”

It's just rendering engine-specific!
posted by SweetJesus at 1:29 PM on April 7, 2011 [7 favorites]

Can someone who 'does' flash tell me if it would have been 730k in flash too? Or more? Or less?

Depends on what type of graphical elements are used. The actual "photographic" elements would take up considerably more room than the "cutout" elements, which could be created by Flash with a few dozen bytes of code. If the animation were performed via scripting instead of keyframing, even less data would be used.

But since both techniques would enjoy similar benefits, it's probably a wash.
posted by ShutterBun at 1:30 PM on April 7, 2011

It's just rendering engine-specific!

With a nice fallback, I'll give it that.
posted by Artw at 1:31 PM on April 7, 2011

What ever happened to the term DHTML? I liked that. Had a certain ring.

It became AJAX, even if no XMLHttpRequest was involved. And then it became "Web 2.0ing the site up", and these days people would probably just call it "jQuery", even if it wasn't.
posted by Artw at 1:33 PM on April 7, 2011 [4 favorites]

...or HTML5, of course. You can call any old shit HTML5.
posted by Artw at 1:33 PM on April 7, 2011 [5 favorites]

your browser needs to be powered by WebKit in order to work, and Firefox isn't. Safari and Chrome should work though.

Firefox uses the Gecko engine. You need to use a browser powered by the WebKit engine, which means Chrome or Safari.

I love the people answering "you need Webkit for it to work" when the real question is why does it need Webkit. It's not like Opera and FF4 are IE6.

It uses advanced features of one browser and appears in other browsers to the limit of their respective capabilities.

So you're saying static text & images are the limits of Opera and Firefox's capabilities? (Lynx, I'll give you.)
posted by kmz at 1:33 PM on April 7, 2011 [1 favorite]

This will work in IE in what, 8 years?

You mean 8 years ago, right? Not to defend Microsoft or anything, but IE4 had most of these features, including animation and font embedding. Vector graphics came later, only with IE5.
posted by AlsoMike at 1:34 PM on April 7, 2011

Yes, but that was before web hipsters figured out how to call browser specific features "standards", and anyway, it's IE and therefore not cool.

But I'm being overly grumpy about hipster code bollocks here, this is indeed a quite nice animation executed in an interesting way, and should commended as such. Just don't take it as an example of how things should be coded.
posted by Artw at 1:36 PM on April 7, 2011

Andy Clarke “tr[ies] that” on his clients all the time and gets paid handsomely for it. Do read his blog.
posted by joeclark at 1:37 PM on April 7, 2011 [1 favorite]

I'm not a fan of how the "semantically terrible" HTML code is left out of the original document, only to be then injected back in via JS.
Granted, this will hide that HTML from browser that do not need it. But am I the only one who thinks that
$("#scene-01").append('<div id="bg-01"><img src="01-bg.jpg" alt="">...lots more here...');
is not particularly elegant JS?
posted by _Lasar at 1:38 PM on April 7, 2011

I do not disagree with _Lasar, despite being almost ludicrously dysfluent in JS.
posted by joeclark at 1:39 PM on April 7, 2011

As we’ve demonstrated, the project is not “browser-specific.” It uses advanced features of one browser and appears in other browsers to the limit of their respective capabilities. It’s an excellent example of progressive enhancement.

I mean technically that's true, but if YouTube only played video in Chrome and Safari but showed only some thumbnails and captions for Firefox and IE, people would be rolling in laughter and/or punching you in the face if you tried to tell them that you're just demonstrating progressive enhancement in action. Actual progressive enhancement would be to provide a rendered WebM version in an html5 <video> tag for Firefox, along with a Flash player for the video for IE users. Otherwise it's just a webkit demo, not the web.
posted by zachlipton at 1:41 PM on April 7, 2011 [2 favorites]

Andy Clarke “tr[ies] that” on his clients all the time and gets paid handsomely for it. Do read his blog.

Really? He provides examples of actual paid work from him in widespread use (as opposed to a tech demo) that relies on webkit only CSS in order to work fully and is not for Apple or Google?
posted by Artw at 1:42 PM on April 7, 2011

Crap.

I was going to say, by HTML5 demo standards anything beyond a message saying "YOUR BROWSER IS THE SUCK" is a huge improvement in progressive enhancement.
posted by Artw at 1:45 PM on April 7, 2011 [1 favorite]

Andy Clarke “tr[ies] that” on his clients all the time and gets paid handsomely for it. Do read his blog.

Looking through the sites he lists as clients (and that really have an "Andy Clark" look), it appears that he only uses rounded borders and drop shadows. It does look like he relies quite a bit on Modernizr to take care of things like columns, but if it works, it works.
posted by geoff. at 1:48 PM on April 7, 2011

Andy Clarke publicizes some of his clients and keeps the others under wraps, as most webdevs do. But you can ask him directly and he’ll tell you all about it. (I have and he did.)
posted by joeclark at 1:48 PM on April 7, 2011

Cue the haters.

Ok, so the deal with vendor-specific prefixes like -webkit is that they are a tool to help advance the technology and capabilities of web. In order to understand this you have to start with the proposition that adding capabilities such as animation should be added to CSS in the first place. That's a whole other argument that I wouldn't care to get into now. But let's start from there.

Any advance in technology has to start somehow. The folks behind Webkit decided to give it their best shot and came up with a CSS property called transition-property. This allows somebody to choose a property to animate, like the opacity of Don Draper's silhouette.

So we can stop there and say, well, should the folks behind Webkit be allowed to add properties that only those browsers can use? After all that's essentially what happened in the bad old days with Internet Explorer and Netscape. If the answer is, "No, they shouldn't be allowed to do this" then please tell me how you expect the state of technology on the web to advance.

So the idea is that Webkit adds a prefix to their cool property and it becomes -webkit-transition-property and it only works in browsers like Safari and Chrome. If web designers and developers like it enough then it will get inducted into the specification for CSS3 and the prefix gets dropped. In a galaxy far, far away where all browsers support the CSS3 specification, everyone can use transition-property reliably. That's the theory, anyway.

In the meantime will it create situations where some browsers have capabilities that others don't? Yes. Is there a better way to advance the state of web technology? Maybe, but the train has already left the station.
posted by jeremias at 1:50 PM on April 7, 2011 [4 favorites]

In order to understand this you have to start with the proposition that adding capabilities such as animation should be added to CSS in the first place.

Isn't that exactly why something like canvas exists? To provide a common set of API functionality for 'drawing' to the browser?
posted by SweetJesus at 1:54 PM on April 7, 2011

I think this is a fine tech demo for the capacities of webkit's experimental extensions to CSS.

But it should be marketed as such, not as a demo of what CSS can do.
posted by Fraxas at 2:00 PM on April 7, 2011 [1 favorite]

In the future, all those spots that used to have 40k flash banners will instead have 400k css3 / html5 / javascript banners. Often, the ads will be for the very same company that you're paying for the bandwidth they consume. Win win!

What a turbulent decade for the ad industry. Someone should make a show about it!
posted by condour75 at 2:00 PM on April 7, 2011 [2 favorites]

Animation is great!

(It's times like these when I wish Metafilter didn't strip out <marquee>. *insert sad face that follows your cursor around*)
posted by kmz at 2:00 PM on April 7, 2011

Isn't that exactly why something like canvas exists? To provide a common set of API functionality for 'drawing' to the browser?

Well, it'd die on it's ass if you tried animating it in CANVAS and looking at on an iPhone, whereas it mostly sort of works done like this.

CANVAS is really a pretty terrible CPU intensive way of doing animation, people are kind of crazy for using it.
posted by Artw at 2:04 PM on April 7, 2011

Ignore the haters, this is actually a pretty awesome bit of work.
posted by Blazecock Pileon at 2:11 PM on April 7, 2011

The only thing I hate is being labeled a hater for having a different opinion.
posted by BeerFilter at 2:16 PM on April 7, 2011 [11 favorites]

So, just to be clear.

Is it being said that it would be impossible to do this in a non-Webkit browser?
posted by kafziel at 2:36 PM on April 7, 2011

It would be impossible to do this with this approach in a non-webkit browser. Other approaches could produce similar results.
posted by Artw at 2:42 PM on April 7, 2011

am impressed by the animation but ... how should i put this ... unhappy with the lack of audio. i feel there's a UX vaccum --without audio it feels like the animation. and by that, i mean that the animation is so good that it's confusing not to have the audio along with it.
posted by liza at 2:45 PM on April 7, 2011

Is it being said that it would be impossible to do this in a non-Webkit browser?

In this specific way, yes. Fancy animated HTML5 demos in general? Certainly not. The Mozilla Demos work in the latest versions of Firefox, Chrome, and Safari (some demos use WebGL, which isn't supported in release builds of Safari yet, but is included in Safari's nightly builds).
posted by zachlipton at 2:46 PM on April 7, 2011

correction:

--without audio it feels like the animation IS BROKEN.
posted by liza at 2:48 PM on April 7, 2011

With NoScript it is absolutely 100% identical to a fucking video of the opening credits, except I can't even click to load it because I hate Safari.

Super, thanks for the awesome stunt. I'll make sure to be super impressed at all the time you wasted making this.
posted by paisley henosis at 2:53 PM on April 7, 2011

I mean, don't get me wrong, it's impressive that it does what it does using CSS for the animation, on the other hand, it can do that because webkit has proprietry properties that allow for animation, and simply coding against proprietry properties and getting them to do exactly what they're supposed to do isn't *that* impressive. And anyone whose been in the web game for a while certainly has reason to be suspisious of random proprietry extensions to browser capabilities that look good in tech demos. And, as properties alluded to, this is how browser vendors try to push stuff into standards these days - by going ahead and adding things to browsers and then lobbying for them, and it can create some uneven results and can often seem like a distraction from providing a stable platfrom for developers to work on that actually supports them in less exotic tasks.
posted by Artw at 2:56 PM on April 7, 2011

The only thing I hate is being labeled a hater for having a different opinion.

Except you had no other comment in this thread except this one so no-one's labeling you anything.

The hater comment isn't about different opinions, it's about the reaction I've seen to this sort of web technology example. It's easy to look at this as a "step backwards" or "cool but IE won't support it for years" and dismiss it, but somebody spent time building something unique and somehow this always bring out people eager to find faults with it.
posted by jeremias at 3:02 PM on April 7, 2011 [1 favorite]

And, as properties alluded to, this is how browser vendors try to push stuff into standards these days - by going ahead and adding things to browsers and then lobbying for them, and it can create some uneven results and can often seem like a distraction from providing a stable platfrom for developers to work on that actually supports them in less exotic tasks.

I see your points but it's not as if the browser manufacturers have limited resources. They can have people devoted to providing a stable platform and people devoted to developing new technology. The two are not not mutually exclusive.

How else would you propose browser vendors add new features to standards?
posted by jeremias at 3:08 PM on April 7, 2011

‘Mad Men’-style opening credits in CSS3 and JavaScript

Not actually the opening credits, but rather an Ad for web design.
posted by blue_beetle at 3:24 PM on April 7, 2011 [1 favorite]

How else would you propose browser vendors add new features to standards?

Well, there you have the other side of the equation, in that standards bodys seem to be equaly useless in coming up useful features, so we get caught between browser vendors pushing the latest whizzo thing that looks good in demos and greybeard W3C types arguing the minuate of some obscure formating option (or semantic types opining on whether it's appropriate to use the FOOTER tag for page footers) while doing nothing to help developers perform basic and simple layout tasks without resort to trickery.
posted by Artw at 3:32 PM on April 7, 2011

It's easy to look at this as a "step backwards" or "cool but IE won't support it for years" and dismiss it, but somebody spent time building something unique and somehow this always bring out people eager to find faults with it.

This, in a nutshell. Thanks, jeremias.
posted by Blazecock Pileon at 3:36 PM on April 7, 2011 [1 favorite]

Except you had no other comment in this thread except this one so no-one's labeling you anything.

I don't have to comment in a thread in order to be concerned with the level of discourse. I feel saying "Ignore the haters" has become shorthand for saying "Ignore those questioning what I'm saying, because they have an irrational, mistaken beliefs and make those comments from a position of angry passion with no basis in reality," which I don't think is the case here.

The argument here seems to be "Look at this cool thing someone made with CSS3 and JavaScript" vs "Yeah, but it don't work in 3/4th of web browsers. It's not as cool as the person trying to sell in implies."

My name is BeerFilter. I hate.
posted by BeerFilter at 3:36 PM on April 7, 2011 [2 favorites]

Mod note: Few comments removed. Dial it back or we will dial it back for you. Thank you.
posted by jessamyn (staff) at 3:55 PM on April 7, 2011 [1 favorite]

Judging from some of the comments in this thread, I'm guessing that some of you need to be made aware of CSS3 Pie, a simple way to enable some CSS3 features in IE 6, 7, and 8.
posted by Asparagirl at 4:34 PM on April 7, 2011

Seconding that. It's not without it''s limits though, and of course wouldn't do much for funky CSS animation.
posted by Artw at 4:39 PM on April 7, 2011

Don’t have the necessary Webkit browser? Thanks to Web standards, what you’ll get is a text equivalent (as in Lynx) or a nicely-laid-out storyboard

Oh horseshit. For reasons that don't particularly matter here, I'm stuck on an ancient browser, and therefore any site that tries to do fancy new stuff without an appropriate fallback sticks out like a sore thumb. Most sites do just fine, but this is not one of them. This is what I see. That is not a nicely laid-out storyboard by any stretch of the imagination, that's a jumble of impossible to read text and images.
posted by Rhomboid at 4:40 PM on April 7, 2011 [1 favorite]

And just to clarify, I have no problem with people doing new and interesting things that have no chance of working in my browser. As I said, I'm used to sites like that breaking horribly and I just silently shrug it off and disable all styles. What I'm bitter about is being told that I will be accommodated and then that turning out to be false.
posted by Rhomboid at 4:46 PM on April 7, 2011

Yeah I wouldn't mind all that much if this was just advertised as a WebKit demo. Then I'd be saying "cool demo" and we'd all move on. The problem is that they are patting themselves on the back for their "progressive rendering" and how well it works in different other browsers. when the reality is that it only works in WebKit. In the latest version of Firefox, it's just a storyboard that could have been created with minimal effort using just HTML tables back in the 90s.

In the real world, web designers and developers have to create cool stuff that works for the majority of the people on the web. A lot of very smart people have spent a lot of time figuring out some non-trivial tools to make that happen. If it only works in one browser, it's not really the web, and if it doesn't have to use open web technology, you might as well just make the animation with Macromedia Director circa 1995.
posted by zachlipton at 5:04 PM on April 7, 2011

Can Rhomboid fill us in on his precise browser version and OS?
posted by joeclark at 5:46 PM on April 7, 2011

Firefox 2.0.0.19, Debian etch.
posted by Rhomboid at 6:01 PM on April 7, 2011

You're quite the rarity, you know. When webdevs think of people stuck on older browsers they pretty much assume it's all corporate users stuck with IE.
posted by Artw at 6:14 PM on April 7, 2011

It does seem like a failure to capture your edge-case browser, a term I am not using pejoratively.
posted by joeclark at 6:26 PM on April 7, 2011

Of course, Firefox switches to Chrome-style silly numbering soon, so by the end of the year you'll be on two and everyone else will be on Firefox 10 or 100 or 1000 or something.
posted by Artw at 7:10 PM on April 7, 2011

i see exactly the same thing as Rhomboid and i am on Firefox 3.5.18; which is to say, a NOT at all old browser (just not the 3.6 or 4).

and i want to reiterate, the "video" seems broken because there was no audio when i opened it in Chrome.
posted by liza at 5:59 AM on April 8, 2011 [1 favorite]

Of course, Firefox switches to Chrome-style silly numbering soon, so by the end of the year you'll be on two and everyone else will be on Firefox 10 or 100 or 1000 or something.

Looks like IE is going in for silly numbering too: Microsoft pushes out preview build of Internet Explorer 10. Hmm... CSS Gradients and CSS3 Flexible Box Layout, that's handy.
posted by Artw at 10:31 AM on April 12, 2011