Recommended
More Related Content
What's hot
What's hot (20)
Similar to Responsive & Responsible: Implementing Responsive Design at Scale
Similar to Responsive & Responsible: Implementing Responsive Design at Scale (20)
Recently uploaded
Recently uploaded (20)
Responsive & Responsible: Implementing Responsive Design at Scale
- 1. Responsive & Responsible Scott Jehl filament group
- 2. We design engaging sites and filament group applications that are simple to use and accessible to all.
- 3. “An escalator can never break: it can only become stairs. ” Mitch Hedberg
- 4. Responsive Design A natural subset of Progressive Enhancement.
- 5. Responsible Delightful and inclusive.
- 6. Inclusive Delightful It works in my It feels intuitive. browser. It’s fun to use! It allows me to complete my task It’s damned fast!
- 7. Make it work everywhere. ...and work especially well in newer browsers!
- 8. There are, in fact, Many ways to skin an app.
- 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. PE, done right, is hard. Make no mistake!
- 12. A proposition: A layered approach can be rich, without being exclusive.
- 13. Talk = cheap.
- 14. We built something. Let’s tear it apart, shall we?
- 15. A One-Web Case Study
- 17. Design-velopment Team @mirandamulligan @filamentgroup @beep @upstatement
- 20. Responsive. But is it responsible?
- 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. Experience Divisions Defensive Development = Qualified Upgrades
- 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”
- 31. “If you’re awesome, or you’re Internet Explorer, you get enhanced.” Ethan Marcotte
- 32. @media-fortified design. <link href="enhanced.css" media="only all">
- 33. 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>
- 34. The Concatenator
- 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. Basic.js: “just enough” • ResponsiveImages.js • Respond.js • Modernizr / extensions / HTML5 Shim • The Boston Globe JS Framework
- 43. Also.
- 44. Responsive Images <img src=”foo.r.jpg” data-fullsrc=”foo.lrg.jpg” />
- 45. Edge Cases
- 46. Edge Cases
- 47. Respond.js Now available as part of https://github.com/scottjehl/Respond
- 48. Also: matchMedia polyfill github.com/paulirish/matchMedia.js window.matchMedia( “only all” );
- 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. And one caveat... No Enhanced JS for BB5 great browser, too slow.
- 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.
- 60. Loading Assets
- 61. Enhanced page weight Different for every browser. Highly optimized.
- 62. The assets you receive depend on width, section, features ~ hand-crafted delivery ~
- 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
- 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
- 79. #!hashbang
- 80. Single-Page Apps Less JS execution, faster page loads
- 81. Degrees of #!%$hashbang Not great: Less... not great: <a href=”#foo.html”>Foo</a> <a href=”foo.html”>Foo</a> 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”
- 86. Even save without JS Simple Form
- 87. PE + offline is possible! Extends the ability for a site to meet you where you are
- 90. Keys + WAI ARIA
- 91. audible interface pairs with mobile, resolution-independent
- 94. Landing pages are heavy What if we treat them like navigation?
- 96. Ideal Delivery In page source Delivered via Ajax
- 97. Ads.
- 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. How we “solve” ads: <iframe> Dynamically injected, naturally.
- 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. Edge Caching Not an edge-case.
- 106. In conclusion... We have the tools to build sites that are rich without being exclusive.
- 108. What about “apps?”
- 111. thanks everyone. @scottjehl