$30 off During Our Annual Pro Sale. View Details »

Responsive & Responsible

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

scottjehl

September 26, 2011
Tweet

More Decks by scottjehl

Other Decks in Design

Transcript

  1. 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!
  2. Should it be responsive? • Commonality across experiences • Developer

    Skillset • Time up-front vs. maintenance • Interest in a challenge
  3. Asset Baseline • Basic CSS file • Basic JS file

    • Qualified Enhanced CSS file
  4. “Basic” = safe defaults • Tweaks to browser typography •

    Horizontal rules • Text alignment • Display: Inline / Block • No complex layout or positioning
  5. <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>
  6. 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){ .. }
  7. Ems all the way down. Ems allow for components to

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

    Shim • The Boston Globe JS Framework Basic.js: “just enough”
  9. Internet Explorer Flags <!--[if lt IE 7 ]> <html lang="en"

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

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

    browsers! return; } else{ //remove Basic CSS //bring on the enhancements }
  12. On removing Basic.css... head.removeChild( basicCSS ); • Convenient when basic.css

    does not easily cascade. • A convenience that can’t be guaranteed.
  13. Defining Assets to Load //Arrays of JS and CSS files

    globe.jsToLoad = [ “jquery.js” ]; globe.cssToLoad = []; jQuery is dynamically-loaded too!
  14. Why Screen, not viewport? • Fixed per device • Assets

    delivered to device’s potential, not just current state. • Orientation-change makes resize relevant again.
  15. Extends the ability for a site to meet you where

    you are PE + offline is possible!
  16. Ads are not awesome. • Third-party, potential for conflicts •

    They block content loading • Potentially overtake page • Pixel dimensions, contractually • Filled with document.write
  17. 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” ); }