Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 1 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 2 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 3 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 4 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 5 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 6 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 7 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 8 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 9 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 10 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 11 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 12 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 13 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 14 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 15 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 16 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 17 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 18 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 19 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 20 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 21 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 22 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 23 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 24 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 25 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 26 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 27 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 28 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 29 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 30 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 31 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 32 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 33 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 34 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 35 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 36 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 37 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 38 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 39 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 40 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 41 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 42 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 43 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 44 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 45 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 46 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 47 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 48 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 49 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 50 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 51 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 52 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 53 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 54 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 55 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 56 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 57 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 58 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 59 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 60 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 61 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 62 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 63 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 64 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 65 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 66 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 67 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 68 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 69 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 70 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 71 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 72 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 73 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 74 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 75 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 76 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 77 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 78 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 79 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 80 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 81 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 82 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 83 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 84 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 85 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 86 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 87 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 88 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 89 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 90 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 91 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 92 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 93 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 94 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 95 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 96 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 97 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 98 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 99 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 100 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 101 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 102 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 103 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 104 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 105 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 106 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 107 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 108 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 109 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 110 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 111 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 112 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 113 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 114 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 115 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 116 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 117 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 118 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 119 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 120 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 121 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 122 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 123 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 124 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 125 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 126 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 127 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 128 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 129 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 130

YouTube videos are no longer supported on SlideShare

View original on YouTube

Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 132 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 133 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 134 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 135 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 136 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 137

YouTube videos are no longer supported on SlideShare

View original on YouTube

Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 139 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 140 Progressive Enhancement & Mobile [HOW Interactive 2012] Slide 141
Upcoming SlideShare
Frontend Performance: Illusions & browser rendering
Next
Download to read offline and view in fullscreen.

113

Share

Download to read offline

Progressive Enhancement & Mobile [HOW Interactive 2012]

Download to read offline

For years, designers and developers have griped about the difficulties they encountered in supporting the numerous desktop browsers out there, but mobile is even more fragmented. Phones, tablets, media players, video game systems—each device (and in some cases each browser on each device) has its own dimensions, quirks and capabilities. It can make your brain hurt just thinking about it.

Thankfully, going mobile doesn’t have to be a painful experience. In this session, Aaron Gustafson will introduce you to the concept of progressive enhancement and demonstrate why it is the way forward for web design, especially on mobile devices. In the course of his talk, he’ll walk you through progressive enhancement’s layered approach and show you how the latest techniques—mobile first, responsive design, and adaptive UI—fit in to the process. Along the way, he’ll show you tons of examples and give you lots of great ideas you can put to use in your own projects.

Reading List: http://readlists.com/7d414b24/

Related Books

Free with a 30 day trial from Scribd

See all

Progressive Enhancement & Mobile [HOW Interactive 2012]

  1. PROGRESSIVE ENHANCEMENT & MOBILEAaron Gustafson@aarongustafsonslideshare.net/AaronGustafson
  2. BROWSERS ARE A PAIN IN THE ASS
  3. © Brad Frost
  4. © Brad Frost
  5. “ Just four years ago the majority of our visitors saw our website in Internet Explorer on a Windows computer on a minimum 1,024 pixel wide screen. Times have really changed. Jason Samuels IT Manager, National Council on Family Relations Source
  6. “ Windows users used to comprise 93.5% of our web visits. Now that percentage is 72.4%. Visitors using a Mac have more than tripled.
  7. “ The percentage visiting from a mobile device or tablet … was just 0.1% in 2008. It has since grown exponentially, 200-400% per year, to 6.2% today.
  8. “ Four years ago 75.5% of our web visitors used Internet Explorer. That number has fallen to 37%. Firefox now comprises 25.5%, Safari 19.5%, and Chrome 15.3%.
  9. “ In the second quarter of 2008 we detected 71 different screen resolutions among our visitors. In the first quarter of 2012 we detected 830
  10. LET’S TALKMOBILE
  11. FIRST OFFMOBILEIS NOT THEBEST WORD
  12. 31% 40% 21% Out of Out of home Out of home home 69% At home 60% At home 79% At home 54% of our daily Computer media interactions Smartphone Tablethttp://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html
  13. MOBILE IS NOT ISOLATED 90 % of people use multiple screens sequentiallyhttp://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html
  14. starting place for online activitiesStarted onsmartphone 65% 63% 65% 47% 59% 66% 56% Searching Browsing Shopping Planning Managing Social Watching an for Info the Internet Online a Trip Finances Networking Online Video Continued on a PC 60% 58% 61% 45% 56% 58% 48% Continued on a tablet 4% 5% 4% 3% 3% 8% 8%http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html
  15. MOBILE = OPPORTUNITYOften this is for “spur-of-the-moment” activity Often this is for “spur-of-the-moment” activity Spontaneous vs. Planned Search Search Spontaneous vs. Planned 20% 20% Planned Planned 48% 48% Planned Planned 80%80% Spontaneous Spontaneous 52% 52% Spontaneous Spontaneous 44%44% 43%43% of all spontaneous searchessearches of all spontaneous of all spontaneous of all spontaneous on smartphones were to were to on smartphones searchessearches on PCs were to on PCs were to accomplish a goal a goal accomplish accomplish a goal a goal accomplish http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html Base: Total Answering, Follow-Up Occasion (Search) –Occasion (Search)Smartphone (216); Tablet not shown due to smallshown dueQ. Wouldbase consider your use of Base: Total Answering, Follow-Up PC/Laptop (492); – PC/Laptop (492); Smartphone (216); Tablet not base size. to small you size. Q. Would you consider your use of 35
  16. WHAT IS MOBILE?
  17. WHAT IS MOBILE?
  18. “ There is no WebKit on Mobile — Peter-Paul Koch
  19. WebKit vs. Acid3http://www.quirksmode.org/webkit_mobile.html
  20. “ Surely there’s platform consistency!?! — Any sane individual
  21. “ There is no Android — Stephanie Rieger
  22. http://yfrog.com/z/ob5kndj
  23. BUT ANDROIDIS NOT UNIQUE IN THIS
  24. THE CULPRITS? SCREEN SIZE
  25. THE CULPRITS?EMBEDDED VIEWS
  26. THE CULPRITS?BROWSER CHROME
  27. THE CULPRITS? ZOOM LEVEL
  28. THE CULPRITS? ZOOM LEVEL (Ok, this one’s on Android)
  29. 6 Billion 2009 2010 2011 2009 2010 2011http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/a#subscribers
  30. OVER 80% OF THESE ARE FEATURE PHONES, NOT SMARTPHONEShttp://developinthecloud.drdobbs.com/author.asp?doc_id=253055&section_id=2280
  31. ESPECIALLY TRUE IN DEVELOPING COUNTRIES
  32. INTERNET IN KENYA MOBILE = 90%http://www.cck.go.ke/resc/downloads/SECTOR_STATISTICS_REPORT_Q4_11-12.pdf
  33. THE REALITY
  34. “The commoditization of smartphone hardware is just the beginning … of a huge new wave of cheap devices about to invade our lives—a zombie apocalypse of electronics, if you will. — Scott Jenson
  35. Um… I think I’ll justbuild an iPhone app. kthxbye.
  36. NATIVE vs. WEB
  37. NATIVE vs. WEB
  38. © Brad Frost
  39. © Brad Frost
  40. WE DON’T KNOW
  41. WE DON’T KNOW
  42. EVEN WHEN WE THINK WE KNOW, WE ARE PROBABLY WRONG
  43. SO HOW DO WE COPE?
  44. PROGRESSIVEENHANCEMENT
  45. TECHNOLOGICAL RESTRICTIONS
  46. I like an escalator becausean escalator can never break,it can only become stairs. — Mitch Hedberg
  47. GRACEFULDEGRADATION
  48. MODERNBROWSERS OLDER BROWSERS
  49. MODERNBROWSERS OLDER BROWSERS
  50. a dynamic web page cannever break, it can onlybecome a web page.
  51. PROGRESSIVEENHANCEMENT
  52. CONTENT
  53. CONTENT
  54. ACCESSIBILITY
  55. “SPECIAL NEEDS”
  56. “SPECIAL NEEDS”
  57. “SPECIAL NEEDS” CAN BE CONTEXTUAL
  58. PROGRESSIVEGRACEFUL DEGRADATION ENHANCEMENT
  59. OOOH, SHINY!
  60. PROGRESSIVEENHANCEMENT ISN’T ABOUT BROWSERS
  61. BROWSERS ANDTECHNOLOGIES COME AND GO
  62. DON’T LOSE SIGHT OF YOUR USERS
  63. ProgressiveGraceful Degradation Enhancement
  64. Responsive Web Design Progressiveon Enhancement Mobile First
  65. User Experience NEWER OLDER Browser Age Graceful Degradation
  66. User Experience BASIC ADVANCED Browser & Device Capabilities Progressive Enhancement
  67. User Experience BASIC ADVANCED Browser & Device Capabilities Content
  68. User Experience Semantics BASIC ADVANCED Browser & Device Capabilities Content
  69. User Experience Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
  70. User Experience Interactivity Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
  71. User Experience Accessibility Interactivity Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
  72. User Experience ARIA JavaScript CSS HTML BASIC ADVANCED Browser & Device Capabilities Text & HTTP
  73. HTML
  74. HTML5HTMLMicroformats HTML4
  75. EXAMPLES
  76. PROGRESSIVE ENHANCEMENT & MOBILESemantics 101 <p>HTML5 introduces several <em>really</em> useful elements and a ton of new APIs.</p> <p>Please fill out the form below. <strong>Note: all fields are required.</strong></p> <p>I like to work with markup languages because <strong>they are simple and easy to read</strong>. They also have that certain <i lang="fr" title="I don’t know what">je ne sais quoi</i>.</p>
  77. PROGRESSIVE ENHANCEMENT & MOBILEPE with HTML <video poster=”poster.png”> <source src=”video.m4v”/> <source src=”video.webm”/> <source src=”video.ogv”/> <img src=”poster.png” alt=””/> <ul> <li><a href="video.m4v">Download MP4</a></li> <li><a href="video.webm">Download WebM</a></li> <li><a href="video ogv">Download Ogg</a></li> </ul> </video>
  78. PROGRESSIVE ENHANCEMENT & MOBILEPE with HTML <img src=”poster.png” alt=””/> <ul> <li><a href="video.m4v">Download MP4</a></li> <li><a href="video.webm">Download WebM</a></li> <li><a href="video ogv">Download Ogg</a></li> </ul>
  79. PROGRESSIVE ENHANCEMENT & MOBILEPE with HTML <input type="date" name="dob"/> I get it! I don’t get it :-(
  80. PROGRESSIVE ENHANCEMENT & MOBILEPE with Microformats <section class="vcard"> <figure> <img class="photo" src="aaron-gustafson.jpg" alt=""/> </figure> <h1 class="fn">Aaron Gustafson</h1> … <p>Aaron … is <b class="role">Group Manager</b> of the <a class="org" href="http://webstandards.org">Web Standards Project (WaSP)</a> ….</p> </section>
  81. PROGRESSIVE ENHANCEMENT & MOBILEPE with HTML & ARIA <header role=”banner”> <h1><img src="i/logo.png"/></h1> <nav role=”navigation”> <ol> <li><a href="#details">Details</a></li> <li><a href="#schedule">Schedule</a></li> <li><a href="#instructors">Instructors</a></li> <li><a href="#lodging">Lodging</a></li> <li><a href="#location">Location</a></li> </ol> </nav> </header>
  82. PROGRESSIVE ENHANCEMENT & MOBILEThese are the droids you seek <span role="button">OK</span> <div role="alert"> <p>Something went wrong.</p> </div> <div role="alertdialog"> <p>Something went wrong.</p> <img src="x.png" alt="dismiss" role="button" /> </div>
  83. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors p{ color: red; }
  84. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors p{ color: red; font-weight: bold; }
  85. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
  86. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
  87. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors @-moz-document url-prefix() { html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); } }
  88. #intro { /* Basic Layout */}/* ... */body[id=css-zen-garden] #intro { /* Advanced Layout */}
  89. #intro { /* Basic Layout */}/* ... */[foo], #intro { /* Advanced Layout */}
  90. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors @import not-for-IE7-or-below.css screen; @media screen, print, refrigerator { /* IE will get these rules */ }
  91. PROGRESSIVE ENHANCEMENT & MOBILE@Media blocks @media screen { /* Styles for screen media only */ }
  92. PROGRESSIVE ENHANCEMENT & MOBILE@Media blocks+ @media screen and (max-width:450px) { /* Styles for screen media when browser is 450px wide or below */ }
  93. PROGRESSIVE ENHANCEMENT & MOBILEDon’t do this @media screen and (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), screen and (max-device-width:480px) and (orientation:landscape), screen and (min-device-width:481px) and (orientation:portrait) { /* Layout for narrower desktop (below 990px) or iPhone running iOS 3 (or equivalent) or iPhone running iOS 4 (or equivalent) in “landscape” view or iPad (or equivalent) in “portrait” view */ }
  94. PROGRESSIVE ENHANCEMENT & MOBILEMobile First w/ media queries /* Universal Layout */ @media screen { /* Styles for all screens */ } @media screen and (min-width:481px) { /* Styles for all screens 480px+ width */ } @media screen and (min-width:754px) { /* Styles for all screens 754px+ width */ }
  95. http://is.gd/lazyloading_demo
  96. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript
  97. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript <input class="tweet-counter" value="140" disabled="disabled">
  98. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript <span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span>
  99. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span> .hidden { position: absolute; left: 999em; }
  100. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript <span class="tweet-counter">maximum of 140 characters</span> <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>
  101. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA <span aria-live="polite" aria-atomic="true" class="tweet-counter">140<b class="hidden"> characters remaining</b></span>
  102. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA
  103. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA
  104. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="application" aria-activedescendant="folder-1"
  105. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="tablist"
  106. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="tab" aria-selected="true" aria-controls="folder-1"
  107. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="tab" aria-selected="false" aria-controls="folder-4"
  108. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab"
  109. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA
  110. THANK YOU!http://readlists.com/7d414b24/
  111. Progressive Enhancement & Mobile by Aaron Gustafson @AaronGustafson Further reading: http://adaptivewebdesign.info http://blog.easy-designs.net http://mobilewebbestpractices.com Slides available at http://slideshare.net/AaronGustafson This presentation is licensed under Creative Commons Attribution-Noncommercial-Share Alike 3.0 except where otherwise noted flickr Photo Creditshttp://www.flickr.com/photos/aarongustafson/galleries/72157629846428745/
  • TinaNguyen33

    Jan. 17, 2016
  • Ateneae

    Sep. 15, 2014
  • FrancescoMigliorato1

    May. 1, 2014
  • mattprice94

    Apr. 16, 2014
  • marianaespenica3

    Mar. 9, 2014
  • morimuc

    Feb. 7, 2014
  • vanleenen

    Jan. 28, 2014
  • vkarageorgos

    Jan. 16, 2014
  • edyionescu

    Jan. 11, 2014
  • KenLoh1

    Sep. 6, 2013
  • station67

    Sep. 6, 2013
  • SirDevil

    Sep. 5, 2013
  • sheenam029

    Jun. 3, 2013
  • matthiasfrie

    Apr. 28, 2013
  • vpmenon74

    Apr. 24, 2013
  • wanwenhsu

    Apr. 24, 2013
  • Rhawbert

    Apr. 15, 2013
  • chrisgriffith

    Apr. 9, 2013
  • nhoizey

    Mar. 14, 2013
  • anthanh

    Mar. 2, 2013

For years, designers and developers have griped about the difficulties they encountered in supporting the numerous desktop browsers out there, but mobile is even more fragmented. Phones, tablets, media players, video game systems—each device (and in some cases each browser on each device) has its own dimensions, quirks and capabilities. It can make your brain hurt just thinking about it. Thankfully, going mobile doesn’t have to be a painful experience. In this session, Aaron Gustafson will introduce you to the concept of progressive enhancement and demonstrate why it is the way forward for web design, especially on mobile devices. In the course of his talk, he’ll walk you through progressive enhancement’s layered approach and show you how the latest techniques—mobile first, responsive design, and adaptive UI—fit in to the process. Along the way, he’ll show you tons of examples and give you lots of great ideas you can put to use in your own projects. Reading List: http://readlists.com/7d414b24/

Views

Total views

62,829

On Slideshare

0

From embeds

0

Number of embeds

4,259

Actions

Downloads

93

Shares

0

Comments

0

Likes

113

×