progressive enhancement

ProgressiveEnhancement

Hello.Zach LeathermanFront End Engineer est. 1998UI “Architect” at Union Pacific RailroadWeb 3.0, 6 Bladed Razors, 7 Minute Abs:

849K Pageviews, 1.3K RSS subscribersBigText jQuery Plugin AuthorOmaha Startup Weekend: GiftBright and CallSpinnerNo affiliation:

@zachleat http://zachleat.com

Problem?

WEB BROWSERS

3.6, 4, 5

Fennec

Camino

Flock SeaMonkey

K-Meleon

MicroB

4, 5

http://www.quirksmode.org/blog/archives/2009/10/there_is_no_web.html

11, 12

Konqueror

(NetFront)

(NetFront)

RockMelt Shiira

OmniWebiCab

SkyFire

11Mini 4, 5, 6

Internet Channel

6

7, 8

9

Maxthon Avant Browser

SPECIFICATIONS

Design Documents

HTML276 pages

HTML5500 pages

http://html5.hadw.com/

UNRELIABLE or SLOW NETWORKS

Cheap shot

IMPERFECT CODE

<a href=”#” onclick=”throw Error(‘Whoops’)”> GO TO NEXT PAGE</a>

You’re unit testing, right?

P.E.

HTMLCSS

JavaScript

I need my space

HTML CSS

JavaScript

ContentPresentationBehaviors

HTML CSS

JavaScript

FirstSecondThird

Example

HTML

Ajax Target HTML

CSS

Modify Ajax Target

JavaScript

Choose Your Weapons Wisely

http://www.flickr.com/photos/29503348@N03/4915763648/

Performance

Accessibility

Common Mistakes

<noscript>

HTML5 Boilerplate

What to P.E.

TextImages

CSSJavaScript

alt=”Text”DefaultsNo AjaxNo Behaviors

TextImages

Flash Video Transcripts Still Images

TextImagesAudio

Video

1838 Telegraph1865 Telefax1876 Telephone1896 Radio1927 Television1930 Videophone

One Web,Mobile First

JavaScriptRequired Web

IE OnlyWebKit Only

Two WebIncl

usiv

eExclusive

LayoutsResponsive Design & Text

http://blog.andyhume.net/responsive-by-default

InteractionsKeyboard > Mouse > Touch

http://issuu.com/curtisbrenneman/docs/net208

NetMagIssue 208

Pragmatism

Who to P.E.

http

://de

velo

per.y

ahoo

.com

/yui

/art

icle

s/gb

s/

http

://jq

uery

mob

ile.c

om/g

bs/

Ok, but how does this help me?

IE6 and Blackberry 4.x still have CSS, JavaScript

support

Three Ways To Forkhttp://allyoucanleet.com/2011/02/05/the-cost-of-feature-testing/

User Agent SniffingBad.

“Mozilla”“Like Gecko”

Weak InferenceNot much better.

Feature DetectionGood.

Tool Snobbery

Warning Signs

APIs are JavaScript Only

Clientside JavaScript Templating

Mobile Component Frameworks

Good, Bad, & Ugly

Retrofit Existing Code

Requires Thought

Slightly Larger Code Base

Tool Snobbery

Thanks!

Zach Leatherman

http://zachleat.com

@zachleat