Progressive Advancement in Web8

Progressive Advancementin 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.


Printing, too.

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

thx,

really.


http://www.iecss.com/print-protector/


Printing, too.

www.iecss.com/print-protector

now in html5shiv & modernizr!

by @jon_neal

thx,

really.




How Ready Is HTML5 & CSS3?


http://html5readiness.com/






Contenteditable


http://annevankesteren.nl/test/contenteditable-style.htm






http://thelincolnshirepoacher.com/



CSS3 Please!


http://css3plz.com

http://css3plz.com

CSS3 Helpers

border-radius.com


CSS3 Helpers

border-radius.comborder-image.com


But what if there’s no support?


ModernizrMaking use of tomorrow’s technologies, today!


Feature DetectionJust Detect It™


sniffing useragents === sniffing glue


Native Implementation

. box {// use border-radius

}

No Native Implementation

.no-borderradius .box {// maybe less padding?

}

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

}


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;

}


// 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);});


OMG it’s only 7k!


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.


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


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!


Modernizr

http://modernizr.com

@modernizr

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




dowebsitesneedtolookexactlythesameineverybrowser.com


dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com


ishtml5readyyet.com


ishtml5readyyet.com

SHUT UP!

you’re wrong.


Your mother does NOT find 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



http://dl.dropbox.com/u/39519/web8demo/cssanimmask.html



http://dl.dropbox.com/u/39519/web8demo/draw.html



http://dl.dropbox.com/u/39519/web8demo/index.html

http://dl.dropbox.com/u/39519/web8demo/index.html

Me:

http://paulirish.com

@paul_irish




Progressive Advancement in Web8

Technology

Transcript of Progressive Advancement in Web8