Responsive & Responsible: Implementing Responsive Design at Scale

2,026 views

Published on

Presentation given at Breaking Development Conference, September 2011.

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,026
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
55
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Responsive & Responsible: Implementing Responsive Design at Scale

  1. 1. Responsive &ResponsibleScott Jehl filament group
  2. 2. We design engaging sites andfilament group applications that are simple to use and accessible to all.
  3. 3. “An escalator can never break: it can only become stairs. ”Mitch Hedberg
  4. 4. Responsive DesignA natural subset of Progressive Enhancement.
  5. 5. Responsible Delightful and inclusive.
  6. 6. Inclusive Delightful It works in my It feels intuitive. browser. It’s fun to use! It allows me tocomplete my task It’s damned fast!
  7. 7. Make it work everywhere....and work especially well in newer browsers!
  8. 8. There are, in fact,Many ways to skin an app.
  9. 9. “it depends.”- Every speaker at this conference.
  10. 10. Should it be responsive?• Commonality across experiences• Developer Skillset• Time up-front vs. maintenance• Interest in a challenge
  11. 11. PE, done right, is hard. Make no mistake!
  12. 12. A proposition:A layered approach can be rich, without being exclusive.
  13. 13. Talk = cheap.
  14. 14. We built something. Let’s tear it apart, shall we?
  15. 15. A One-Web Case Study
  16. 16. Design-velopment Team @mirandamulligan @filamentgroup @beep @upstatement
  17. 17. Responsive. But is it responsible?
  18. 18. Areas of ResponsibilityAccessibility PerformanceUsability Sustainability
  19. 19. Responsive... ble baseline• “Content” first• Mobile-first images• Mobile-friendly layout
  20. 20. Asset Baseline• Basic CSS file• Basic JS file• Qualified Enhanced CSS file
  21. 21. Experience Divisions Defensive Development = Qualified Upgrades
  22. 22. Basic CSS
  23. 23. “Basic” = safe defaults• Tweaks to browser typography• Horizontal rules• Text alignment• Display: Inline / Block• No complex layout or positioning
  24. 24. “Basic”
  25. 25. Enhanced Experience
  26. 26. The @media qualifier
  27. 27. “If you’re awesome, or you’re Internet Explorer, you get enhanced.”Ethan Marcotte
  28. 28. @media-fortified design.<link href="enhanced.css" media="only all">
  29. 29. All in your <head><link rel=...” href=”basic.css” id=”basic”><!--[if gte IE 6]><link href="enhanced.css"rel="stylesheet"><![endif]--><!--[if !IE]><!--><link href="enhanced.css"media="only all"><!--<![endif]--><script src=”basic.js”></script>
  30. 30. The Concatenator
  31. 31. Server-side Concatenation<link href=”css/file1.css,file2.css,file3.css”..> Minify + Gzip
  32. 32. Enhanced CSS/* styles for everyone go here.. */@media all and (min-width: 500px){ .. }@media all and (min-width: 620px){ .. }@media all and (min-width: 950px){ .. }
  33. 33. Inheritance Prevention@media all and (min-width: 500px)and (max-width: 700px){ /* styles constrained to 500-700px */}
  34. 34. LeftRight Left
  35. 35. Display: table + table-cell
  36. 36. Ems all the way down. Ems allow for components to adapt differently in different containers
  37. 37. Basic.js: “just enough”• ResponsiveImages.js• Respond.js• Modernizr / extensions / HTML5 Shim• The Boston Globe JS Framework
  38. 38. Also.
  39. 39. Responsive Images<img src=”foo.r.jpg” data-fullsrc=”foo.lrg.jpg”/>
  40. 40. Edge Cases
  41. 41. Edge Cases
  42. 42. Respond.js Now available as part ofhttps://github.com/scottjehl/Respond
  43. 43. Also: matchMedia polyfill github.com/paulirish/matchMedia.js window.matchMedia( “only all” );
  44. 44. Globe JS Framework
  45. 45. The globe, um... global. globe = {};
  46. 46. Feature flags from Modernizrglobe.support.touchglobe.support.applicationcacherespond.mediaQueriesSupported
  47. 47. Internet Explorer Flags<!--[if lt IE 7 ]> <html lang="en"class="ie ie6"> <![endif]-->globe.browser.ie6 = document.documentElement .className.indexOf( “ie6” ) >= 0;
  48. 48. Again, with the @mediaglobe.enhanced = respond.mediaQueriesSupported || globe.browser.ie6 || globe.browser.ie7 || globe.browser.ie8; Conditional-comment driven
  49. 49. JS Experience Divideif( !globe.enhanced ){ //last stop for old browsers! return;}else{ //remove Basic CSS //bring on the enhancements}
  50. 50. And one caveat...No Enhanced JS for BB5 great browser, too slow.
  51. 51. No JS? That’s okay.
  52. 52. On removing Basic.css... head.removeChild( basicCSS );• Convenient when basic.css does not easily cascade.• A convenience that can’t be guaranteed.
  53. 53. Enhancing Further
  54. 54. Loading Assets
  55. 55. Enhanced page weight Different for every browser. Highly optimized.
  56. 56. The assets you receive depend onwidth, section, features ~ hand-crafted delivery ~
  57. 57. Defining Assets to Load//Arrays of JS and CSS filesglobe.jsToLoad = [ “jquery.js” ];globe.cssToLoad = []; jQuery is dynamically-loaded too!
  58. 58. Feature-based Loadingif( globe.support.touch ){ jsToLoad.push( “touchEvents.js” );}
  59. 59. Section-specific Loadingif( globe.hasClass( “gallery”, body ) ){ jsToLoad.push( “galleries.js” );}
  60. 60. Device Size Decisionsif( window.screen.width > 500 ){ cssToLoad.push( “fonts.css” );} screen, not window
  61. 61. Our width usage rule of thumb:screen for assetswindow for design
  62. 62. Why Screen, not viewport? • Fixed per device • Assets delivered to device’s potential, not just current state. • Orientation-change makes resize relevant again.
  63. 63. Pack & Loadglobe.load.script( jsToLoad.join(","));globe.load.style( cssToLoad.join(","));
  64. 64. Again, concat.“js/file1.js,file2.js,file3.js” Minify + Gzip
  65. 65. Responsive Behavior
  66. 66. Collapsible Sections
  67. 67. We value all input...
  68. 68. On the desktop... photo: flickrich
  69. 69. ...and on the deviceTouch & MouseEventsMouse Events
  70. 70. Normalized Events• vclick• vmousedown• vmouseover• vmouseup• vmousecancel
  71. 71. Click - or - Gesture
  72. 72. Drag paginationhttp://filamentgroup.com/lab/jquery_mobile_pagination_plugin/
  73. 73. #!hashbang
  74. 74. Single-Page Apps Less JS execution, faster page loads
  75. 75. Degrees of #!%$hashbangNot great: Less... not great:<a href=”#foo.html”>Foo</a> <a href=”foo.html”>Foo</a> http://example.com/#!foo.html
  76. 76. Great:history.replaceStatehttp://example.com/#!foo.html http://example.com/foo.html
  77. 77. ...in code.window.addEventListener( “hashchange”, function(){ history.replaceState( {}, document.title, location.hash.replace("#!","" ) ); }, false );
  78. 78. Many ways to “Save”
  79. 79. Hidden Touch Interface
  80. 80. Even save without JS Simple Form
  81. 81. PE + offline is possible! Extends the ability for a site to meet you where you are
  82. 82. Accessibilityenhancements
  83. 83. Keep it accessible
  84. 84. Keys + WAI ARIA
  85. 85. audible interfacepairs with mobile, resolution-independent
  86. 86. One-Web Challenges
  87. 87. Content Negotiation
  88. 88. Landing pages are heavy What if we treat them like navigation?
  89. 89. Anchor-Include Pattern<a href=”path/to/weather.html”data-after=”path/to/weather-fragment.html”>T</a>https://gist.github.com/983328
  90. 90. Ideal Delivery In page source Delivered via Ajax
  91. 91. Ads.
  92. 92. Ads are not awesome.• Third-party, potential for conflicts• They block content loading• Potentially overtake page• Pixel dimensions, contractually• Filled with document.write
  93. 93. Best. Line. Ever.document.write( “...<noscript>..” );
  94. 94. How we “solve” ads: <iframe>Dynamically injected, naturally.
  95. 95. Resize + Hide + Append
  96. 96. Where to append?CSS:@media all and (min-width: 500px){ .a .ad { display: none; }}JavaScript://on window resize:if( !$( “.ad” ).is( “:visible” ) ){ $( “.ad” ).appendTo( “.b” );}
  97. 97. Edge Caching Not an edge-case.
  98. 98. In conclusion... We have the toolsto build sites that are rich without being exclusive.
  99. 99. What about “apps?”
  100. 100. FlipPicshttp://bit.ly/pBJciO
  101. 101. thanks everyone. @scottjehl

×