Building Adaptive Web Designs Now

It seems like new browsers and devices are invented every day. This reality leaves us with a couple paths: ignore them but fall behind, or face ‘em head-on.

The problem is, trying to stay on top of these innovations can feel a bit like battling Sauron’s army. (And for those who don’t get the movie quip: very, very daunting.)

Fortunately, progressive enhancement is the way forward for web design — especially on mobile devices. By starting simple and building up, we can craft amazing experiences that work regardless of the capabilities or deficiencies of a given device.

And Aaron Gustafson is just the man to describe how proven techniques like mobile first, responsive design, and adaptive UI can fit into your process while expanding your skill set.

Aaron talks about:

* Shifting your thinking to architect adaptive experiences right away
* Designing to take advantage of what’s possible on today’s mobile platforms
* Considering alternative ways to interact with UI components you design
* Using JavaScript smartly to avoid creating a “house of cards”

Transcript

1. BUILDING ADAPTIVE DESIGNS NOW Aaron Gustafson @aarongustafson slideshare.net/AaronGustafson
2. BROWSERS ARE A PAIN IN THE ASS
12. © Brad Frost
13. © Brad Frost
14. 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
15. 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. “
16. 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. “
17. 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%. “
18. In the second quarter of 2008 we detected 71 di erent screen resolutions among our visitors. In the rst quarter of 2012 we detected “ 830
19. LET’S TALK MOBILE
20. FIRST OFF MOBILE IS NOT THE BEST WORD
21. http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html of our daily media interactions 21% Out of home 79% At home 40% Out of home 60% At home 54% 31% Out of home 69% At home Computer Smartphone Tablet
22. http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html 90% of people use multiple screens sequentially MOBILE IS NOT ISOLATED
23. http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html 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 Shopping Online starting place for online activities 65% 47% 63% 59% 65% 66% 56% Started on smartphone
24. http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html Base: Total Answering, Follow-Up Occasion (Search) – PC/Laptop (492); Smartphone (216); Tablet not shown due to small base size. Q. Would you consider your use of D>'(9Ζ&(@WREHSODQQHGRUVSXURIWKHPRPHQW VSRQWDQHRXV "%DVH6SRQWDQHRXVVHDUFKHV6PDUWSKRQH  3&  :KLFKRIWKHVHEHVWGHVFULEHVWKLVDFWLYLW\" Often this is for “spur-of-the-moment” activity Spontaneous vs. Planned Search 6PDUWSKRQH 3&/DSWRS of all spontaneous searches on smartphones were to accomplish a goal 44% of all spontaneous searches on PCs were to accomplish a goal 43% 20% Planned 80% 48% Planned 52% Spontaneous Spontaneous Base: Total Answering, Follow-Up Occasion (Search) – PC/Laptop (492); Smartphone (216); Tablet not shown due to small base size. Q. Would you consider your use of D>'(9Ζ&(@WREHSODQQHGRUVSXURIWKHPRPHQW VSRQWDQHRXV "%DVH6SRQWDQHRXVVHDUFKHV6PDUWSKRQH  3&  :KLFKRIWKHVHEHVWGHVFULEHVWKLVDFWLYLW\" 35 Often this is for “spur-of-the-moment” activity Spontaneous vs. Planned Search 6PDUWSKRQH 3&/DSWRS of all spontaneous searches on smartphones were to accomplish a goal 44% of all spontaneous searches on PCs were to accomplish a goal 43% 20% Planned 80% 48% Planned 52% Spontaneous Spontaneous MOBILE = OPPORTUNITY
25. PERCEPTION
26. PERCEPTION
27. There is no WebKit on Mobile — Peter-Paul Koch “
28. WebKit vs. Acid3 http://www.quirksmode.org/webkit_mobile.html
29. Surely there’s platform consistency!?! — Any sane individual “
30. There is no Android — Stephanie Rieger “
31. http://yfrog.com/z/ob5kndj
32. BUT ANDROID IS NOT UNIQUE IN THIS
33. THE CULPRITS? SCREEN SIZE
34. THE CULPRITS? EMBEDDED VIEWS
35. THE CULPRITS? BROWSER CHROME
36. THE CULPRITS? ZOOM LEVEL
37. THE CULPRITS? ZOOM LEVEL (Ok, this one’s on Android)
38. 2009 2010 2011 6 Billion 2009 2010 2011 http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/a#subscribers
39. OVER 80% OF THESE ARE FEATURE PHONES, NOT SMARTPHONES http://developinthecloud.drdobbs.com/author.asp?doc_id=253055&section_id=2280
40. ESPECIALLY TRUE IN DEVELOPING COUNTRIES
41. INTERNET IN KENYA MOBILE = 90% http://www.cck.go.ke/resc/downloads/SECTOR_STATISTICS_REPORT_Q4_11-12.pdf
42. THE REALITY
45. “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
46. Um… I think I’ll just build an iPhone app. kthxbye.
47. NATIVE vs. WEB
48. NATIVE vs. WEB
49. © Brad Frost
50. © Brad Frost
51. WE DON’T KNOW
53. WE DON’T KNOW
54. EVEN WHEN WE THINK WE KNOW, WE ARE PROBABLY WRONG
55. SO HOW DO WE COPE?
56. PROGRESSIVE ENHANCEMENT
57. TECHNOLOGICAL RESTRICTIONS
58. I like an escalator because an escalator can never break, it can only become stairs. — Mitch Hedberg
59. GRACEFUL DEGRADATION
60. MODERN BROWSERS OLDER BROWSERS
61. MODERN BROWSERS OLDER BROWSERS
63. a dynamic web page can never break, it can only become a web page.
67. PROGRESSIVE ENHANCEMENT
68. CONTENT
70. ACCESSIBILITY
71. “SPECIAL NEEDS”
72. CAN BE CONTEXTUAL “SPECIAL NEEDS”
74. GRACEFUL DEGRADATION PROGRESSIVE ENHANCEMENT
75. OOOH SHINY! ,
76. PROGRESSIVE ENHANCEMENT ISN’T ABOUT BROWSERS
77. BROWSERS AND TECHNOLOGIES COME AND GO
78. DON’T LOSE SIGHT OF YOUR USERS
79. Graceful Degradation Progressive Enhancement
80. on Progressive Enhancement Responsive Web Design Mobile First
81. NEWER OLDER User Experience Browser Age Graceful Degradation
82. BASIC ADVANCED User Experience Browser & Device Capabilities Progressive Enhancement
83. BASIC ADVANCED User Experience Browser & Device Capabilities Content
84. BASIC ADVANCED User Experience Browser & Device Capabilities Content Semantics
85. BASIC ADVANCED User Experience Browser & Device Capabilities Content Semantics Design
86. BASIC ADVANCED User Experience Browser & Device Capabilities Content Semantics Design Interactivity
87. BASIC ADVANCED User Experience Browser & Device Capabilities Content Semantics Design Interactivity Accessibility
88. BASIC ADVANCED User Experience Browser & Device Capabilities Text & HTTP HTML CSS JavaScript ARIA
89. HTML
90. HTML HTML5 Microformats HTML4
91. EXAMPLES
93. BUILDING ADAPTIVE DESIGNS NOW 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>
94. BUILDING ADAPTIVE DESIGNS NOW 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>
95. BUILDING ADAPTIVE DESIGNS NOW 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>
96. BUILDING ADAPTIVE DESIGNS NOW PE with HTML <input type="date" name="dob"/> I get it! I don’t get it :-(
97. BUILDING ADAPTIVE DESIGNS NOW 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>
101. BUILDING ADAPTIVE DESIGNS NOW 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>
102. BUILDING ADAPTIVE DESIGNS NOW 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>
103. BUILDING ADAPTIVE DESIGNS NOW Parsing errors p { color: red; }
104. BUILDING ADAPTIVE DESIGNS NOW Parsing errors p { color: red; }
105. BUILDING ADAPTIVE DESIGNS NOW Parsing errors p { color: red; font-weight: bold; }
106. BUILDING ADAPTIVE DESIGNS NOW Parsing errors p { color: red; font-weight: bold; }
107. BUILDING ADAPTIVE DESIGNS NOW Parsing errors p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
108. BUILDING ADAPTIVE DESIGNS NOW Parsing errors html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
109. BUILDING ADAPTIVE DESIGNS NOW Parsing errors @-moz-document url-prefix() { html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); } }
110. #intro { /* Basic Layout */ } /* ... */ body[id=css-zen-garden] #intro { /* Advanced Layout */ }
111. #intro { /* Basic Layout */ } /* ... */ [foo], #intro { /* Advanced Layout */ }
112. BUILDING ADAPTIVE DESIGNS NOW Parsing errors @media screen, print, refrigerator { /* IE will get these rules */ }
114. BUILDING ADAPTIVE DESIGNS NOW @Media blocks @media screen { /* Styles for screen media only */ }
115. BUILDING ADAPTIVE DESIGNS NOW @Media blocks+ @media only screen and (max-width:450px) { /* Styles for screen media when browser is 450px wide or below */ }
116. BUILDING ADAPTIVE DESIGNS NOW 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 */ }
117. BUILDING ADAPTIVE DESIGNS NOW Mobile First w/ media queries /* Universal Layout */ @media screen { /* Styles for all screens */ } @media only screen and (min-width:481px) { /* Styles for all screens 480px+ width */ } @media only screen and (min-width:754px) { /* Styles for all screens 754px+ width */ }
118. http://is.gd/lazyloading_demo
119. BUILDING ADAPTIVE DESIGNS NOW PE with JavaScript
120. BUILDING ADAPTIVE DESIGNS NOW PE with JavaScript <input class="tweet-counter" value="140" disabled="disabled">
121. BUILDING ADAPTIVE DESIGNS NOW PE with JavaScript <span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span>
122. BUILDING ADAPTIVE DESIGNS NOW PE with JavaScript <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span> .hidden { position: absolute; left: 999em; }
123. BUILDING ADAPTIVE DESIGNS NOW PE with JavaScript <span class="tweet-counter">maximum of 140 characters</span> <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>
124. BUILDING ADAPTIVE DESIGNS NOW PE with JavaScript & ARIA <span aria-live="polite" aria-atomic="true" class="tweet-counter">140<b class="hidden"> characters remaining</b></span>
125. BUILDING ADAPTIVE DESIGNS NOW PE with JavaScript & ARIA
126. BUILDING ADAPTIVE DESIGNS NOW Complex interfaces
127. BUILDING ADAPTIVE DESIGNS NOW Traditional approach <h1>Pumpkin Pie</h1> <div class="container"> <div class="section"> <h2>Overview</h2> <img src="pie.jpg" alt=""> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> <!-- ... --> </div> <!-- ... --> <ul class="tabs"> <li><a href="#">Overview</a></li> <li><a href="#">Ingredients</a></li> <li><a href="#">Directions</a></li> <li><a href="#">Nutrition</a></li> </ul> </div>
128. BUILDING ADAPTIVE DESIGNS NOW Cleaner approach <h1>Pumpkin Pie</h1> <div class="tabbed-interface"> <h2>Overview</h2> <img src="pie.jpg" alt="" /> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> <!-- ... --> <h2>Ingredients</h2> <ul> <li>1 (9<abbr title="inch">in</abbr>) unbaked deep dish pie crust</li> <li> cup white sugar</li> <!-- ... --> </ul> <h2>Directions</h2> <!-- ... --> </div>
129. BUILDING ADAPTIVE DESIGNS NOW Cleaner approach <h1>Pumpkin Pie</h1> <div class="tabbed-interface"> <h2>Overview</h2> <img src="pie.jpg" alt="" /> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> <!-- ... --> <h2>Ingredients</h2> <ul> <li>1 (9<abbr title="inch">in</abbr>) unbaked deep dish pie crust</li> <li> cup white sugar</li> <!-- ... --> </ul> <h2>Directions</h2> <!-- ... --> </div>
130. BUILDING ADAPTIVE DESIGNS NOW PE with JavaScript & ARIA
131. BUILDING ADAPTIVE DESIGNS NOW Widget logic Page
132. BUILDING ADAPTIVE DESIGNS NOW Widget logic Page JS?
133. BUILDING ADAPTIVE DESIGNS NOW Widget logic Page JS? No
134. BUILDING ADAPTIVE DESIGNS NOW Widget logic Page JS? No Yes Split the content & make some tabs
135. BUILDING ADAPTIVE DESIGNS NOW On DOM ready <h1>Pumpkin Pie</h1> <div class="tabbed-interface TabInterface-enabled"> <section> <h2>Overview</h2> <img src="pie.jpg" alt=""> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> <!-- ... --> </section> <!-- ... --> <ul class="tabs"> <li><a href="#">Overview</a></li> <li><a href="#">Ingredients</a></li> <li><a href="#">Directions</a></li> <li><a href="#">Nutrition</a></li> </ul> </div>
136. BUILDING ADAPTIVE DESIGNS NOW Adaptive UI <div class="tabbed-interface" data-tab-threshold="800"> <h2>Overview</h2> <!-- … --> <h2>Ingredients</h2> <!-- … --> <h2>Directions</h2> <!-- … --> <h2>Nutrition</h2> <!-- … --> </div>
137. BUILDING ADAPTIVE DESIGNS NOW Adaptive widget logic Page
138. BUILDING ADAPTIVE DESIGNS NOW Adaptive widget logic Page JS?
139. BUILDING ADAPTIVE DESIGNS NOW Adaptive widget logic Page JS? No
140. BUILDING ADAPTIVE DESIGNS NOW Adaptive widget logic Page JS? No Yes
141. BUILDING ADAPTIVE DESIGNS NOW Adaptive widget logic Page JS? No Yes No
142. BUILDING ADAPTIVE DESIGNS NOW Adaptive widget logic Page JS? No Yes Yes No Split the content & make some tabs
143. BUILDING ADAPTIVE DESIGNS NOW Adaptive widget logic Page JS? No Yes Yes No LIVE Split the content & make some tabs Untab (if tabbed)
144. BUILDING ADAPTIVE DESIGNS NOW PE with JavaScript & ARIA role="application" aria-activedescendant="folder-1"
145. BUILDING ADAPTIVE DESIGNS NOW PE with JavaScript & ARIA role="tablist"
146. BUILDING ADAPTIVE DESIGNS NOW PE with JavaScript & ARIA role="tab" aria-selected="true" aria-controls="folder-1"
147. BUILDING ADAPTIVE DESIGNS NOW PE with JavaScript & ARIA role="tab" aria-selected="false" aria-controls="folder-4"
148. BUILDING ADAPTIVE DESIGNS NOW PE with JavaScript & ARIA role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab"
149. BUILDING ADAPTIVE DESIGNS NOW PE with JavaScript & ARIA
150. Text & HTTP HTML CSS JavaScript ARIA
151. THANK YOU! http://readlists.com/7d414b24/
152. Building Adaptive Designs Now 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/