Progressive Enhancement & Mobile

The concept of progressive enhancement is the way forward for web design, especially on mobile devices. Aaron Gustafson shows you how the latest techniques—mobile first, responsive design, and adaptive UI—fit in to the process.

From my presentation at #Funka2012.

Transcript

1. PROGRESSIVE ENHANCEMENT Aaron Gustafson @aarongustafson slideshare.net/AaronGustafson &MOBILE
2. BROWSERS ARE A PAIN IN THE ASS
12. AND THEN THERE’S MOBILE
13. © Brad Frost
14. © Brad Frost
15. WHAT IS MOBILE?
16. WHAT IS MOBILE?
17. “There is no WebKit on Mobile — Peter-Paul Koch
18. WebKit vs. Acid3 http://www.quirksmode.org/webkit_mobile.html
19. Surely there’s platform consistency?!
20. “There is no Android — Stephanie Rieger
21. http://yfrog.com/z/ob5kndj
22. BUT ANDROID IS NOT UNIQUE IN THIS
23. THE CULPRITS? SCREEN SIZE
24. THE CULPRITS? EMBEDDED VIEWS
25. THE CULPRITS? BROWSER CHROME
26. THE CULPRITS? ZOOM LEVEL
27. THE CULPRITS? ZOOM LEVEL (Ok, this one’s on Android)
28. WHAT IS MOBILE?
30. “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
31. Um… I think I’ll just build an iPhone app. kthxbye.
32. NATIVE vs. WEB
33. NATIVE vs. WEB
34. © Brad Frost
35. © Brad Frost
36. WE DON’T KNOW
38. EVEN WHEN WE THINK WE KNOW, WE ARE PROBABLY WRONG
39. SO HOW DO WE COPE?
40. PROGRESSIVE ENHANCEMENT
41. TECHNOLOGICAL RESTRICTIONS
42. MCMLXXVII (that’s 1977)
46. HTML CSS
47. fault tolerance n. a system’s ability to continue to operate when it encounters and unexpected error.
51. BROWSERS IGNORE WHAT THEY DON’T UNDERSTAND
52. I like an escalator because an escalator can never break, it can only become stairs. — Mitch Hedberg
53. an electric toothbrush can never break, it can only become a toothbrush.
54. a dynamic web page can never break, it can only become a web page.
58. GRACEFUL DEGRADATION
59. MODERN BROWSERS OLDER BROWSERS
60. PROGRESSIVE ENHANCEMENT
61. CONTENT
63. ACCESSIBILITY
64. “SPECIAL NEEDS”
65. CAN BE CONTEXTUAL “SPECIAL NEEDS”
67. GRACEFUL DEGRADATION PROGRESSIVE ENHANCEMENT
68. OOOH SHINY! ,
69. PROGRESSIVE ENHANCEMENT ISN’T ABOUT BROWSERS
70. BROWSERS AND TECHNOLOGIES COME AND GO
71. DON’T LOSE SIGHT OF YOUR USERS
72. NEWER OLDER User Experience Browser Age Graceful Degradation
73. BASIC ADVANCED User Experience Browser & Device Capabilities Progressive Enhancement
74. BASIC ADVANCED User Experience Browser & Device Capabilities Content
75. BASIC ADVANCED User Experience Browser & Device Capabilities Content Semantics
76. BASIC ADVANCED User Experience Browser & Device Capabilities Content Semantics Design
77. BASIC ADVANCED User Experience Browser & Device Capabilities Content Semantics Design Interactivity
78. BASIC ADVANCED User Experience Browser & Device Capabilities Content Semantics Design Interactivity Accessibility
79. BASIC ADVANCED User Experience Browser & Device Capabilities Text & HTTP HTML CSS JavaScript ARIA
80. HTML
81. HTML HTML5 Microformats HTML4
82. EXAMPLES
84. PROGRESSIVE ENHANCEMENT & MOBILE Semantics 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&#8217;t know what">je ne sais quoi</i>.</p>
85. PROGRESSIVE ENHANCEMENT & MOBILE PE 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>
86. PROGRESSIVE ENHANCEMENT & MOBILE PE 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>
87. PROGRESSIVE ENHANCEMENT & MOBILE PE with HTML <input type="date" name="dob"/> I get it! I don’t get it :-(
88. PROGRESSIVE ENHANCEMENT & MOBILE PE 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>
92. PROGRESSIVE ENHANCEMENT & MOBILE PE 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>
93. PROGRESSIVE ENHANCEMENT & MOBILE These 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>
94. PROGRESSIVE ENHANCEMENT & MOBILE Parsing errors p { color: red; }
95. PROGRESSIVE ENHANCEMENT & MOBILE Parsing errors p { color: red; }
96. PROGRESSIVE ENHANCEMENT & MOBILE Parsing errors p { color: red; font-weight: bold; }
97. PROGRESSIVE ENHANCEMENT & MOBILE Parsing errors p { color: red; font-weight: bold; }
98. PROGRESSIVE ENHANCEMENT & MOBILE Parsing errors p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
99. PROGRESSIVE ENHANCEMENT & MOBILE Parsing errors html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
100. PROGRESSIVE ENHANCEMENT & MOBILE Parsing errors @-moz-document url-prefix() { html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); } }
101. #intro { /* Basic Layout */ } /* ... */ body[id=css-zen-garden] #intro { /* Advanced Layout */ }
102. #intro { /* Basic Layout */ } /* ... */ [foo], #intro { /* Advanced Layout */ }
103. PROGRESSIVE ENHANCEMENT & MOBILE Parsing errors @import 'not-for-IE7-or-below.css' screen; @media screen, print, refrigerator { /* IE will get these rules */ }
105. PROGRESSIVE ENHANCEMENT & MOBILE @Media blocks @media screen { /* Styles for screen media only */ }
106. PROGRESSIVE ENHANCEMENT & MOBILE @Media blocks+ @media screen and (max-width:450px) { /* Styles for screen media when browser is 450px wide or below */ }
107. PROGRESSIVE ENHANCEMENT & MOBILE Don’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 */ }
108. PROGRESSIVE ENHANCEMENT & MOBILE Mobile 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 */ }
113. PROGRESSIVE ENHANCEMENT & MOBILE Mobile First w/ media queries #hd { background: url(hd-bg-small.png) repeat-x 50% 50%; } #hd .logo a { background: url(logo-small.png) no-repeat 50% 0; display: block; width: 240px; height: 109px; /* … */ } @media screen and (min-width: 481px) { #hd { background: url(hd-bg.png) no-repeat 50% 52px; } #hd .logo a { background-image: url(logo.png); width: 342px; height: 155px; } }
114. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript
115. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript
116. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript <input class="tweet-counter" value="140" disabled="disabled">
117. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript <span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span>
118. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span> .hidden { position: absolute; left: −999em; }
119. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript <span class="tweet-counter">maximum of 140 characters</span> <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>
120. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript & ARIA <span aria-live="polite" aria-atomic="true" class="tweet-counter">140<b class="hidden"> characters remaining</b></span>
121. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript & ARIA
122. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript & ARIA
123. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript & ARIA role="application" aria-activedescendant="folder-1"
124. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript & ARIA role="tablist"
125. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript & ARIA role="tab" aria-selected="true" aria-controls="folder-1"
126. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript & ARIA role="tab" aria-selected="false" aria-controls="folder-4"
127. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript & ARIA role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab"
128. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript & ARIA
129. Text & HTTP HTML CSS JavaScript ARIA
130. Available now from easy-readers.net or me for 150 SEK
131. 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 Credits http://www. ickr.com/photos/aarongustafson/galleries/72157629846428745/