Download - Progressive Advancement in Web8
![Page 1: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/1.jpg)
Progressive Advancementin Web8(btw- web8 == html5 + css3)
Paul Irish
Isobar
JSConf ’10
Friday, April 23, 2010
![Page 2: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/2.jpg)
Friday, April 23, 2010
![Page 3: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/3.jpg)
Native is better
html5 form controls vs UI libraries
html5 drag ‘n drop vs draggable()
css transitions vs animate()
border-radius, border-image, background-size vs using large sprites
localStorage vs cookies
Friday, April 23, 2010
![Page 4: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/4.jpg)
SHIM. okay? Shim. not shiv.
Friday, April 23, 2010
![Page 5: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/5.jpg)
Printing, too.
www.iecss.com/print-protector by @jon_neal
thx,
really.
Friday, April 23, 2010
![Page 6: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/6.jpg)
Printing, too.
www.iecss.com/print-protector
now in html5shiv & modernizr!
by @jon_neal
thx,
really.
Friday, April 23, 2010
![Page 7: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/7.jpg)
How Ready Is HTML5 & CSS3?
Friday, April 23, 2010
![Page 8: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/8.jpg)
Contenteditable
Friday, April 23, 2010
![Page 9: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/9.jpg)
Friday, April 23, 2010
![Page 11: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/11.jpg)
CSS3 Helpers
border-radius.com
Friday, April 23, 2010
![Page 12: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/12.jpg)
CSS3 Helpers
border-radius.comborder-image.com
Friday, April 23, 2010
![Page 13: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/13.jpg)
But what if there’s no support?
Friday, April 23, 2010
![Page 14: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/14.jpg)
ModernizrMaking use of tomorrow’s technologies, today!
Friday, April 23, 2010
![Page 15: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/15.jpg)
Friday, April 23, 2010
![Page 16: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/16.jpg)
Feature DetectionJust Detect It™
Friday, April 23, 2010
![Page 17: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/17.jpg)
sniffing useragents === sniffing glue
Friday, April 23, 2010
![Page 18: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/18.jpg)
Friday, April 23, 2010
![Page 19: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/19.jpg)
Native Implementation
. box {// use border-radius
}
No Native Implementation
.no-borderradius .box {// maybe less padding?
}
if (Modernizr.borderradius == false){// call up DD_roundies, etc.
}
Friday, April 23, 2010
![Page 20: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/20.jpg)
Native Implementation
.boxshadow div {box-shadow: 1px 1px 1px #666;
}
No Native Implementation
.no-boxshadow div {border-bottom: 1px solid #666;border-right: 1px solid #777;
}
Friday, April 23, 2010
![Page 21: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/21.jpg)
// geo-location bridgefunction getLocation(callback){ if (getLocation.cache) return callback(getLocation.cache); if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { callback(getLocation.cache = { "lat": position.coords.latitude, "lon": position.coords.longitude, "obj": position }) }); } else { $.getScript('//www.google.com/jsapi',function(){ callback(getLocation.cache = { "lat": google.loader.ClientLocation.latitude, "lon": google.loader.ClientLocation.longitude, "obj": google.loader.ClientLocation }) }); }}// usagegetLocation(function(pos){ console.log("I'm located at ",pos.lat,' and ',pos.lon);});
Friday, April 23, 2010
![Page 22: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/22.jpg)
Friday, April 23, 2010
![Page 23: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/23.jpg)
OMG it’s only 7k!
Friday, April 23, 2010
![Page 24: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/24.jpg)
Rounded corners @font-face fontsCanvasrgba(), hsla() colorsborder-imagebox-shadowHTML5 Audio & VideoCSS AnimationsCSS Transitions
2D TransformationsCSS GradientsSVGGeolocationCSS ColumnsHTML5 FormsWeb WorkersOffline Web Apps…
We got you covered, b.
Friday, April 23, 2010
![Page 25: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/25.jpg)
Rounded corners
@font-face fonts
Canvas
rgba(), hsla() colors
border-image
box-shadow
HTML5 Audio & Video
CSS Animations
CSS Transitions
2D Transformations
CSS Gradients
SVG
Geolocation
CSS Columns
HTML5 Forms
Web Workers
Offline Web Apps
We got you covered, b.webGL
SMIL
hashchange event
localStorage
sessionStorage
postMessage
html5 drag ‘n drop
web sql database
Friday, April 23, 2010
![Page 26: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/26.jpg)
Rounded corners
@font-face fonts
Canvas
rgba(), hsla() colors
border-image
box-shadow
HTML5 Audio & Video
CSS Animations
CSS Transitions
2D Transformations
CSS Gradients
SVG
Geolocation
CSS Columns
HTML5 Forms
Web Workers
Offline Web Apps
We got you covered, b.webGL
SMIL
hashchange event
localStorage
sessionStorage
postMessage
html5 drag ‘n drop
web sql databaseSteal me!
Friday, April 23, 2010
![Page 27: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/27.jpg)
Modernizr
http://modernizr.com
@modernizr
Yah, it’s open source. Fork it, baby.
Friday, April 23, 2010
![Page 28: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/28.jpg)
dowebsitesneedtolookexactlythesameineverybrowser.com
Friday, April 23, 2010
![Page 29: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/29.jpg)
dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
Friday, April 23, 2010
![Page 30: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/30.jpg)
ishtml5readyyet.com
Friday, April 23, 2010
![Page 31: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/31.jpg)
ishtml5readyyet.com
SHUT UP!
you’re wrong.
Friday, April 23, 2010
![Page 32: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/32.jpg)
Your mother does NOT find a website
she likes the look of, and then opens it another browser.
~Andy Clarke (@malarkey)
Friday, April 23, 2010
![Page 33: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/33.jpg)
A Performance Policy
2 truths
1. Both you and the client want the most responsive experience possible.
2. Everything added to the page slows it down.
Friday, April 23, 2010
![Page 34: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/34.jpg)
A Performance Policy
During IA, IxD and visual design
communicate impact of design decisions
Tell the client all browsers will not have the same experience
It’s not worthwhile to have feature parity
Stop in the name of love Drop in the name of performance
Friday, April 23, 2010
![Page 35: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/35.jpg)
What would you prefer me to do?
Spend my time hacking around issues in older technologies like Internet Explorer 6
or would you like that time spent making the
site look the best that it can on better desktop browsers, as well as on the
iPhone, iPod Touch, iPad, Blackberry and a whole host of other mobile devices?
~Andy Clarke (@malarkey)
Friday, April 23, 2010
![Page 36: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/36.jpg)
When performance is poor
There are three options:
1. Redevelop the code
2. Drop the feature
3. Redesign approach of the UI
Friday, April 23, 2010
![Page 37: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/37.jpg)
Friday, April 23, 2010
![Page 38: Progressive Advancement in Web8](https://reader034.vdocument.in/reader034/viewer/2022052522/554f9eccb4c90586258b4844/html5/thumbnails/38.jpg)
Me:
http://paulirish.com
@paul_irish
Friday, April 23, 2010