progressive enhancement & mobile [how interactive 2012]
DESCRIPTION
For years, designers and developers have griped about the difficulties they encountered in supporting the numerous desktop browsers out there, but mobile is even more fragmented. Phones, tablets, media players, video game systems—each device (and in some cases each browser on each device) has its own dimensions, quirks and capabilities. It can make your brain hurt just thinking about it. Thankfully, going mobile doesn’t have to be a painful experience. In this session, Aaron Gustafson will introduce you to the concept of progressive enhancement and demonstrate why it is the way forward for web design, especially on mobile devices. In the course of his talk, he’ll walk you through progressive enhancement’s layered approach and show you how the latest techniques—mobile first, responsive design, and adaptive UI—fit in to the process. Along the way, he’ll show you tons of examples and give you lots of great ideas you can put to use in your own projects. Reading List: http://readlists.com/7d414b24/TRANSCRIPT
![Page 1: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/1.jpg)
PROGRESSIVEENHANCEMENT
Aaron GustafsonaarongustafsonslidesharenetAaronGustafson
ampMOBILE
BROWSERS ARE A PAIN IN THE ASS
copy Brad Frost
copy Brad Frost
Just four years ago the majority of our visitors saw our website in Internet Explorer on a Windows computer on a minimum 1024 pixel wide screen Times have really changedldquo
Jason SamuelsIT ManagerNational Council on Family RelationsSource
Windows users used to comprise 935 of our web visits Now that percentage is 724 Visitors using a Mac have more than tripledldquo
The percentage visiting from a mobile device or tablet hellip was just01 in 2008 It has since grown exponentially
200-400 per yearto 62 today
ldquo
Four years ago 755 of our web visitors used Internet Explorer That number has fallen to 37 Firefox now comprises 255 Safari 195 and Chrome 153ldquo
In the second quarter of 2008 we detected 71 dierent screen resolutions among our visitors In the rst quarter of 2012 we detectedldquo
830
LETrsquoS TALKMOBILE
FIRST OFFMOBILEIS NOT THEBEST WORD
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
of our daily media interactions
21Out of home
79At home
40Out of home
60At home
54
31Out of home
69At home
PC use is motivated by Computer Smartphone Tablet
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
90 of people use multiple screens sequentially
MOBILE IS NOTISOLATED
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
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
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
MOBILE = OPPORTUNITY
WHAT IS MOBILE
WHAT IS MOBILE
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 2: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/2.jpg)
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
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
90 of people use multiple screens sequentially
MOBILE IS NOTISOLATED
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
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
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
MOBILE = OPPORTUNITY
WHAT IS MOBILE
WHAT IS MOBILE
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 3: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/3.jpg)
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
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
90 of people use multiple screens sequentially
MOBILE IS NOTISOLATED
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
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
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
MOBILE = OPPORTUNITY
WHAT IS MOBILE
WHAT IS MOBILE
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 4: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/4.jpg)
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
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
90 of people use multiple screens sequentially
MOBILE IS NOTISOLATED
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
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
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
MOBILE = OPPORTUNITY
WHAT IS MOBILE
WHAT IS MOBILE
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 5: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/5.jpg)
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
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
90 of people use multiple screens sequentially
MOBILE IS NOTISOLATED
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
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
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
MOBILE = OPPORTUNITY
WHAT IS MOBILE
WHAT IS MOBILE
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 6: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/6.jpg)
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
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
90 of people use multiple screens sequentially
MOBILE IS NOTISOLATED
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
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
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
MOBILE = OPPORTUNITY
WHAT IS MOBILE
WHAT IS MOBILE
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 7: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/7.jpg)
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
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
90 of people use multiple screens sequentially
MOBILE IS NOTISOLATED
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
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
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
MOBILE = OPPORTUNITY
WHAT IS MOBILE
WHAT IS MOBILE
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 8: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/8.jpg)
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
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
90 of people use multiple screens sequentially
MOBILE IS NOTISOLATED
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
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
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
MOBILE = OPPORTUNITY
WHAT IS MOBILE
WHAT IS MOBILE
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 9: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/9.jpg)
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
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
90 of people use multiple screens sequentially
MOBILE IS NOTISOLATED
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
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
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
MOBILE = OPPORTUNITY
WHAT IS MOBILE
WHAT IS MOBILE
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 10: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/10.jpg)
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
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
90 of people use multiple screens sequentially
MOBILE IS NOTISOLATED
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
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
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
MOBILE = OPPORTUNITY
WHAT IS MOBILE
WHAT IS MOBILE
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 11: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/11.jpg)
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
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
90 of people use multiple screens sequentially
MOBILE IS NOTISOLATED
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
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
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
MOBILE = OPPORTUNITY
WHAT IS MOBILE
WHAT IS MOBILE
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 12: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/12.jpg)
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
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
90 of people use multiple screens sequentially
MOBILE IS NOTISOLATED
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
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
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
MOBILE = OPPORTUNITY
WHAT IS MOBILE
WHAT IS MOBILE
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 13: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/13.jpg)
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
90 of people use multiple screens sequentially
MOBILE IS NOTISOLATED
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
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
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
MOBILE = OPPORTUNITY
WHAT IS MOBILE
WHAT IS MOBILE
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 14: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/14.jpg)
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
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
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
MOBILE = OPPORTUNITY
WHAT IS MOBILE
WHAT IS MOBILE
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 15: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/15.jpg)
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
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
MOBILE = OPPORTUNITY
WHAT IS MOBILE
WHAT IS MOBILE
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 16: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/16.jpg)
WHAT IS MOBILE
WHAT IS MOBILE
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 17: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/17.jpg)
WHAT IS MOBILE
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 18: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/18.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 19: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/19.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 20: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/20.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 21: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/21.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 22: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/22.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 23: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/23.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 24: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/24.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 25: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/25.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 26: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/26.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 27: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/27.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 28: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/28.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 29: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/29.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 30: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/30.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 31: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/31.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 32: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/32.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 33: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/33.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 34: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/34.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 35: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/35.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 36: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/36.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 37: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/37.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 38: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/38.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 39: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/39.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 40: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/40.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 41: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/41.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 42: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/42.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 43: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/43.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 44: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/44.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 45: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/45.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 46: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/46.jpg)
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
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 47: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/47.jpg)
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 48: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/48.jpg)
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 49: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/49.jpg)
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 50: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/50.jpg)
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 51: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/51.jpg)
PROGRESSIVE ENHANCEMENT
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 52: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/52.jpg)
CONTENT
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 53: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/53.jpg)
CONTENT
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 54: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/54.jpg)
ACCESSIBILITY
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 55: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/55.jpg)
ldquoSPECIAL NEEDSrdquo
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 56: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/56.jpg)
ldquoSPECIAL NEEDSrdquo
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 57: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/57.jpg)
CAN BECONTEXTUAL
ldquoSPECIAL NEEDSrdquo
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 58: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/58.jpg)
GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 59: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/59.jpg)
OOOH SHINY
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 60: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/60.jpg)
PROGRESSIVE ENHANCEMENT
ISNrsquoT ABOUT BROWSERS
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 61: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/61.jpg)
BROWSERS AND TECHNOLOGIES COME AND GO
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 62: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/62.jpg)
DONrsquoT LOSE SIGHT OF YOUR USERS
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 63: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/63.jpg)
Graceful Degradation ProgressiveEnhancement
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 64: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/64.jpg)
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 65: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/65.jpg)
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
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 66: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/66.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Progressive Enhancement
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 67: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/67.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 68: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/68.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 69: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/69.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 70: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/70.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 71: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/71.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 72: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/72.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 73: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/73.jpg)
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 74: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/74.jpg)
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 75: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/75.jpg)
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 76: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/76.jpg)
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 77: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/77.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 78: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/78.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt ltulgt ltligtlta href=videom4vgtDownload MP4ltagtltligt ltligtlta href=videowebmgtDownload WebMltagtltligt ltligtlta href=video ogvgtDownload Oggltagtltligt ltulgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 79: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/79.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 80: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/80.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 81: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/81.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 82: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/82.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 83: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/83.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 84: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/84.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errors
p color red font-weight bold
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 85: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/85.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsp color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 86: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/86.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorshtml[lang] p color ccc color rgba( 0 0 0 5 )
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 87: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/87.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 88: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/88.jpg)
intro Basic Layout
body[id=css-zen-garden] intro Advanced Layout
intro Basic Layout
[foo] intro Advanced Layout
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 89: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/89.jpg)
intro Basic Layout
[foo] intro Advanced Layout
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 90: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/90.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
Parsing errorsimport not-for-IE7-or-belowcss screen
media screen print refrigerator IE will get these rules
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 91: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/91.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocksmedia screen Styles for screen media only
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 92: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/92.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
Media blocks+media screen and (max-width450px) Styles for screen media when browser is 450px wide or below
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 93: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/93.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
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
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 94: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/94.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
Mobile First w media queries Universal Layout
media screen Styles for all screens
media screen and (min-width481px) Styles for all screens 480px+ width
media screen and (min-width754px) Styles for all screens 754px+ width
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 95: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/95.jpg)
httpisgdlazyloading_demo
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 96: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/96.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 97: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/97.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 98: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/98.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan id=chars_left_notice class=numericgt ltstrong id=status-field-char-counter class=char-countergt140ltstronggtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 99: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/99.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
hidden position absolute left 999em
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 100: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/100.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140 ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 101: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/101.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true class=tweet-countergt140ltb class=hiddengt characters remainingltbgtltspangt
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 102: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/102.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 103: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/103.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 104: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/104.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 105: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/105.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tablist
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 106: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/106.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 107: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/107.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 108: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/108.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 109: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/109.jpg)
PROGRESSIVE ENHANCEMENT amp MOBILE
PE with JavaScript amp ARIA
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 110: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/110.jpg)
THANK YOUhttpreadlistscom7d414b24
Progressive Enhancementamp Mobileby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 111: Progressive Enhancement & Mobile [HOW Interactive 2012]](https://reader034.vdocuments.us/reader034/viewer/2022051512/540e1a198d7f72767e8b4c37/html5/thumbnails/111.jpg)
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