Progressive Enhancement & Mobile [Funka 2012]

PROGRESSIVEENHANCEMENT

Aaron GustafsonaarongustafsonslidesharenetAaronGustafson

ampMOBILE

BROWSERS ARE A PAIN IN THE ASS

AND THEN THERErsquoSMOBILE

copy Brad Frost

copy Brad Frost

WHAT IS MOBILE

WHAT IS MOBILE

ldquoThere is no WebKit on Mobile

mdash Peter-Paul Koch

WebKit vs Acid3

httpwwwquirksmodeorgwebkit_mobilehtml

Surely therersquos platform

consistency

ldquoThere is no Androidmdash Stephanie Rieger

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)

WHAT IS MOBILE

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

EVEN WHENWE THINKWE KNOW

WE AREPROBABLY

WRONG

SO HOW DO WE COPE

PROGRESSIVE ENHANCEMENT

TECHNOLOGICALRESTRICTIONS

MCMLXXVII(thatrsquos 1977)

HTML CSS

fault tolerancen a systemrsquos ability to continue to operate when it encounters and unexpected error

BROWSERS IGNORE WHAT

THEY DONrsquoT UNDERSTAND

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

mdash Mitch Hedberg

an electric toothbrush can never break it can only become a toothbrush

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

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


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

NEWER OLDER

Use

r Exp

erie

nce

Browser Age

Graceful Degradation

BASIC ADVANCED

Use

r Exp

erie

nce

Browser amp Device Capabilities

Progressive Enhancement

BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES

PROGRESSIVE ENHANCEMENT amp MOBILE

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

ltpgtPlease fill out the form below ltstronggtNote all fields are requiredltstronggtltpgt

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


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


PE with HTML

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


PE with HTMLltinput type=date name=dobgt

I get it I donrsquot get it -(


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


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


These are the droids you seekltspan role=buttongtOKltspangt

ltdiv role=alertgt ltpgtSomething went wrongltpgtltdivgt

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


Parsing errors

p color red


Parsing errors

p color red


Parsing errors

p color red font-weight bold


Parsing errors



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


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


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

intro Basic Layout

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

intro Basic Layout

[foo] intro Advanced Layout


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

media screen print refrigerator IE will get these rules


Media blocksmedia screen Styles for screen media only


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


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


Mobile First w media queries Universal Layout

media screen Styles for all screens

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



Mobile First w media querieshd background url(hd-bg-smallpng) repeat-x 50 50hd logo a background url(logo-smallpng) no-repeat 50 0 display block width 240px height 109px hellip media screen and (min-width 481px) hd background url(hd-bgpng) no-repeat 50 52px hd logo a background-image url(logopng) width 342px height 155px


PE with JavaScript


PE with JavaScript


PE with JavaScript

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


PE with JavaScript

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


PE with JavaScript

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

hidden position absolute left minus999em


PE with JavaScript

ltspan class=tweet-countergtmaximum of 140 charactersltspangt



PE with JavaScript amp ARIA

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







role=applicationaria-activedescendant=folder-1


PE with JavaScript amp ARIArole=tablist


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


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



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



Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK

Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson

Further readinghttpadaptivewebdesigninfo

httpblogeasy-designsnethttpmobilewebbestpracticescom

Slides available athttpslidesharenetAaronGustafson

This presentation is licensed underCreative Commons

Attribution-Noncommercial-Share Alike 30except where otherwise noted

flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745

BROWSERS ARE A PAIN IN THE ASS


copy Brad Frost

copy Brad Frost

WHAT IS MOBILE

WHAT IS MOBILE



WebKit vs Acid3



consistency




IN THIS






WHAT IS MOBILE


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




HTML CSS





mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK









copy Brad Frost

copy Brad Frost

WHAT IS MOBILE

WHAT IS MOBILE



WebKit vs Acid3



consistency




IN THIS






WHAT IS MOBILE


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




HTML CSS





mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








copy Brad Frost

WHAT IS MOBILE

WHAT IS MOBILE



WebKit vs Acid3



consistency




IN THIS






WHAT IS MOBILE


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




HTML CSS





mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








WHAT IS MOBILE

WHAT IS MOBILE



WebKit vs Acid3



consistency




IN THIS






WHAT IS MOBILE


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




HTML CSS





mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








WHAT IS MOBILE



WebKit vs Acid3



consistency




IN THIS






WHAT IS MOBILE


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




HTML CSS





mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK










WebKit vs Acid3



consistency




IN THIS






WHAT IS MOBILE


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




HTML CSS





mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK









consistency




IN THIS






WHAT IS MOBILE


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




HTML CSS





mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK











IN THIS






WHAT IS MOBILE


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




HTML CSS





mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK













WHAT IS MOBILE


mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




HTML CSS





mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK









mdash Scott Jenson


kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




HTML CSS





mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK









kthxbye

NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




HTML CSS





mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








NATIVEvs

WEB

NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




HTML CSS





mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








NATIVEvs

WEB

copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




HTML CSS





mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








copy Brad Frost

copy Brad Frost

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




HTML CSS





mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








copy Brad Frost

WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




HTML CSS





mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








WE DONrsquoT KNOW


WE AREPROBABLY

WRONG

SO HOW DO WE COPE




HTML CSS





mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK









WE AREPROBABLY

WRONG

SO HOW DO WE COPE




HTML CSS





mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








SO HOW DO WE COPE




HTML CSS





mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK











HTML CSS





mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK












mdash Mitch Hedberg



GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK










GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








MODERN BROWSERS

OLDER BROWSERS


CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK









CONTENT

ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








ACCESSIBILITY


CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK









CAN BECONTEXTUAL



OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK









OOOH SHINY





NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK












NEWER OLDER

Use

r Exp

erie

nce

Browser Age


BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








BASIC ADVANCED

Use

r Exp

erie

nce



BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








BASIC ADVANCED

Use

r Exp

erie

nce


Text amp HTTP

HTML

CSS

JavaScript

ARIA

HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








HTML

HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








HTMLHTML5

Microformats

HTML4

EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








EXAMPLES








PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK















PE with HTML














Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK




















Parsing errors

p color red


Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK









Parsing errors

p color red


Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK









Parsing errors



Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK









Parsing errors








intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK














intro Basic Layout


intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








intro Basic Layout



















PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK

























PE with JavaScript


PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK









PE with JavaScript


PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK









PE with JavaScript



PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK









PE with JavaScript



PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK









PE with JavaScript




PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK









PE with JavaScript
























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK





























Text amp HTTP

HTML

CSS

JavaScript

ARIA

Availablenowfrom

easy-readersnet

or me for150 SEK








Availablenowfrom

easy-readersnet

or me for150 SEK








Progressive Enhancement & Mobile [Funka 2012]

Technology

Transcript of Progressive Enhancement & Mobile [Funka 2012]