Upload
nicholas-zakas
View
22.532
Download
0
Tags:
Embed Size (px)
DESCRIPTION
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
Citation preview
Progressive Enhancement 2.0Because the Web isn't Print
Nicholas C. ZakasApril 16, 2011
Who's this guy?
Presentation Architect
Contributor,Creator of YUI Test
Author Lead Author Contributor Lead Author
@slicknet
(Complaints: @reybango)
Used with permission. Copyright 2010 Xtress
http://www.flickr.com/photos/noelboss/4549392694/
@paul_irish
@slicknetsmom
A Brief History ofWeb Development
http://www.flickr.com/photos/marc_smith/447183492/
1993
1994
1995
1996
Nowin
color!
1995
1996
Alsoin
color!
"Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network."
Tim Berners-Lee, 1996
Graceful Degradation
http://www.digital-web.com/articles/fluid_thinking/
<noscript>
<noscript>Your browser doesn't support JavaScript. Sucks to be you.
Bye.</noscript>
Progressive Enhancement
http://www.alistapart.com/articles/understandingprogressiveenhancement/
http://www.alistapart.com/articles/understandingprogressiveenhancement/
http://www.flickr.com/photos/midiman/336647596/
"An escalator can never break;it can only become stairs."
Mitch Hedberg, Comedian
Behavior
Presentation
Content
JavaScript
CSS
HTML
JavaScript
CSS
HTML
A-Grade
HTML
C-Grade
Progressive Enhancement 1.0
We're having some problems
Development takes too long
http://www.flickr.com/photos/athomeinscottsdale/4507847940/
Too many bugs
http://www.flickr.com/photos/kaibara/4632384645/
Our pages are slow
http://www.flickr.com/photos/drb62/4990651560/
Why?
We got confused
Web page : ?
Web sites look like print
Web page : Printed page
1) WEB PAGE : PRINTED PAGE ::
(a) dairy : diary (b) spider : author (c) web browser : book (d) digital photo : print photo (e) cell phone: text message
http://www.flickr.com/photos/chrisschroeder/4096627359/
Every printed book is exactly the same
http://www.flickr.com/photos/joanna8555/5554285729/
We became obsessed with identical experiencesacross all browsers
http://www.flickr.com/photos/denisdervisevic/5327974794/
People got angry if you suggested otherwise
Quality?
Professional?
Consistency?
Unity of messaging combined with brand identification while
setting user expectations appropriately?
http://xark.typepad.com/my_weblog/2008/01/bullshit-still.html
1) WEB PAGE : PRINTED PAGE ::
(a) dairy : diary (b) spider : author (c) web browser : book (d) digital photo : print photo (e) cell phone: text messageWRONG
http://www.flickr.com/photos/ramdac/377087239/
We started the analogy in the wrong spot
Web page : ?
Web page : Printed page
WRONG
Web browser : Web page
1) WEB BROWSER : WEB PAGE ::
(a) telephone : call (b) computer : email (c) printed book : printed page (d) television : television show (e) mailbox : letter
Old browsers are like black & white TVs
http://www.flickr.com/photos/stevestein1982/4047834684/
New browsers are like HD TVs
http://www.flickr.com/photos/lge/3988988400/
TV already solved this problem
http://www.flickr.com/photos/navdeepraj/504596529/
This would be sillyYet this is what web developers have been doing
http://www.flickr.com/photos/navdeepraj/504596529/
Do web sites need to look exactly the same in every browser?
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Your site SHOULD look different in different browsers
Give users an incentive to upgrade
JavaScript
CSS
HTML
Progressive Enhancement 1.0
Progressive Enhancement 2.0
Base JSBase JSBase JS
OMG CSS OMG JS
Nice CSS Nice JS
Base CSS Base JS
HTML
Chrome
Base JSBase JSBase JS
Base JSBase JSBase JSOMG CSS OMG JS
Base JSBase JSBase JSNice CSS Nice JS
Base CSS Base JS
HTML
Firefox
Base JSBase JSBase JS
OMG JS
Base JSBase JSBase JSNice CSS Nice JS
Base CSS Base JS
HTML
Internet Explorer 9
Base JSBase JSBase JS
Base JSBase JSBase JSNice CSS Nice JS
Base CSS Base JS
HTML
Internet Explorer 6
Base JSBase JSBase JSBase CSS Base JS
HTML
Netscape 4
HTML
New Browser Capabilities
Rounded CornersDrop ShadowsGradientsTransitionsTransformsMultiple Background Images
Drag and DropGeolocationCross-Domain AjaxCross-Domain MessagingClient-Side Data StorageCanvas/WebGL
The best possible experiencegiven the device capabilities
Awesome!
OK
OK
Bad!
Effort
Valu
e
11
8
81
IE6IE7Others
Browser Marketshare
Source: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2
40
60
IE6 & IE7Others
Development Time Spent
Source: Me
Used with permission. Copyright 2008 BoyShapedBox.http://www.flickr.com/photos/boyshapedbox/2282655473/
http://www.flickr.com/photos/myphotoshopbrushes/3242490894/
Rounded CornersDrop ShadowsGradients
Only with CSS
Advanced scripting andbehavior
Only with nativeAPIs
Trying to make older browsers do things they were never meant to do
Too many bugs
Slow pages
Long development time
Older browsers often need*a lot*
more code to do the same thing
Before
<div class="y-pa-app pa-app-view" id="{$id}-app-view"><div class="pa-app-chrome-topshadow pa-app-chrome-border-color y-pa-ln-open-dk">
<div class="pa-app-chrome-leftcorner y-fp-pg-controls"></div><div class="pa-app-chrome-rightcorner y-fp-pg-controls"></div>
</div><div class="pa-app-chrome-rightshadow">
<div class="pa-app-chrome-content pa-app-chrome-border-color y-pa-bg-open y-pa-ln-open-dk"><div class="pa-app-chrome-hd">
<ul class="pa-nav"><li>
<a role="button" class="pa-close y-fp-pg-controls-nt hide-textindent" href="#close" {$closeBeacon2}><!!>STR.PA.EXPANDED.CLOSE</!!></a>
</li></ul>
</div><div class="pa-app-chrome-bd">
<div class="pa-mod-ctr" id="{$id}-mod-ctr" style="visibility: visible;"></div><div id="{$id}-module-loading-msg" class="y-pa-ln-open-dk pa-module-loading-msg"></div><a role="button" class="pa-close hide-offscreen" href="#close"
{$closeBeacon2}><!!>STR.PA.EXPANDED.CLOSE</!!></a></div>
</div></div><div class="pa-app-chrome-bottomshadow y-fp-pg-grad pa-app-chrome-border-color y-pa-ln-open-dk">
<div class="pa-app-chrome-leftcorner y-fp-pg-controls"></div><div class="pa-app-chrome-rightcorner y-fp-pg-controls"></div>
</div></div>
1467 bytes
After
<div class="pa-app" id="{$id}-app"><button class="do-app-close y-fp-pg-controls-nt hide-textindent" {$closeBeacon2}><!!>STR.PA.EXPANDED.CLOSE</!!></button><div class="pa-app-bd">
<div id="{$id}-mod" class="pa-app-mod"></div><div id="{$id}-module-loading-msg" class="y-pa-ln-open-dk pa-module-loading-msg"></div>
</div> <div class="pa-app-cort"></div><div class="pa-app-corb"></div><button class="do-app-close y-fp-pg-controls-nt hide-textindent" {$closeBeacon2}><!!>STR.PA.EXPANDED.CLOSE</!!></button>
</div>
566 bytes
Less code=
Faster
Won't people notice?
Crying baby! Oh nos!
http://www.flickr.com/photos/tudor/318123668/
What did you see?
Crying baby! Oh nos!
http://www.flickr.com/photos/tudor/318123668/
Crying baby! Oh nos!
http://www.flickr.com/photos/tudor/318123668/
Your users only use one browser
You are not alone
Summary
1) WEB BROWSER : WEB PAGE ::
(a) telephone : call (b) computer : email (c) printed book : printed page (d) television : television show (e) mailbox : letter
JavaScript
CSS
HTML
Progressive Enhancement 1.0
Progressive Enhancement 2.0
Base JSBase JSBase JS
OMG CSS OMG JS
Nice CSS Nice JS
Base CSS Base JS
HTML
http://www.flickr.com/photos/navdeepraj/504596529/
@paul_irish
@slicknetsmom
The End
Etcetera• My blog: www.nczonline.net• Twitter: @slicknet• Rate me: http://spkr8.com/t/7213