progressive advancement in web8

Progressive Advancementin Web8(btw- web8 == html5 + css3)

Paul Irish

Isobar

JSConf ’10

Friday, April 23, 2010

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

Friday, April 23, 2010

SHIM. okay? Shim. not shiv.

Friday, April 23, 2010

Printing, too.

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

thx,

really.

Friday, April 23, 2010

Printing, too.

www.iecss.com/print-protector

now in html5shiv & modernizr!

by @jon_neal

thx,

really.

Friday, April 23, 2010

How Ready Is HTML5 & CSS3?

Friday, April 23, 2010

Contenteditable

Friday, April 23, 2010

Friday, April 23, 2010

CSS3 Please!

Friday, April 23, 2010

CSS3 Helpers

border-radius.com

Friday, April 23, 2010

CSS3 Helpers

border-radius.comborder-image.com

Friday, April 23, 2010

But what if there’s no support?

Friday, April 23, 2010

ModernizrMaking use of tomorrow’s technologies, today!

Friday, April 23, 2010

Friday, April 23, 2010

Feature DetectionJust Detect It™

Friday, April 23, 2010

sniffing useragents === sniffing glue

Friday, April 23, 2010

Friday, April 23, 2010

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

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

// 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

Friday, April 23, 2010

OMG it’s only 7k!

Friday, April 23, 2010

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

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

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

Modernizr

http://modernizr.com

@modernizr

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

Friday, April 23, 2010

dowebsitesneedtolookexactlythesameineverybrowser.com

Friday, April 23, 2010

dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

Friday, April 23, 2010

ishtml5readyyet.com

Friday, April 23, 2010

ishtml5readyyet.com

SHUT UP!

you’re wrong.

Friday, April 23, 2010

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

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

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

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

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

Friday, April 23, 2010

Me:

http://paulirish.com

@paul_irish

Friday, April 23, 2010