Download - Building Adaptive Designs Now [UI17]
![Page 1: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/1.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Aaron GustafsonaarongustafsonslidesharenetAaronGustafson
BROWSERS ARE A PAIN IN THE ASS
copy Brad Frost
copy Brad Frost
Just four years ago the majority of our visitors saw our website in Internet Explorer on a Windows computer on a minimum 1024 pixel wide screen Times have really changedldquo
Jason SamuelsIT ManagerNational Council on Family RelationsSource
Windows users used to comprise 935 of our web visits Now that percentage is 724 Visitors using a Mac have more than tripledldquo
The percentage visiting from a mobile device or tablet hellip was just01 in 2008 It has since grown exponentially
200-400 per yearto 62 today
ldquo
Four years ago 755 of our web visitors used Internet Explorer That number has fallen to 37 Firefox now comprises 255 Safari 195 and Chrome 153ldquo
In the second quarter of 2008 we detected 71 dierent screen resolutions among our visitors In the rst quarter of 2012 we detectedldquo
830
LETrsquoS TALKMOBILE
FIRST OFFMOBILEIS NOT THEBEST WORD
httpgooglemobileadsblogspotcouk201208navigating-new-multi-screen-worldhtml
of our daily media interactions
21Out of home
79At home
40Out of home
60At home
54
31Out of home
69At home
PC use is motivated by Computer Smartphone Tablet
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
PERCEPTION
PERCEPTION
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 2: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
PERCEPTION
PERCEPTION
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 3: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
PERCEPTION
PERCEPTION
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 4: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
PERCEPTION
PERCEPTION
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 5: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
PERCEPTION
PERCEPTION
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 6: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
PERCEPTION
PERCEPTION
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 7: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
PERCEPTION
PERCEPTION
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 8: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
PERCEPTION
PERCEPTION
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 9: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
PERCEPTION
PERCEPTION
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 10: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
PERCEPTION
PERCEPTION
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 11: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
PERCEPTION
PERCEPTION
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 12: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
PERCEPTION
PERCEPTION
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 13: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
PERCEPTION
PERCEPTION
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 14: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
PERCEPTION
PERCEPTION
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 15: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
PERCEPTION
PERCEPTION
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 16: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/16.jpg)
PERCEPTION
PERCEPTION
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 17: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/17.jpg)
PERCEPTION
There is no WebKit on Mobile
mdash Peter-Paul Kochldquo
WebKit vs Acid3
httpwwwquirksmodeorgwebkit_mobilehtml
Surely therersquos platform consistency
mdash Any sane individual
ldquo
There is no Androidmdash Stephanie Riegerldquo
httpyfrogcomzob5kndj
BUT ANDROIDIS NOT UNIQUE
IN THIS
THE CULPRITSSCREEN SIZE
THE CULPRITSEMBEDDED VIEWS
THE CULPRITSBROWSER CHROME
THE CULPRITSZOOM LEVEL
THE CULPRITSZOOM LEVEL(Ok this onersquos on Android)
2009 2010 2011
6 Billion
2009 2010 2011httpmobithinkingcommobile-marketing-toolslatest-mobile-statsasubscribers
OVER 80OF THESE ARE
FEATURE PHONESNOT SMARTPHONES
httpdevelopintheclouddrdobbscomauthoraspdoc_id=253055ampsection_id=2280
ESPECIALLY TRUE IN DEVELOPING COUNTRIES
INTERNET IN KENYA MOBILE = 90
httpwwwcckgokerescdownloadsSECTOR_STATISTICS_REPORT_Q4_11-12pdf
THE REALITY
ldquoThe commoditization of smartphone hardware is just the beginning hellip of a huge new wave of cheap devices about to invade our livesmdasha zombie apocalypse of electronics if you will
mdash Scott Jenson
Umhellip I think Irsquoll just build an iPhone app
kthxbye
NATIVEvs
WEB
NATIVEvs
WEB
copy Brad Frost
copy Brad Frost
WE DONrsquoT KNOW
WE DONrsquoT KNOW
EVEN WHENWE THINKWE KNOW
WE AREPROBABLY
WRONG
SO HOW DO WE COPE
PROGRESSIVE ENHANCEMENT
TECHNOLOGICALRESTRICTIONS
I like an escalator because an escalator can never breakit can only become stairs
mdash Mitch Hedberg
GRACEFULDEGRADATION
MODERN BROWSERS
OLDER BROWSERS
MODERN BROWSERS
OLDER BROWSERS
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 18: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 19: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 20: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 21: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 22: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 23: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 24: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 25: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 26: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 27: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 28: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 29: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 30: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 31: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 32: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 33: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 34: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 35: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 36: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 37: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 38: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 39: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 40: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 41: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 42: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 43: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 44: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 45: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 46: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 47: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 48: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 49: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/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
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 50: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/50.jpg)
a dynamic web page can never break it can only become a web page
PROGRESSIVE ENHANCEMENT
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 51: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/51.jpg)
PROGRESSIVE ENHANCEMENT
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 52: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/52.jpg)
CONTENT
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 53: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/53.jpg)
ACCESSIBILITY
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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 54: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/54.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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 55: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/55.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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 56: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/56.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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 57: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/57.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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 58: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/58.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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 59: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/59.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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 60: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/60.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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 61: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/61.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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 62: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/62.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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 63: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/63.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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 64: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/64.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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 65: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/65.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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 66: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/66.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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 67: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/67.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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 68: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/68.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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 69: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/69.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
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 70: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/70.jpg)
BASIC ADVANCED
Use
r Exp
erie
nce
Browser amp Device Capabilities
Text amp HTTP
HTML
CSS
JavaScript
ARIA
HTML
HTMLHTML5
Microformats
HTML4
EXAMPLES
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 71: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/71.jpg)
HTML
HTMLHTML5
Microformats
HTML4
EXAMPLES
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 72: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/72.jpg)
HTMLHTML5
Microformats
HTML4
EXAMPLES
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 73: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/73.jpg)
EXAMPLES
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 74: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/74.jpg)
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 75: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/75.jpg)
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltvideo poster=rdquoposterpngrdquogt
ltsource src=rdquovideom4vrdquogt
ltsource src=rdquovideowebmrdquogt
ltsource src=rdquovideoogvrdquogt
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
ltvideogt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 76: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/76.jpg)
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML
ltimg src=rdquoposterpngrdquo alt=rdquordquogt
ltulgt
ltligtlta href=videom4vgtDownload MP4ltagtltligt
ltligtlta href=videowebmgtDownload WebMltagtltligt
ltligtlta href=video ogvgtDownload Oggltagtltligt
ltulgt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 77: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/77.jpg)
BUILDING ADAPTIVE DESIGNS NOW
PE with HTMLltinput type=date name=dobgt
I get it I donrsquot get it -(
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 78: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/78.jpg)
BUILDING ADAPTIVE DESIGNS NOW
PE with Microformatsltsection class=vcardgt
ltfiguregt
ltimg class=photo src=aaron-gustafsonjpg alt=gt
ltfiguregt
lth1 class=fngtAaron Gustafsonlth1gt
hellip
ltpgtAaron hellip is ltb class=rolegtGroup Managerltbgt of the
lta class=org href=httpwebstandardsorggtWeb
Standards Project (WaSP)ltagt hellipltpgt
ltsectiongt
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 79: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/79.jpg)
BUILDING ADAPTIVE DESIGNS NOW
PE with HTML amp ARIAltheader role=rdquobannerrdquogt
lth1gtltimg src=ilogopnggtlth1gt
ltnav role=rdquonavigationrdquogt
ltolgt
ltligtlta href=detailsgtDetailsltagtltligt
ltligtlta href=schedulegtScheduleltagtltligt
ltligtlta href=instructorsgtInstructorsltagtltligt
ltligtlta href=lodginggtLodgingltagtltligt
ltligtlta href=locationgtLocationltagtltligt
ltolgt
ltnavgt
ltheadergt
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 80: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/80.jpg)
BUILDING ADAPTIVE DESIGNS NOW
These are the droids you seekltspan role=buttongtOKltspangt
ltdiv role=alertgt
ltpgtSomething went wrongltpgt
ltdivgt
ltdiv role=alertdialoggt
ltpgtSomething went wrongltpgt
ltimg src=xpng alt=dismiss role=button gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 81: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/81.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 82: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/82.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 83: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/83.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 84: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/84.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Parsing errors
p
color red
font-weight bold
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 85: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/85.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsp
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 86: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/86.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorshtml[lang] p
color ccc
color rgba( 0 0 0 5 )
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 87: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/87.jpg)
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 88: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/88.jpg)
intro
Basic Layout
body[id=css-zen-garden] intro
Advanced Layout
intro
Basic Layout
[foo] intro
Advanced Layout
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 89: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/89.jpg)
intro
Basic Layout
[foo] intro
Advanced Layout
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 90: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/90.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Parsing errorsmedia screen print refrigerator
IE will get these rules
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 91: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/91.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Media blocksmedia screen
Styles for screen media only
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 92: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/92.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Media blocks+media only screen and (max-width450px)
Styles for screen media when browser
is 450px wide or below
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 93: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/93.jpg)
BUILDING ADAPTIVE DESIGNS NOW
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
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 94: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/94.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Mobile First w media queries Universal Layout
media screen
Styles for all screens
media only screen and (min-width481px)
Styles for all screens 480px+ width
media only screen and (min-width754px)
Styles for all screens 754px+ width
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 95: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/95.jpg)
httpisgdlazyloading_demo
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 96: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/96.jpg)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 97: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/97.jpg)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltinput class=tweet-counter value=140 disabled=disabledgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 98: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/98.jpg)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan id=chars_left_notice class=numericgt
ltstrong id=status-field-char-counter
class=char-countergt140ltstronggt
ltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 99: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/99.jpg)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
hidden
position absolute
left 999em
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 100: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/100.jpg)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript
ltspan class=tweet-countergtmaximum of 140 charactersltspangt
ltspan class=tweet-countergt140
ltb class=hiddengt characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 101: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/101.jpg)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
ltspan aria-live=polite aria-atomic=true
class=tweet-countergt140ltb class=hiddengt
characters remainingltbgtltspangt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 102: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/102.jpg)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 103: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/103.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Complex interfaces
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 104: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/104.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Traditional approachlth1gtPumpkin Pielth1gtltdiv class=containergt ltdiv class=sectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltdivgt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 105: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/105.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 106: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/106.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Cleaner approachlth1gtPumpkin Pielth1gtltdiv class=tabbed-interfacegt lth2gtOverviewlth2gt ltimg src=piejpg alt= gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt lth2gtIngredientslth2gt ltulgt ltligt1 (9ltabbr title=inchgtinltabbrgt) unbaked deep dish pie crustltligt ltligt cup white sugarltligt lt-- --gt ltulgt lth2gtDirectionslth2gt lt-- --gtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 107: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/107.jpg)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 108: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/108.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 109: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/109.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 110: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/110.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 111: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/111.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Widget logic
Page
JSNoYes
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 112: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/112.jpg)
BUILDING ADAPTIVE DESIGNS NOW
On DOM readylth1gtPumpkin Pielth1gtltdiv class=tabbed-interface TabInterface-enabledgt ltsectiongt lth2gtOverviewlth2gt ltimg src=piejpg alt=gt ltpgtWhether youre hosting a festive party or a casual get-together with friends our Pumpkin Pie will make entertaining easyltpgt lt-- --gt ltsectiongt lt-- --gt ltul class=tabsgt ltligtlta href=gtOverviewltagtltligt ltligtlta href=gtIngredientsltagtltligt ltligtlta href=gtDirectionsltagtltligt ltligtlta href=gtNutritionltagtltligt ltulgtltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 113: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/113.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Adaptive UIltdiv class=tabbed-interface data-tab-threshold=800gt
lth2gtOverviewlth2gt
lt-- hellip --gt
lth2gtIngredientslth2gt
lt-- hellip --gt
lth2gtDirectionslth2gt
lt-- hellip --gt
lth2gtNutritionlth2gt
lt-- hellip --gt
ltdivgt
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 114: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/114.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 115: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/115.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JS
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 116: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/116.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 117: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/117.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 118: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/118.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNoYes
No
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 119: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/119.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
Split the content amp
make some tabs
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 120: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/120.jpg)
BUILDING ADAPTIVE DESIGNS NOW
Adaptive widget logic
Page
JSNo
YesYes
No
LIVE
Split the content amp
make some tabs
Untab (if tabbed)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 121: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/121.jpg)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=applicationaria-activedescendant=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 122: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/122.jpg)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tablist
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 123: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/123.jpg)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=truearia-controls=folder-1
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 124: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/124.jpg)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIArole=tabaria-selected=falsearia-controls=folder-4
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 125: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/125.jpg)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
role=tabpanelaria-hidden=falsearia-labelledby=folder-1-tab
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 126: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/126.jpg)
BUILDING ADAPTIVE DESIGNS NOW
PE with JavaScript amp ARIA
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 127: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/127.jpg)
Text amp HTTP
HTML
CSS
JavaScript
ARIA
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 128: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/128.jpg)
THANK YOUhttpreadlistscom7d414b24
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745
![Page 129: Building Adaptive Designs Now [UI17]](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c70c5b4a79593f288b4653/html5/thumbnails/129.jpg)
Building Adaptive Designs Nowby Aaron GustafsonAaronGustafson
Further readinghttpadaptivewebdesigninfo
httpblogeasy-designsnethttpmobilewebbestpracticescom
Slides available athttpslidesharenetAaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 30except where otherwise noted
flickr Photo Creditshttpwwwickrcomphotosaarongustafsongalleries72157629846428745