Your SlideShare is downloading. ×

Building Adaptive Designs Now [UI17]

5,940
views

Published on

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. …

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 will talk 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”

This talk focuses on designing for mobile - a portion of what his workshop topic will cover.

Published in: Technology

0 Comments
35 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,940
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
35
Comments
0
Likes
35
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. BUILDING ADAPTIVE DESIGNS NOWAaron 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. PERCEPTION
  • 17. PERCEPTION
  • 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. ACCESSIBILITY
  • 54. “SPECIAL NEEDS”
  • 55. “SPECIAL NEEDS” CAN BE CONTEXTUAL
  • 56. PROGRESSIVEGRACEFUL DEGRADATION ENHANCEMENT
  • 57. OOOH, SHINY!
  • 58. PROGRESSIVEENHANCEMENT ISN’T ABOUT BROWSERS
  • 59. BROWSERS ANDTECHNOLOGIES COME AND GO
  • 60. DON’T LOSE SIGHT OF YOUR USERS
  • 61. ProgressiveGraceful Degradation Enhancement
  • 62. Responsive Web Design Progressiveon Enhancement Mobile First
  • 63. User Experience NEWER OLDER Browser Age Graceful Degradation
  • 64. User Experience BASIC ADVANCED Browser & Device Capabilities Progressive Enhancement
  • 65. User Experience BASIC ADVANCED Browser & Device Capabilities Content
  • 66. User Experience Semantics BASIC ADVANCED Browser & Device Capabilities Content
  • 67. User Experience Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
  • 68. User Experience Interactivity Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
  • 69. User Experience Accessibility Interactivity Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
  • 70. User Experience ARIA JavaScript CSS HTML BASIC ADVANCED Browser & Device Capabilities Text & HTTP
  • 71. HTML
  • 72. HTML5HTMLMicroformats HTML4
  • 73. EXAMPLES
  • 74. BUILDING ADAPTIVE DESIGNS NOWSemantics 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>
  • 75. BUILDING ADAPTIVE DESIGNS NOWPE 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>
  • 76. BUILDING ADAPTIVE DESIGNS NOWPE 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>
  • 77. BUILDING ADAPTIVE DESIGNS NOWPE with HTML <input type="date" name="dob"/> I get it! I don’t get it :-(
  • 78. BUILDING ADAPTIVE DESIGNS NOWPE 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>
  • 79. BUILDING ADAPTIVE DESIGNS NOWPE 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>
  • 80. BUILDING ADAPTIVE DESIGNS NOWThese 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>
  • 81. BUILDING ADAPTIVE DESIGNS NOWParsing errors p{ color: red; }
  • 82. BUILDING ADAPTIVE DESIGNS NOWParsing errors p{ color: red; }
  • 83. BUILDING ADAPTIVE DESIGNS NOWParsing errors p{ color: red; font-weight: bold; }
  • 84. BUILDING ADAPTIVE DESIGNS NOWParsing errors p{ color: red; font-weight: bold; }
  • 85. BUILDING ADAPTIVE DESIGNS NOWParsing errors p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
  • 86. BUILDING ADAPTIVE DESIGNS NOWParsing errors html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
  • 87. BUILDING ADAPTIVE DESIGNS NOWParsing 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. BUILDING ADAPTIVE DESIGNS NOWParsing errors @media screen, print, refrigerator { /* IE will get these rules */ }
  • 91. BUILDING ADAPTIVE DESIGNS NOW@Media blocks @media screen { /* Styles for screen media only */ }
  • 92. BUILDING ADAPTIVE DESIGNS NOW@Media blocks+ @media only screen and (max-width:450px) { /* Styles for screen media when browser is 450px wide or below */ }
  • 93. BUILDING ADAPTIVE DESIGNS NOWDon’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. BUILDING ADAPTIVE DESIGNS NOWMobile 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 */ }
  • 95. http://is.gd/lazyloading_demo
  • 96. BUILDING ADAPTIVE DESIGNS NOWPE with JavaScript
  • 97. BUILDING ADAPTIVE DESIGNS NOWPE with JavaScript <input class="tweet-counter" value="140" disabled="disabled">
  • 98. BUILDING ADAPTIVE DESIGNS NOWPE with JavaScript <span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span>
  • 99. BUILDING ADAPTIVE DESIGNS NOWPE with JavaScript <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span> .hidden { position: absolute; left: 999em; }
  • 100. BUILDING ADAPTIVE DESIGNS NOWPE with JavaScript <span class="tweet-counter">maximum of 140 characters</span> <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>
  • 101. BUILDING ADAPTIVE DESIGNS NOWPE with JavaScript & ARIA <span aria-live="polite" aria-atomic="true" class="tweet-counter">140<b class="hidden"> characters remaining</b></span>
  • 102. BUILDING ADAPTIVE DESIGNS NOWPE with JavaScript & ARIA
  • 103. BUILDING ADAPTIVE DESIGNS NOWComplex interfaces
  • 104. BUILDING ADAPTIVE DESIGNS NOWTraditional approach <h1>Pumpkin Pie</h1> <div class="container"> <div class="section"> <h2>Overview</h2> <img src="pie.jpg" alt=""> <p>Whether youre 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>
  • 105. BUILDING ADAPTIVE DESIGNS NOWCleaner approach <h1>Pumpkin Pie</h1> <div class="tabbed-interface"> <h2>Overview</h2> <img src="pie.jpg" alt="" /> <p>Whether youre 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>
  • 106. BUILDING ADAPTIVE DESIGNS NOWCleaner approach <h1>Pumpkin Pie</h1> <div class="tabbed-interface"> <h2>Overview</h2> <img src="pie.jpg" alt="" /> <p>Whether youre 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>
  • 107. BUILDING ADAPTIVE DESIGNS NOWPE with JavaScript & ARIA
  • 108. BUILDING ADAPTIVE DESIGNS NOWWidget logic Page
  • 109. BUILDING ADAPTIVE DESIGNS NOWWidget logic Page JS?
  • 110. BUILDING ADAPTIVE DESIGNS NOWWidget logic Page JS? No
  • 111. BUILDING ADAPTIVE DESIGNS NOWWidget logic Split Page the content & make some tabs JS? Yes No
  • 112. BUILDING ADAPTIVE DESIGNS NOWOn DOM ready <h1>Pumpkin Pie</h1> <div class="tabbed-interface TabInterface-enabled"> <section> <h2>Overview</h2> <img src="pie.jpg" alt=""> <p>Whether youre 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>
  • 113. BUILDING ADAPTIVE DESIGNS NOWAdaptive UI <div class="tabbed-interface" data-tab-threshold="800"> <h2>Overview</h2> <!-- … --> <h2>Ingredients</h2> <!-- … --> <h2>Directions</h2> <!-- … --> <h2>Nutrition</h2> <!-- … --> </div>
  • 114. BUILDING ADAPTIVE DESIGNS NOWAdaptive widget logic Page
  • 115. BUILDING ADAPTIVE DESIGNS NOWAdaptive widget logic Page JS?
  • 116. BUILDING ADAPTIVE DESIGNS NOWAdaptive widget logic Page JS? No
  • 117. BUILDING ADAPTIVE DESIGNS NOWAdaptive widget logic Page JS? Yes No
  • 118. BUILDING ADAPTIVE DESIGNS NOWAdaptive widget logic Page JS? Yes No No
  • 119. BUILDING ADAPTIVE DESIGNS NOWAdaptive widget logic Split the content & make some tabs Page JS? Yes No Yes No
  • 120. BUILDING ADAPTIVE DESIGNS NOWAdaptive widget logic Split the content & make some tabs Page LIVE JS? Yes No Yes No Untab (if tabbed)
  • 121. BUILDING ADAPTIVE DESIGNS NOWPE with JavaScript & ARIA role="application" aria-activedescendant="folder-1"
  • 122. BUILDING ADAPTIVE DESIGNS NOWPE with JavaScript & ARIA role="tablist"
  • 123. BUILDING ADAPTIVE DESIGNS NOWPE with JavaScript & ARIA role="tab" aria-selected="true" aria-controls="folder-1"
  • 124. BUILDING ADAPTIVE DESIGNS NOWPE with JavaScript & ARIA role="tab" aria-selected="false" aria-controls="folder-4"
  • 125. BUILDING ADAPTIVE DESIGNS NOWPE with JavaScript & ARIA role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab"
  • 126. BUILDING ADAPTIVE DESIGNS NOWPE with JavaScript & ARIA
  • 127. ARIAJavaScript CSS HTMLText & HTTP
  • 128. THANK YOU!http://readlists.com/7d414b24/
  • 129. 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.flickr.com/photos/aarongustafson/galleries/72157629846428745/