Responsive & Responsible: Implementing Responsive Design at Scale
Upcoming SlideShare
Loading in...5

Responsive & Responsible: Implementing Responsive Design at Scale



Presentation given at Breaking Development Conference, September 2011.

Presentation given at Breaking Development Conference, September 2011.



Total Views
Views on SlideShare
Embed Views



1 Embed 1 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

Responsive & Responsible: Implementing Responsive Design at Scale Responsive & Responsible: Implementing Responsive Design at Scale Presentation Transcript

  • Responsive &ResponsibleScott Jehl filament group
  • We design engaging sites andfilament group applications that are simple to use and accessible to all.
  • “An escalator can never break: it can only become stairs. ”Mitch Hedberg
  • Responsive DesignA natural subset of Progressive Enhancement.
  • Responsible Delightful and inclusive.
  • 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!
  • Make it work everywhere....and work especially well in newer browsers!
  • There are, in fact,Many ways to skin an app.
  • “it depends.”- Every speaker at this conference.
  • Should it be responsive?• Commonality across experiences• Developer Skillset• Time up-front vs. maintenance• Interest in a challenge
  • PE, done right, is hard. Make no mistake!
  • A proposition:A layered approach can be rich, without being exclusive.
  • Talk = cheap.
  • We built something. Let’s tear it apart, shall we?
  • A One-Web Case Study
  • Design-velopment Team @mirandamulligan @filamentgroup @beep @upstatement
  • Responsive. But is it responsible?
  • Areas of ResponsibilityAccessibility PerformanceUsability Sustainability
  • Responsive... ble baseline• “Content” first• Mobile-first images• Mobile-friendly layout
  • Asset Baseline• Basic CSS file• Basic JS file• Qualified Enhanced CSS file
  • Experience Divisions Defensive Development = Qualified Upgrades
  • Basic CSS
  • “Basic” = safe defaults• Tweaks to browser typography• Horizontal rules• Text alignment• Display: Inline / Block• No complex layout or positioning
  • “Basic”
  • Enhanced Experience
  • The @media qualifier
  • “If you’re awesome, or you’re Internet Explorer, you get enhanced.”Ethan Marcotte
  • @media-fortified design.<link href="enhanced.css" media="only all">
  • 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>
  • The Concatenator
  • Server-side Concatenation<link href=”css/file1.css,file2.css,file3.css”..> Minify + Gzip
  • 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){ .. }
  • Inheritance Prevention@media all and (min-width: 500px)and (max-width: 700px){ /* styles constrained to 500-700px */}
  • LeftRight Left
  • Display: table + table-cell
  • Ems all the way down. Ems allow for components to adapt differently in different containers
  • Basic.js: “just enough”• ResponsiveImages.js• Respond.js• Modernizr / extensions / HTML5 Shim• The Boston Globe JS Framework
  • Also.
  • Responsive Images<img src=”foo.r.jpg” data-fullsrc=”foo.lrg.jpg”/>
  • Edge Cases
  • Edge Cases
  • Respond.js Now available as part of
  • Also: matchMedia polyfill window.matchMedia( “only all” );
  • Globe JS Framework
  • The globe, um... global. globe = {};
  • Feature flags from
  • Internet Explorer Flags<!--[if lt IE 7 ]> <html lang="en"class="ie ie6"> <![endif]-->globe.browser.ie6 = document.documentElement .className.indexOf( “ie6” ) >= 0;
  • Again, with the @mediaglobe.enhanced = respond.mediaQueriesSupported || globe.browser.ie6 || globe.browser.ie7 || globe.browser.ie8; Conditional-comment driven
  • JS Experience Divideif( !globe.enhanced ){ //last stop for old browsers! return;}else{ //remove Basic CSS //bring on the enhancements}
  • And one caveat...No Enhanced JS for BB5 great browser, too slow.
  • No JS? That’s okay.
  • On removing Basic.css... head.removeChild( basicCSS );• Convenient when basic.css does not easily cascade.• A convenience that can’t be guaranteed.
  • Enhancing Further
  • Loading Assets
  • Enhanced page weight Different for every browser. Highly optimized.
  • The assets you receive depend onwidth, section, features ~ hand-crafted delivery ~
  • Defining Assets to Load//Arrays of JS and CSS filesglobe.jsToLoad = [ “jquery.js” ];globe.cssToLoad = []; jQuery is dynamically-loaded too!
  • Feature-based Loadingif( ){ jsToLoad.push( “touchEvents.js” );}
  • Section-specific Loadingif( globe.hasClass( “gallery”, body ) ){ jsToLoad.push( “galleries.js” );}
  • Device Size Decisionsif( window.screen.width > 500 ){ cssToLoad.push( “fonts.css” );} screen, not window
  • Our width usage rule of thumb:screen for assetswindow for design
  • Why Screen, not viewport? • Fixed per device • Assets delivered to device’s potential, not just current state. • Orientation-change makes resize relevant again.
  • Pack & Loadglobe.load.script( jsToLoad.join(",")); cssToLoad.join(","));
  • Again, concat.“js/file1.js,file2.js,file3.js” Minify + Gzip
  • Responsive Behavior
  • Collapsible Sections
  • We value all input...
  • On the desktop... photo: flickrich
  • ...and on the deviceTouch & MouseEventsMouse Events
  • Normalized Events• vclick• vmousedown• vmouseover• vmouseup• vmousecancel
  • Click - or - Gesture
  • Drag pagination
  • #!hashbang
  • Single-Page Apps Less JS execution, faster page loads
  • Degrees of #!%$hashbangNot great: Less... not great:<a href=”#foo.html”>Foo</a> <a href=”foo.html”>Foo</a>!foo.html
  • Great:history.replaceState!foo.html
  • code.window.addEventListener( “hashchange”, function(){ history.replaceState( {}, document.title, location.hash.replace("#!","" ) ); }, false );
  • Many ways to “Save”
  • Hidden Touch Interface
  • Even save without JS Simple Form
  • PE + offline is possible! Extends the ability for a site to meet you where you are
  • Accessibilityenhancements
  • Keep it accessible
  • Keys + WAI ARIA
  • audible interfacepairs with mobile, resolution-independent
  • One-Web Challenges
  • Content Negotiation
  • Landing pages are heavy What if we treat them like navigation?
  • Anchor-Include Pattern<a href=”path/to/weather.html”data-after=”path/to/weather-fragment.html”>T</a>
  • Ideal Delivery In page source Delivered via Ajax
  • Ads.
  • Ads are not awesome.• Third-party, potential for conflicts• They block content loading• Potentially overtake page• Pixel dimensions, contractually• Filled with document.write
  • Best. Line. Ever.document.write( “...<noscript>..” );
  • How we “solve” ads: <iframe>Dynamically injected, naturally.
  • Resize + Hide + Append
  • 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” );}
  • Edge Caching Not an edge-case.
  • In conclusion... We have the toolsto build sites that are rich without being exclusive.
  • What about “apps?”
  • FlipPics
  • thanks everyone. @scottjehl