Placeholder Image

Subtitles section Play video

  • >> NICHOLAS ZAKAS: Okay, excellent. So I did used to work at Yahoo!. I'm now a consultant,

  • 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

  • that you use to consume that content are separate, they're decoupled. It's very, very different

  • from the written word.

  • The problem for us is that we started the analogy in the wrong spot. We started with

  • a web pages is like what, and we went to a web page is like a printed page, and that

  • was just wrong. What we should have done was try to define this relationship: a web browser

  • is to a web page. If you go through these and you say a web browser is to a web page

  • as...? What actually makes the most sense is a television is to a television show.

  • Let's stop and look at that for a minute. I said we have content and then a bunch of

  • different consumption devices. If you look at TV, you have your content...

  • [laughter]

  • Thank you. And you have a bunch of different consumption devices. So it looks very similar.

  • If you think about it, the old browsers are like black and white TV; they're kind of slow,

  • require a lot of energy, graphics are kind of crappy. We even saw at the beginning that

  • the older browsers actually were pretty much black and white. Newer browsers are like HDTVs;

  • very shiny, lots of new features, really nice graphics, everything's very pretty.

  • And TV already solved this exact problem. Nobody kept saying oh, you know what, we have

  • people on black and white TVs that aren't going to be able to enjoy that, so you know,

  • maybe we should just give everybody that same experience. That would have been insane. Why

  • are you doing that? Why did we even bother coming out with color TVs if you're just going

  • to be feeding me a black and white signal? That doesn't make any sense. And yet with

  • web development, we've been doing that. We've been going for the lowest common denominator

  • just to make sure it works the same across all browsers. It doesn't make any sense.

  • What came first, the color TV, or the color TV signal? It's chicken and egg, but you're

  • not going to have one without the other. Then when HDTV came out, all of a sudden we had

  • these signals that degrade really nicely. You have the HD signal on the HDTV, standard

  • def on standard TV, and yet there's still black and white TVs out there that can consume

  • that signal and display something logical.

  • Do web sites need to look the same in every browser? No. If you're not sure, you can go

  • to dowebsitesneedtolookexactlythesameineverybrowser.com. That's an actual site. This is a screenshot

  • of that actual site.

  • >> AUDIENCE MEMBER: Does it look the same in every browser?

  • >> NICHOLAS ZAKAS: It does not look the same in every browser. Your site should look different

  • in different browsers. Think about HDTV. When I went out and bought my thousand dollar HDTV

  • -- which is awesome, by the way: 42 inches, LED -- if I had plugged that in and I got

  • the exact same experience as my old CRT, I would have been really pissed. Why did I bother

  • spending all this money? Give your users an incentive to upgrade. This is exactly what

  • we've been complaining about with browser users forever -- they don't upgrade. Well,

  • why would they upgrade if things always look the same? They wouldn't. It's a lot of trouble.

  • So if this was Progressive Enhancement 1.0, Progressive Enhancement 2.0 looks a little

  • bit different. It starts with HTML as the base, you add a little bit of CSS and some

  • JavaScript, but now the CSS and the JavaScript are siblings because you can have HTML with

  • just JavaScript and no CSS. You can also have HTML with CSS and no JavaScript. When you

  • think about things this way, you're able to start adding on additional layers in both

  • stacks. This goes on forever, it goes on to infinity. You can just keep adding more and

  • more features on top.

  • For Chrome you can serve everything that you have, and you can start peeling things off

  • for other browsers. Firefox may be a little less, IE9 may be a little less, go