�ݺ�ߣ

Progressive Advancement
in Web8
(btw- web8 == html5 + css3)
Paul Irish
Isobar
JSConf ’10

Friday, April 23, 2010

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


SHIM. okay? Shim. not shiv.


hx, ly.
Printing, too. t l
rea

www.iecss.com/print-protector by @jon_neal


now
hx, ly. htm
Printing, too. t l
rea mo l5s
hiv
in
der &
niz
r!

www.iecss.com/print-protector by @jon_neal


How Ready Is HTML5 & CSS3?


Contenteditable


CSS3 Please!


CSS3 Helpers

border-radius.com

CSS3 Helpers

border-image.com
border-radius.com

But what if there’s no support?


Modernizr
Making use of tomorrow’s technologies, today!


Feature Detection
Just Detect It™


sni
ffin
g us
era
gent
s ==
= sn
iffin
g gl
ue


Native No Native
Implementation Implementation
. box { .no-borderradius .box {
// use border-radius // maybe less padding?
} }

if (Modernizr.borderradius == false){
// call up DD_roundies, etc.
}


Native No Native
Implementation Implementation
.boxshadow div { .no-boxshadow div {
box-shadow: 1px 1px 1px #666; border-bottom: 1px solid #666;
} border-right: 1px solid #777;
}


// geo-location bridge
function 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
})
});
}
}
// usage
getLocation(function(pos){
console.log("I'm located at ",pos.lat,' and ',pos.lon);
});


OM
G it
onl ’s
y7
k!


We got you covered, b.
Rounded corners 2D Transformations
@font-face fonts CSS Gradients
Canvas SVG
rgba(), hsla() colors Geolocation
border-image CSS Columns
box-shadow HTML5 Forms
HTML5 Audio & Video Web Workers
CSS Animations Ofﬂine Web Apps
CSS Transitions …


Rounded corners 2D Transformations webGL
@font-face fonts CSS Gradients SMIL
Canvas SVG hashchange event
rgba(), hsla() colors Geolocation localStorage
border-image CSS Columns sessionStorage
box-shadow HTML5 Forms postMessage
HTML5 Audio & Web Workers html5 drag ‘n drop
Video
Ofﬂine Web Apps web sql database
CSS Animations
CSS Transitions


Rounded corners 2D Transformations webGL
@font-face fonts CSS Gradients SMIL
Canvas SVG hashchange event
rgba(), hsla() colors Geolocation localStorage
border-image CSS Columns sessionStorage
box-shadow HTML5 Forms postMessage
HTML5 Audio &
Video
Steal me!
Web Workers html5 drag ‘n drop
Ofﬂine Web Apps web sql database
CSS Animations
CSS Transitions


Modernizr
http://modernizr.com
@modernizr

Yah, it’s open source. Fork it, baby.


dowebsitesneedtolookexactlythesameineverybrowser.com


dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com


ishtml5readyyet.com


UP !
HU T wrong.
S y ou ’re

ishtml5readyyet.com


Your mother does
NOT ﬁnd a website
she likes the look of,
and then opens it
another browser.

~Andy Clarke (@malarkey)


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.


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


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)


When performance is poor
There are three options:

1. Redevelop the code

2. Drop the feature

3. Redesign approach of the UI


Me:
http://paulirish.com
@paul_irish


�ݺ�ߣ

Progressive Advancement in Web8

More Related Content

Progressive Advancement in Web8