which is why I wear these jackets, because it makes you look more professional when you

go in and talk with people. I want to apologize upfront: I lost my voice a couple of days

ago and it's just starting to come back, so this talk may actually sound a lot like a

conversation with an iPhone user which just kind of drops out randomly.

What else do I do? I write a bunch of books. I wrote this one, High Performance JavaScript,

this one, which just came out last month -- and we have three to give away at the end of the

night, so stay tuned for that -- and another one that will be coming out later this year.

And yes, that's a lot of books, but the NFL season is over and I have nothing else to

do on Sundays. The jokes don't get any better, so you might as well laugh at these.

[laughter]

And on Twitter, I am @slicknet.

>> AUDIENCE MEMBER: Woo!

>> NICHOLAS ZAKAS: Thank you.

Before I get started with progressive enhancement, I want to talk a little bit about the history

of web development, where we came from leading to where we are today. In the beginning there

was Mosaic. How many people have used Mosaic? Wow, that's a lot of people. Way more than

I expected. That's great. So Mosaic was the first web browser, created at the University

of Illinois where they have this great plaque that says 'Web Browser'. It's great. This

is like the only plaque that just has a regular noun at the top; I don't think that there's

any that's like 'Telephone' or 'Television', but for a web browser we have it.

This is what Mosaic looked like. Yeah, very pretty. This is what the web looked like at

the beginning. Everything was a gray background, black text, blue links, and if you were lucky,

a few images thrown in for good measure. Then came Netscape. Pretty much the same. We still

had these gray pages with black text and blue links. Netscape 2 -- same thing. The big change

there is we got the cool logo in the corner, which actually began the animated gif throbber

thing that browsers do all the time now, so thank you Netscape.

Then Netscape 3. This is where things started to get interesting, because you start to see

the beginning of page layout, right? How do you think that was laid out? Tables. Damn

straight. We had different size fonts, but the really interesting thing about Netscape

3 is that you could add color to your page. All of a sudden, the web went from being a

gray background on every single page to where you were now able to choose a different background,

which could be a color, a background image. You could change the text color as well. It

was very exciting. So you started to see these appear everywhere, these little buttons: 'Best

viewed in Netscape'. That's because that was the only browser that supported color, and

that gave us awesome web pages like this. 'Best viewed in Netscape', right there it

says it. Although I would argue there's no best way to view this.

Then came Internet Explorer. This is IE 2. Anybody ever use IE 2? Yeah? Wow, a bunch

of people too. Very much like Mosaic and Netscape 2 until we got to IE 3, which had color. You

know what quickly followed after that? It was these buttons showing up everywhere: 'Best

viewed in Internet Explorer'. Okay. So now developers started to say we have two browsers

that have similar capabilities -- well, I'm going to make my page so that it's best viewed

in both, and that awesome page that we saw earlier is also best viewed in Internet Explorer.

That little button is actually an animated gif that rotates between Netscape and IE.

Yeah, it's just a screenshot so you don't get to really see the awesome of it.

This was very frustrating to Tim Berners-Lee, because this was not what the internet was

supposed to be about. The whole idea was you write a document anywhere and then you can

access it from anywhere, and yet all of a sudden we had all of these little buttons

popping up saying best viewed with this browser, best viewed with that browser. It ended up

being a pain.

And so we entered the graceful degradation phase of web development. Graceful degradation

comes from physical products, because physical products, if something goes wrong, they can

hurt you. If your toaster just stopped working, it shouldn't explode in your face. In these

physical products, we build them with an anticipation of what could possibly fail, and then providing

some sort of logical fallback for that. For example, in real life, if you were to fear

that zombies would attack, you would come up with a logical fallback plan. I took this

photo in Hawaii, actually, which is not a huge bed of zombie activity.

[laughter]

Thank you for laughing. Seriously, if you look at any zombie movies, they don't take

place in Hawaii. But the fact of the matter is you have to be prepared just in case, so

this bunker is property of Bri if zombies attack.

There's a really good article written by Peter Paul Koch -- you may have heard of, founder

of QuirksMode -- down on Digital Web Magazine. This is all about graceful degradation. It's

ten years old now, but it's kind of nice to go back and read through. He talks about the

decisions that he went through with deciding whether he should support Netscape or not.

It's really great to go back and read these old articles to see just how far we've come

in web development.

<noscript> is a good example of graceful degradation. It's your planning for something specifically

not working and then giving a fallback. This is graceful degradation. It would not be cool

to just show a blank page, but if you tell people that you're showing them a blank page

because their browser can't do something, that's okay. That's graceful degradation.

And of course, we're all very familiar with this now thanks to Apple. Graceful degradation.

Your browser doesn't support Flash? I'm just going to tell you it doesn't support Flash

and it sucks to be you right now. Graceful degradation.

Not surprisingly, people didn't love that, so the next way was progressive enhancement.

Another good article. This is written by Aaron Gustafson on A List Apart about progressive

enhancement and the difference between this and graceful degradation. The basic difference

is you're going from the other way; instead of saying I'm going to build the uber-experience

and then when things break I'm going to give you little crappy pieces of experience, it

says I'm going to build up from basic core experience and add on top of that.

If you go to my blog, which I encourage you to do, it will not look like this. This is

what it looks like when I have all the style sheets removed. It might not look pretty,

but you can actually still read the content, and that's the only reason why you'd go to

my blog is to read the content; there's nothing else there to do. So you start with that and

then layer on the CSS on top of that. Whether or not you like my green color scheme, it

just adds a little bit of styling to it.

The article had a really great diagram, which I've stolen and pasted right here for you,

of a Peanut M&M. If you want to build a Peanut M&M, you don't start with the candy shell,

right? Right? Okay. You start with the peanut, and then you cover it with chocolate, and

then you cover that with the candy shell. This is analogous to how you build your website.

You start with the core -- it's either content or some core experience -- and then you layer

on the presentation, the styling, the CSS, on top of that, and then you add the scripting

on top of that.

In real life an example is an escalator. Comedian Mitch Hedberg said "an escalator can never

break; it can only become stairs." This is really cool if you stop and think about it.

Somebody said I need to get up to that second floor. Well, you could take the stairs. Yeah,

but that's too slow. Well, what are you going to do? I know, we could come up with something

new? No, I have a better idea: let's make the stairs move! Really cool. Started with

something that already existed, and already worked, and just enhanced it by adding electricity.

So you'd never see 'escalator temporarily out of service', just 'escalator temporarily

stairs'. All right, five people laughing, we're getting there, we're getting there.

Also in real life, electric toothbrush. If you don't have batteries in there, it's a

toothbrush. You put batteries in and it's an electric toothbrush. Progressive enhancement.

No need to applaud for any of these, by the way.

So what does a stack look like? You start with your content, you layer presentation

on top of that, and you layer behavior on top of that. What I'm noticing that's very

interesting about this presentation, because it's the first time I've given it on this

computer, is all my animations are going automatically, which does wonders for your timing. It's great.

I hope I don't have any timing based jokes; that's going to be horrible.

These all map to the technologies that we know and love of HTML, CSS, and JavaScript.

The old Yahoo! graded browser support was based on this idea of progressive enhancement.

For A-grade browsers, you give all the layers, everything that your site is capable of doing.

For C-grade, you just strip off those top two layers and just keep it with HTML. That's

what I like to call Progressive Enhancement 1.0; that was really designed for the era

when we were dealing with two browsers, IE and Netscape.

Of course, today we have a lot more. This is just a small subset. Because of that, now

we're having some problems that we never really dealt with before. Development takes too long.

I'm always amazed at just how long it takes to do simple things these days. If you ask

your managers, I'm sure that they're pretty shocked too. 'Oh, it's just a button, what

the hell? What's taking so long?'

There's a lot of bugs. How many people spend most of their day fighting bugs? Yeah? A lot

of people. I know I do. This picture creep out anybody else? I'm just curious. Yeah?

Okay. It's just me. I mean I picked the picture, but it just really creeps me out.

And our pages are slow. Everybody's talking about performance. I even wrote a book about

it. There's a conference about it. Everybody's concerned about performance, and yet we have

all these fast computers and fast internet connections, and we're still complaining that

things are slow. That all leads to a horrible user experience. Nothing for Dr. Horrible?

Okay.

So why is this happening?

[laughter]

No, okay, you're going to laugh at this? This is what you're going to laugh at? Really?

So this is a cop out excuse. It's not Internet Explorer's fault, it's actually our fault.

We got confused. The reason why we got confused is because we're dealing with a new technology;

this happens whenever new technologies come out: we try to figure out what the hell that

thing is. So we looked at a web page and we said what is that like? What is it that we

know it's like that we're already familiar with? We said well, web sites look a lot like

print. We have the print New York Times here on the left, and we have the online New York

Times on the right, and to the layman they look very similar: you have a banner up at

the top, you have columns of content and pictures mixed in. Very similar. Okay, so a web page

must be like a printed page, right? That makes sense.

[Audience member makes inaudible comment]

>> NICHOLAS ZAKAS: Hey, we're getting there, hold on. So we went through... Oh, this is

one of those things where it works way better with a delay of the animations. Imagine that

the circle isn't there yet, and I'll tell you when it is. You guys remember on the SATs

-- I may be dating myself here -- how many people remember on the SATs the analogies?

Yeah? Yeah. I hear that they're not actually on there anymore because they suck. We basically

went through and tried to figure out what this relationship was and ended up saying

that a web browser is kind of like a book. A web page is to the printed page as the web

browser is to a book. Okay, so every printed book is exactly the same, right? It doesn't

matter how many of them that you see, they're pretty much the same. I have three of my books

right here. You won't be able to tell one from the other. Okay, then that must mean

that we need to have identical experiences across websites too, right?

Really, nothing for the chubby guys with the browsers on their bellies? Nothing? You guys

are all filled up on pizza, right?

So people get angry if you try to tell them that things can look different in different

browsers, they get really, really angry. They say: don't you care about quality? It's a

quality job to make it look exactly the same across all browsers. Aren't you professional?

Because professionals make sure that things look the same across all browsers. Don't you

care about consistency? I mean, that's what our company is all about, is consistency,

and we have to have a consistent experience across all browsers. Then somebody comes in

and starts saying something like that; I don't even know what that means.

But all of that is bullshit, absolute bullshit. It's stuff that people told themselves because

they were confused about what they were doing. We started out with this analogy, and that

was just wrong. The reason why it's wrong is because of the way that media works. You

start out with some content -- that's your song, your video, some text -- and then you

have some consumption device, something that allows you to consume that content and enjoy

it. That's ultimately what leads to happy users. For most of civilization, we've had

the written word, and that means for most of civilization our content was actually the

same as our consumption device. It's the same thing. For most of time that's how we thought

about it. That's why conquering armies would come into towns and burn books, because once

the books are gone, the content was also gone.

But we're in a different era now. We have content, which is a web page, that lives completely

separate from a consumption device. In fact, we have a bunch of different consumption devices

because there are a bunch of different browsers. So all of a sudden the content and the device