Progressive Enhancement & Mobile [Funka 2012]
 

Like this? Share it with your network

Share

Progressive Enhancement & Mobile [Funka 2012]

on

  • 62,244 views

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

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.

Statistics

Views

Total Views
62,244
Views on SlideShare
61,584
Embed Views
660

Actions

Likes
38
Downloads
271
Comments
0

27 Embeds 660

http://marli.potashcorp-redesign.thezoo 143
http://blog.easy-designs.net 110
http://michael.potashcorp-redesign.thezoo 85
http://beta.martinagency.com 50
http://devxe.commons.co.kr 34
http://potashcorp-redesign.thezoo 34
http://localhost 31
http://pot.beta.zu.com 30
http://india.dev.cybozu.co.jp 24
https://www.coursesites.com 18
https://connections.coursesites.com 17
http://pot-staging.beta.zu.com 15
http://secondlifemafia.wordpress.com 11
http://www.infographicworks.com 9
http://wbpr.intel.com 9
http://us-w1.rockmelt.com 7
http://blog.websourcing.fr 6
https://si0.twimg.com 4
http://www.netvibes.com 4
http://feeds.feedburner.com 4
http://anoopsavio.com 4
http://www.experiencebell.org 3
http://irsplsweb041 3
http://showcaseserver.net 2
http://paper.li 1
http://enprueba.milaulas.com 1
http://www.techgig.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Progressive Enhancement & Mobile [Funka 2012] Presentation Transcript

  • 1. PROGRESSIVE ENHANCEMENT & MOBILEAaron Gustafson@aarongustafsonslideshare.net/AaronGustafson
  • 2. BROWSERS ARE A PAIN IN THE ASS
  • 3. AND THEN THERE’S MOBILE
  • 4. © Brad Frost
  • 5. © Brad Frost
  • 6. WHAT IS MOBILE?
  • 7. WHAT IS MOBILE?
  • 8. “There is no WebKit on Mobile — Peter-Paul Koch
  • 9. WebKit vs. Acid3http://www.quirksmode.org/webkit_mobile.html
  • 10. Surely there’s platformconsistency?!
  • 11. “There is no Android — Stephanie Rieger
  • 12. http://yfrog.com/z/ob5kndj
  • 13. BUT ANDROIDIS NOT UNIQUE IN THIS
  • 14. THE CULPRITS? SCREEN SIZE
  • 15. THE CULPRITS?EMBEDDED VIEWS
  • 16. THE CULPRITS?BROWSER CHROME
  • 17. THE CULPRITS? ZOOM LEVEL
  • 18. THE CULPRITS? ZOOM LEVEL (Ok, this one’s on Android)
  • 19. WHAT IS MOBILE?
  • 20. “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
  • 21. Um… I think I’ll justbuild an iPhone app. kthxbye.
  • 22. NATIVE vs. WEB
  • 23. NATIVE vs. WEB
  • 24. © Brad Frost
  • 25. © Brad Frost
  • 26. WE DON’T KNOW
  • 27. EVEN WHEN WE THINK WE KNOW, WE ARE PROBABLY WRONG
  • 28. SO HOW DO WE COPE?
  • 29. PROGRESSIVEENHANCEMENT
  • 30. TECHNOLOGICAL RESTRICTIONS
  • 31. MCMLXXVII (that’s 1977)
  • 32. HTML CSS
  • 33. fault tolerancen. a system’s ability to continue tooperate when it encounters andunexpected error.
  • 34. BROWSERSIGNORE WHAT THEY DON’TUNDERSTAND
  • 35. I like an escalator becausean escalator can never break,it can only become stairs. — Mitch Hedberg
  • 36. an electric toothbrushcan never break, itcan only become atoothbrush.
  • 37. a dynamic web page cannever break, it can onlybecome a web page.
  • 38. GRACEFULDEGRADATION
  • 39. MODERNBROWSERS OLDER BROWSERS
  • 40. PROGRESSIVEENHANCEMENT
  • 41. CONTENT
  • 42. ACCESSIBILITY
  • 43. “SPECIAL NEEDS”
  • 44. “SPECIAL NEEDS” CAN BE CONTEXTUAL
  • 45. PROGRESSIVEGRACEFUL DEGRADATION ENHANCEMENT
  • 46. OOOH, SHINY!
  • 47. PROGRESSIVEENHANCEMENT ISN’T ABOUT BROWSERS
  • 48. BROWSERS ANDTECHNOLOGIES COME AND GO
  • 49. DON’T LOSE SIGHT OF YOUR USERS
  • 50. User Experience NEWER OLDER Browser Age Graceful Degradation
  • 51. User Experience BASIC ADVANCED Browser & Device Capabilities Progressive Enhancement
  • 52. User Experience BASIC ADVANCED Browser & Device Capabilities Content
  • 53. User Experience Semantics BASIC ADVANCED Browser & Device Capabilities Content
  • 54. User Experience Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
  • 55. User Experience Interactivity Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
  • 56. User Experience Accessibility Interactivity Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
  • 57. User Experience ARIA JavaScript CSS HTML BASIC ADVANCED Browser & Device Capabilities Text & HTTP
  • 58. HTML
  • 59. HTML5HTMLMicroformats HTML4
  • 60. EXAMPLES
  • 61. 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&#8217;t know what">je ne sais quoi</i>.</p>
  • 62. 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>
  • 63. 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>
  • 64. PROGRESSIVE ENHANCEMENT & MOBILEPE with HTML <input type="date" name="dob"/> I get it! I don’t get it :-(
  • 65. 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>
  • 66. 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>
  • 67. 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>
  • 68. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors p{ color: red; }
  • 69. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors p{ color: red; }
  • 70. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors p{ color: red; font-weight: bold; }
  • 71. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors p{ color: red; font-weight: bold; }
  • 72. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
  • 73. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
  • 74. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors @-moz-document url-prefix() { html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); } }
  • 75. #intro { /* Basic Layout */}/* ... */body[id=css-zen-garden] #intro { /* Advanced Layout */}
  • 76. #intro { /* Basic Layout */}/* ... */[foo], #intro { /* Advanced Layout */}
  • 77. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors @import not-for-IE7-or-below.css screen; @media screen, print, refrigerator { /* IE will get these rules */ }
  • 78. PROGRESSIVE ENHANCEMENT & MOBILE@Media blocks @media screen { /* Styles for screen media only */ }
  • 79. PROGRESSIVE ENHANCEMENT & MOBILE@Media blocks+ @media screen and (max-width:450px) { /* Styles for screen media when browser is 450px wide or below */ }
  • 80. 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 */ }
  • 81. 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 */ }
  • 82. PROGRESSIVE ENHANCEMENT & MOBILEMobile 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; } }
  • 83. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript
  • 84. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript
  • 85. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript <input class="tweet-counter" value="140" disabled="disabled">
  • 86. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript <span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span>
  • 87. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span> .hidden { position: absolute; left: −999em; }
  • 88. 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>
  • 89. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA <span aria-live="polite" aria-atomic="true" class="tweet-counter">140<b class="hidden"> characters remaining</b></span>
  • 90. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA
  • 91. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA
  • 92. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="application" aria-activedescendant="folder-1"
  • 93. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="tablist"
  • 94. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="tab" aria-selected="true" aria-controls="folder-1"
  • 95. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="tab" aria-selected="false" aria-controls="folder-4"
  • 96. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab"
  • 97. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA
  • 98. ARIAJavaScript CSS HTMLText & HTTP
  • 99. Available now fromeasy-readers.netor me for150 SEK
  • 100. 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/