Progressive Enhancement & Mobile [HOW Interactive 2012]

PROGRESSIVEENHANCEMENT

Aaron GustafsonaarongustafsonslidesharenetAaronGustafson

ampMOBILE

BROWSERS ARE A PAIN IN THE ASS

copy Brad Frost

copy Brad Frost

Just four years ago the majority of our visitors saw our website in Internet Explorer on a Windows computer on a minimum 1024 pixel wide screen Times have really changedldquo

Jason SamuelsIT ManagerNational Council on Family RelationsSource

Windows users used to comprise 935 of our web visits Now that percentage is 724 Visitors using a Mac have more than tripledldquo

The percentage visiting from a mobile device or tablet hellip was just01 in 2008 It has since grown exponentially

200-400 per yearto 62 today

ldquo

Four years ago 755 of our web visitors used Internet Explorer That number has fallen to 37 Firefox now comprises 255 Safari 195 and Chrome 153ldquo

In the second quarter of 2008 we detected 71 dierent screen resolutions among our visitors In the rst quarter of 2012 we detectedldquo

830

LETrsquoS TALKMOBILE

FIRST OFFMOBILEIS NOT THEBEST WORD

httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml

of our daily media interactions

21Out of home

79At home

40Out of home

60At home

54

31Out of home

69At home

PC use is motivated by Computer Smartphone Tablet


90 of people use multiple screens sequentially

MOBILE IS NOTISOLATED


60

4

45

3

58

5

56

3

61

4

58

8

48

8

Continued on a PC

Continued on a tablet

Planning a Trip

Managing Finances

Social Networking

Searching for Info

Browsing the Internet

Watching an Online Video

ShoppingOnline

starting place for online activities

65 4763 5965 66 56Started on smartphone

httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtmlBase Total Answering Follow-Up Occasion (Search) ndash PCLaptop (492) Smartphone (216) Tablet not shown due to small base size Q Would you consider your use of Dgt(9Ζamp(WREHSODQQHGRUVSXURIWKHPRPHQWVSRQWDQHRXVDVH6SRQWDQHRXVVHDUFKHV6PDUWSKRQH3ampKLFKRIWKHVHEHVWGHVFULEHVWKLVDFWLYLW 35

Often this is for ldquospur-of-the-momentrdquo activity Spontaneous vs Planned Search

6PDUWSKRQH 3ampDSWRS

of all spontaneous searches on smartphones were to

accomplish a goal

44of all spontaneous

searches on PCs were to accomplish a goal

43

20Planned

80

48Planned

52SpontaneousSpontaneous

Base Total Answering Follow-Up Occasion (Search) ndash PCLaptop (492) Smartphone (216) Tablet not shown due to small base size Q Would you consider your use of Dgt(9Ζamp(WREHSODQQHGRUVSXURIWKHPRPHQWVSRQWDQHRXVDVH6SRQWDQHRXVVHDUFKHV6PDUWSKRQH3ampKLFKRIWKHVHEHVWGHVFULEHVWKLVDFWLYLW 35




accomplish a goal



43

20Planned

80

48Planned


MOBILE = OPPORTUNITY

WHAT IS MOBILE

WHAT IS MOBILE

There is no WebKit on Mobile

mdash Peter-Paul Kochldquo

WebKit vs Acid3

httpwwwquirksmodeorgwebkit_mobilehtml

Surely therersquos platform consistency

mdash Any sane individual

ldquo

There is no Androidmdash Stephanie Riegerldquo

httpyfrogcomzob5kndj

BUT ANDROIDIS NOT UNIQUE

IN THIS

THE CULPRITSSCREEN SIZE

THE CULPRITSEMBEDDED VIEWS

THE CULPRITSBROWSER CHROME

THE CULPRITSZOOM LEVEL

THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)

2009 2010 2011

6 Billion

2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers

OVER 80OF THESE ARE

FEATURE PHONESNOT SMARTPHONES

httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280

ESPECIALLY TRUE IN DEVELOPING COUNTRIES

INTERNET IN KENYA MOBILE = 90

httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf

THE REALITY

ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will

mdash Scott Jenson

Umhellip I think Irsquoll just build an iPhone app

kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW

EVEN WHENWE THINKWE KNOW

WE AREPROBABLY

WRONG

SO HOW DO WE COPE

PROGRESSIVE ENHANCEMENT

TECHNOLOGICALRESTRICTIONS

I like an escalator because an escalator can never breakit can only become stairs

mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS

a dynamic web page can never break it can only become a web page


CONTENT

CONTENT

ACCESSIBILITY

ldquoSPECIAL NEEDSrdquo


CAN BECONTEXTUAL


GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT

OOOH SHINY


ISNrsquoT ABOUT BROWSERS

BROWSERS AND TECHNOLOGIES COME AND GO

DONrsquoT LOSE SIGHT OF YOUR USERS

Graceful Degradation ProgressiveEnhancement


ResponsiveWeb Design

MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age

Graceful Degradation

BASIC ADVANCED

Use

r Exp

erie

nce

Browser amp Device Capabilities

Progressive Enhancement

BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES

PROGRESSIVE ENHANCEMENT amp MOBILE

Semantics 101ltpgtHTML5 introduces several ltemgtreallyltemgt useful elements and a ton of new APIsltpgt

ltpgtPlease fill out the form below ltstronggtNote all fields are requiredltstronggtltpgt

ltpgtI like to work with markup languages because ltstronggtthey are simple and easy to readltstronggt They also have that certain lti lang=fr title=I donamp8217t know whatgtje ne sais quoiltigtltpgt


PE with HTMLltvideo poster=rdquoposterpngrdquogt ltsource src=rdquovideom4vrdquogt ltsource src=rdquovideowebmrdquogt ltsource src=rdquovideoogvrdquogt ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgtltvideogt


PE with HTML

ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt


PE with HTMLltinput type=date name=dobgt

I get it I donrsquot get it -(


PE with Microformatsltsection class=vcardgt ltfiguregt ltimg class=photo src=aaron-gustafsonjpg alt=gt ltfiguregt lth1 class=fngtAaron Gustafsonlth1gt hellip ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the lta class=org href=httpwebstandardsorggtWeb Standards Project (WaSP)ltagt hellipltpgtltsectiongt


PE with HTML amp ARIAltheader role=rdquobannerrdquogt lth1gtltimg src=ilogopnggtlth1gt ltnav role=rdquonavigationrdquogt ltolgt ltligtlta href=detailsgtDetailsltagtltligt ltligtlta href=schedulegtScheduleltagtltligt ltligtlta href=instructorsgtInstructorsltagtltligt ltligtlta href=lodginggtLodgingltagtltligt ltligtlta href=locationgtLocationltagtltligt ltolgt ltnavgtltheadergt


These are the droids you seekltspan role=buttongtOKltspangt

ltdiv role=alertgt ltpgtSomething went wrongltpgtltdivgt

ltdiv role=alertdialoggt ltpgtSomething went wrongltpgt ltimg src=xpng alt=dismiss role=button gtltdivgt


Parsing errors

p color red


Parsing errors

p color red font-weight bold


Parsing errorsp color ccc color rgba( 0 0 0 5 )


Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )


Parsing errors-moz-document url-prefix() html[lang] p color ccc color rgba( 0 0 0 5 )

intro Basic Layout

body[id=css-zen-garden] intro Advanced Layout

intro Basic Layout

[foo] intro Advanced Layout


Parsing errorsimport not-for-IE7-or-belowcss screen

media screen print refrigerator IE will get these rules


Media blocksmedia screen Styles for screen media only


Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below


Donrsquot do thismedia screen and (min-device-width1024px) and (max-width989px) screen and (max-device-width480px) screen and (max-device-width480px) and (orientationlandscape) screen and (min-device-width481px) and (orientationportrait) Layout for narrower desktop (below 990px) or iPhone running iOS 3 (or equivalent) or iPhone running iOS 4 (or equivalent) in ldquolandscaperdquo view or iPad (or equivalent) in ldquoportraitrdquo view


Mobile First w media queries Universal Layout

media screen Styles for all screens

media screen and (min-width481px) Styles for all screens 480px+ width


httpisgdlazyloading_demo


PE with JavaScript


PE with JavaScript

ltinput class=tweet-counter value=140 disabled=disabledgt


PE with JavaScript

ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt


PE with JavaScript

ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt

hidden position absolute left 999em


PE with JavaScript

ltspan class=tweet-countergtmaximum of 140 charactersltspangt



PE with JavaScript amp ARIA

ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt







role=applicationaria-activedescendant=folder-1


PE with JavaScript amp ARIArole=tablist


PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1


PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4



role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab



THANK YOUhttpreadlistscom7d414b24

Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson

Further readinghttpadaptivewebdesigninfo

httpblogeasy-designsnethttpmobilewebbestpracticescom

Slides available athttpslidesharenetAaronGustafson

This presentation is licensed underCreative Commons

Attribution-Noncommercial-Share Alike 30except where otherwise noted

flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745

BROWSERS ARE A PAIN IN THE ASS

copy Brad Frost

copy Brad Frost






ldquo



830





21Out of home

79At home

40Out of home

60At home

54

31Out of home

69At home






60

4

45

3

58

5

56

3

61

4

58

8

48

8

Continued on a PC


Planning a Trip

Managing Finances

Social Networking

Searching for Info



ShoppingOnline







accomplish a goal



43

20Planned

80

48Planned






accomplish a goal



43

20Planned

80

48Planned



WHAT IS MOBILE

WHAT IS MOBILE



WebKit vs Acid3




ldquo




IN THIS






2009 2010 2011

6 Billion


OVER 80OF THESE ARE






THE REALITY


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































copy Brad Frost

copy Brad Frost






ldquo



830





21Out of home

79At home

40Out of home

60At home

54

31Out of home

69At home






60

4

45

3

58

5

56

3

61

4

58

8

48

8

Continued on a PC


Planning a Trip

Managing Finances

Social Networking

Searching for Info



ShoppingOnline







accomplish a goal



43

20Planned

80

48Planned






accomplish a goal



43

20Planned

80

48Planned



WHAT IS MOBILE

WHAT IS MOBILE



WebKit vs Acid3




ldquo




IN THIS






2009 2010 2011

6 Billion


OVER 80OF THESE ARE






THE REALITY


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































copy Brad Frost






ldquo



830





21Out of home

79At home

40Out of home

60At home

54

31Out of home

69At home






60

4

45

3

58

5

56

3

61

4

58

8

48

8

Continued on a PC


Planning a Trip

Managing Finances

Social Networking

Searching for Info



ShoppingOnline







accomplish a goal



43

20Planned

80

48Planned






accomplish a goal



43

20Planned

80

48Planned



WHAT IS MOBILE

WHAT IS MOBILE



WebKit vs Acid3




ldquo




IN THIS






2009 2010 2011

6 Billion


OVER 80OF THESE ARE






THE REALITY


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript





































ldquo



830





21Out of home

79At home

40Out of home

60At home

54

31Out of home

69At home






60

4

45

3

58

5

56

3

61

4

58

8

48

8

Continued on a PC


Planning a Trip

Managing Finances

Social Networking

Searching for Info



ShoppingOnline







accomplish a goal



43

20Planned

80

48Planned






accomplish a goal



43

20Planned

80

48Planned



WHAT IS MOBILE

WHAT IS MOBILE



WebKit vs Acid3




ldquo




IN THIS






2009 2010 2011

6 Billion


OVER 80OF THESE ARE






THE REALITY


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript


































830





21Out of home

79At home

40Out of home

60At home

54

31Out of home

69At home






60

4

45

3

58

5

56

3

61

4

58

8

48

8

Continued on a PC


Planning a Trip

Managing Finances

Social Networking

Searching for Info



ShoppingOnline







accomplish a goal



43

20Planned

80

48Planned






accomplish a goal



43

20Planned

80

48Planned



WHAT IS MOBILE

WHAT IS MOBILE



WebKit vs Acid3




ldquo




IN THIS






2009 2010 2011

6 Billion


OVER 80OF THESE ARE






THE REALITY


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript




































21Out of home

79At home

40Out of home

60At home

54

31Out of home

69At home






60

4

45

3

58

5

56

3

61

4

58

8

48

8

Continued on a PC


Planning a Trip

Managing Finances

Social Networking

Searching for Info



ShoppingOnline







accomplish a goal



43

20Planned

80

48Planned






accomplish a goal



43

20Planned

80

48Planned



WHAT IS MOBILE

WHAT IS MOBILE



WebKit vs Acid3




ldquo




IN THIS






2009 2010 2011

6 Billion


OVER 80OF THESE ARE






THE REALITY


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript




































60

4

45

3

58

5

56

3

61

4

58

8

48

8

Continued on a PC


Planning a Trip

Managing Finances

Social Networking

Searching for Info



ShoppingOnline







accomplish a goal



43

20Planned

80

48Planned






accomplish a goal



43

20Planned

80

48Planned



WHAT IS MOBILE

WHAT IS MOBILE



WebKit vs Acid3




ldquo




IN THIS






2009 2010 2011

6 Billion


OVER 80OF THESE ARE






THE REALITY


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript




































accomplish a goal



43

20Planned

80

48Planned






accomplish a goal



43

20Planned

80

48Planned



WHAT IS MOBILE

WHAT IS MOBILE



WebKit vs Acid3




ldquo




IN THIS






2009 2010 2011

6 Billion


OVER 80OF THESE ARE






THE REALITY


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































WHAT IS MOBILE

WHAT IS MOBILE



WebKit vs Acid3




ldquo




IN THIS






2009 2010 2011

6 Billion


OVER 80OF THESE ARE






THE REALITY


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































WHAT IS MOBILE



WebKit vs Acid3




ldquo




IN THIS






2009 2010 2011

6 Billion


OVER 80OF THESE ARE






THE REALITY


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript


































WebKit vs Acid3




ldquo




IN THIS






2009 2010 2011

6 Billion


OVER 80OF THESE ARE






THE REALITY


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript


































ldquo




IN THIS






2009 2010 2011

6 Billion


OVER 80OF THESE ARE






THE REALITY


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript



































IN THIS






2009 2010 2011

6 Billion


OVER 80OF THESE ARE






THE REALITY


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript





































2009 2010 2011

6 Billion


OVER 80OF THESE ARE






THE REALITY


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































OVER 80OF THESE ARE






THE REALITY


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript



































THE REALITY


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript

































mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript

































kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































copy Brad Frost

WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































WE DONrsquoT KNOW

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript

































WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript



































mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































MODERN BROWSERS

OLDER BROWSERS



CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript


































CONTENT

CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































CONTENT

ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































ACCESSIBILITY



CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript


































CAN BECONTEXTUAL



OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript

































OOOH SHINY








MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript







































MobileFirst

NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript







































PE with HTML














Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript












































Parsing errors

p color red


Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript

































Parsing errors








intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript






































intro Basic Layout


intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
































intro Basic Layout


















PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
















































PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript

































PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript

































PE with JavaScript



PE with JavaScript




PE with JavaScript

































PE with JavaScript




PE with JavaScript

































PE with JavaScript
































Progressive Enhancement & Mobile [HOW Interactive 2012]

Technology

Transcript of Progressive Enhancement & Mobile [HOW Interactive 2012]