Responsive & Responsible

4137f7daffde77fce06a26a1ac92f9bf?s=47 scottjehl
September 26, 2011

Responsive & Responsible

Behind the scenes overview of building a large scale responsive design (with the new BostonGlobe.com as a case study).

4137f7daffde77fce06a26a1ac92f9bf?s=128

scottjehl

September 26, 2011
Tweet

Transcript

  1. Responsible Responsive & filament group Scott Jehl

  2. filament group We design engaging sites and applications that are

    simple to use and accessible to all.
  3. Mitch Hedberg “An escalator can never break: it can only

    become stairs. ”
  4. A natural subset of Progressive Enhancement. Responsive Design

  5. Delightful and inclusive. Responsible

  6. Inclusive Delightful It works in my browser. It feels intuitive.

    It allows me to complete my task It’s fun to use! It’s damned fast!
  7. ...and work especially well in newer browsers! Make it work

    everywhere.
  8. to skin an app. There are, in fact, Many ways

  9. “it depends.” - Every speaker at this conference.

  10. Should it be responsive? • Commonality across experiences • Developer

    Skillset • Time up-front vs. maintenance • Interest in a challenge
  11. Make no mistake! PE, done right, is hard.

  12. can be rich, without being exclusive. A proposition: A layered

    approach
  13. Talk = cheap.

  14. Let’s tear it apart, shall we? We built something.

  15. A One-Web Case Study

  16. None
  17. Design-velopment Team @beep @upstatement @filamentgroup @mirandamulligan

  18. None
  19. None
  20. But is it responsible? Responsive.

  21. Areas of Responsibility Accessibility Performance Usability Sustainability

  22. Responsive... ble baseline • “Content” first • Mobile-first images •

    Mobile-friendly layout
  23. Asset Baseline • Basic CSS file • Basic JS file

    • Qualified Enhanced CSS file
  24. Defensive Development = Qualified Upgrades Experience Divisions

  25. Basic CSS

  26. “Basic” = safe defaults • Tweaks to browser typography •

    Horizontal rules • Text alignment • Display: Inline / Block • No complex layout or positioning
  27. “Basic”

  28. None
  29. Enhanced Experience

  30. The @media qualifier

  31. Ethan Marcotte “If you’re awesome, or you’re Internet Explorer, you

    get enhanced.”
  32. @media-fortified design. <link href="enhanced.css" media="only all">

  33. <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> All in your <head>
  34. The Concatenator

  35. Server-side Concatenation <link href=”css/ file1.css,file2.css,file3.css” ..> Minify + Gzip

  36. 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){ .. }
  37. Inheritance Prevention @media all and (min-width: 500px) and (max-width: 700px){

    /* styles constrained to 500-700px */ }
  38. Left Right Left

  39. Display: table + table-cell

  40. Ems all the way down. Ems allow for components to

    adapt differently in different containers
  41. • ResponsiveImages.js • Respond.js • Modernizr / extensions / HTML5

    Shim • The Boston Globe JS Framework Basic.js: “just enough”
  42. None
  43. Also.

  44. Responsive Images <img src=”foo.r.jpg” data-fullsrc=”foo.lrg.jpg” />

  45. Edge Cases

  46. Edge Cases

  47. Respond.js https://github.com/scottjehl/Respond Now available as part of

  48. Also: matchMedia polyfill window.matchMedia( “only all” ); github.com/paulirish/matchMedia.js

  49. None
  50. Globe JS Framework

  51. The globe, um... global. globe = {};

  52. Feature flags from Modernizr globe.support.touch globe.support.applicationcache respond.mediaQueriesSupported

  53. Internet Explorer Flags <!--[if lt IE 7 ]> <html lang="en"

    class="ie ie6"> <![endif]--> globe.browser.ie6 = document.documentElement .className.indexOf( “ie6” ) >= 0;
  54. Again, with the @media globe.enhanced = respond.mediaQueriesSupported || globe.browser.ie6 ||

    globe.browser.ie7 || globe.browser.ie8; Conditional-comment driven
  55. JS Experience Divide if( !globe.enhanced ){ //last stop for old

    browsers! return; } else{ //remove Basic CSS //bring on the enhancements }
  56. great browser, too slow. And one caveat... No Enhanced JS

    for BB5
  57. No JS? That’s okay.

  58. On removing Basic.css... head.removeChild( basicCSS ); • Convenient when basic.css

    does not easily cascade. • A convenience that can’t be guaranteed.
  59. Enhancing Further

  60. Loading Assets

  61. Different for every browser. Highly optimized. Enhanced page weight

  62. ~ hand-crafted delivery ~ The assets you receive depend on

    width, section, features
  63. Defining Assets to Load //Arrays of JS and CSS files

    globe.jsToLoad = [ “jquery.js” ]; globe.cssToLoad = []; jQuery is dynamically-loaded too!
  64. Feature-based Loading if( globe.support.touch ){ jsToLoad.push( “touchEvents.js” ); }

  65. Section-specific Loading if( globe.hasClass( “gallery”, body ) ){ jsToLoad.push( “galleries.js”

    ); }
  66. Device Size Decisions if( window.screen.width > 500 ){ cssToLoad.push( “fonts.css”

    ); } screen, not window
  67. Our width usage rule of thumb: screen for assets window

    for design
  68. Why Screen, not viewport? • Fixed per device • Assets

    delivered to device’s potential, not just current state. • Orientation-change makes resize relevant again.
  69. Pack & Load globe.load.script( jsToLoad.join(",") ); globe.load.style( cssToLoad.join(",") );

  70. Again, concat. “js/file1.js,file2.js,file3.js” Minify + Gzip

  71. Responsive Behavior

  72. Collapsible Sections

  73. We value all input...

  74. On the desktop... photo: flickrich

  75. ...and on the device Touch & Mouse Events Mouse Events

  76. Normalized Events • vclick • vmousedown • vmouseover • vmouseup

    • vmousecancel
  77. Click - or - Gesture

  78. http://filamentgroup.com/lab/jquery_mobile_pagination_plugin/ Drag pagination

  79. #!hashbang

  80. Less JS execution, faster page loads Single-Page Apps

  81. Degrees of #!%$hashbang <a href=”#foo.html”>Foo</a> <a href=”foo.html”>Foo</a> http://example.com/#!foo.html Not great:

    Less... not great:
  82. Great: history.replaceState http://example.com/#!foo.html http://example.com/foo.html

  83. ...in code. window.addEventListener( “hashchange”, function(){ history.replaceState( {}, document.title, location.hash.replace("#!","" )

    ); }, false );
  84. Many ways to “Save”

  85. Hidden Touch Interface

  86. Even save without JS Simple Form

  87. Extends the ability for a site to meet you where

    you are PE + offline is possible!
  88. Accessibility enhancements

  89. Keep it accessible

  90. Keys + WAI ARIA

  91. pairs with mobile, resolution-independent audible interface

  92. One-Web Challenges

  93. Content Negotiation

  94. What if we treat them like navigation? Landing pages are

    heavy
  95. Anchor-Include Pattern <a href=”path/to/weather.html” data-after=”path/to/weather-fragment.html”> T</a> https://gist.github.com/983328

  96. Ideal Delivery In page source Delivered via Ajax

  97. Ads.

  98. None
  99. Ads are not awesome. • Third-party, potential for conflicts •

    They block content loading • Potentially overtake page • Pixel dimensions, contractually • Filled with document.write
  100. Best. Line. Ever. document.write( “...<noscript>..” );

  101. Dynamically injected, naturally. How we “solve” ads: <iframe>

  102. Resize + Hide + Append

  103. 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” ); }
  104. Not an edge-case. Edge Caching

  105. None
  106. In conclusion... to build sites that are rich without being

    exclusive. We have the tools
  107. None
  108. What about “apps?”

  109. FlipPics http://bit.ly/pBJciO

  110. None
  111. @scottjehl thanks everyone.