Building Adaptive Designs Now [UI17]

BUILDING ADAPTIVE DESIGNS NOW

Aaron GustafsonaarongustafsonslidesharenetAaronGustafson

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

PERCEPTION

PERCEPTION

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

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


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

ltulgt

ltvideogt


PE with HTML


ltulgt




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 hellipltpgt

ltsectiongt


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

ltnavgt

ltheadergt


These are the droids you seekltspan role=buttongtOKltspangt

ltdiv role=alertgt

ltpgtSomething went wrongltpgt

ltdivgt

ltdiv role=alertdialoggt


ltimg src=xpng alt=dismiss role=button gt

ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc

color rgba( 0 0 0 5 )


Parsing errorshtml[lang] p

color ccc



Parsing errors-moz-document url-prefix()

html[lang] p

color ccc


intro

Basic Layout

body[id=css-zen-garden] intro

Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout


Parsing errorsmedia screen print refrigerator

IE will get these rules


Media blocksmedia screen

Styles for screen media only


Media blocks+media only 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)


and (orientationlandscape)


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 only 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-countergt140ltstronggt

ltspangt


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




Complex interfaces


Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt


Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt






Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes

Split the content amp

make some tabs


On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt


Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt

lth2gtOverviewlth2gt

lt-- hellip --gt

lth2gtIngredientslth2gt

lt-- hellip --gt

lth2gtDirectionslth2gt

lt-- hellip --gt

lth2gtNutritionlth2gt

lt-- hellip --gt

ltdivgt


Adaptive widget logic

Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)



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



Text amp HTTP

HTML

CSS

JavaScript

ARIA

THANK YOUhttpreadlistscom7d414b24

Building Adaptive Designs Nowby 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



PERCEPTION

PERCEPTION



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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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



PERCEPTION

PERCEPTION



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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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



PERCEPTION

PERCEPTION



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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA














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



PERCEPTION

PERCEPTION



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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA












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



PERCEPTION

PERCEPTION



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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











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



PERCEPTION

PERCEPTION



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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











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



PERCEPTION

PERCEPTION



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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










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



PERCEPTION

PERCEPTION



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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA













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



PERCEPTION

PERCEPTION



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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA












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



PERCEPTION

PERCEPTION



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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











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



PERCEPTION

PERCEPTION



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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA













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



PERCEPTION

PERCEPTION



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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










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



PERCEPTION

PERCEPTION



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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA













accomplish a goal



43

20Planned

80

48Planned






accomplish a goal



43

20Planned

80

48Planned



PERCEPTION

PERCEPTION



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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









PERCEPTION

PERCEPTION



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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









PERCEPTION



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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA












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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA














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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA













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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA












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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA












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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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

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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










WE AREPROBABLY

WRONG

SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









SO HOW DO WE COPE




mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA












mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










mdash Mitch Hedberg

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









MODERN BROWSERS

OLDER BROWSERS

MODERN BROWSERS

OLDER BROWSERS



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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









MODERN BROWSERS

OLDER BROWSERS



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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA
















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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA














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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA













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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA












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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









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
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









HTMLHTML5

Microformats

HTML4

EXAMPLES
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









EXAMPLES
















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA
























ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA















ltulgt




ltulgt

ltvideogt


PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










PE with HTML


ltulgt




ltulgt






ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA














ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











ltfiguregt


ltfiguregt


hellip




ltsectiongt





ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA













ltolgt






ltolgt

ltnavgt

ltheadergt



ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











ltdiv role=alertgt


ltdivgt




ltdivgt


Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










Parsing errors

p

color red


Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










Parsing errors

p

color red


Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










Parsing errors

p

color red

font-weight bold


Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










Parsing errors

p

color red

font-weight bold


Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










Parsing errorsp

color ccc




color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











color ccc




html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











html[lang] p

color ccc


intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









intro

Basic Layout


Advanced Layout

intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA









intro

Basic Layout

[foo] intro

Advanced Layout





















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA





























or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA


























or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA























or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA



















or


or


or




media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











media screen








PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










PE with JavaScript


PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










PE with JavaScript



PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










PE with JavaScript




ltspangt


PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










PE with JavaScript



hidden

position absolute

left 999em


PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










PE with JavaScript












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA

















Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA












Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










Complex interfaces










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA


















Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA
















Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA














Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA












Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










Widget logic

Page


Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










Widget logic

Page

JS


Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










Widget logic

Page

JSNo


Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA










Widget logic

Page

JSNoYes


make some tabs






lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA














lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA












lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt


lt-- hellip --gt

ltdivgt



Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











Page



Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











Page

JS



Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











Page

JSNo



Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











Page

JSNoYes



Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











Page

JSNoYes

No



Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











Page

JSNo

YesYes

No


make some tabs



Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA











Page

JSNo

YesYes

No

LIVE


make some tabs

Untab (if tabbed)















Text amp HTTP

HTML

CSS

JavaScript

ARIA























Text amp HTTP

HTML

CSS

JavaScript

ARIA




















Text amp HTTP

HTML

CSS

JavaScript

ARIA


















Text amp HTTP

HTML

CSS

JavaScript

ARIA
















Text amp HTTP

HTML

CSS

JavaScript

ARIA














Text amp HTTP

HTML

CSS

JavaScript

ARIA











Text amp HTTP

HTML

CSS

JavaScript

ARIA









Text amp HTTP

HTML

CSS

JavaScript

ARIA
























Technology

Building Adaptive Designs Now [UI17]