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

Responsive Retrofitting from CSS Dev Conf 2012 in Honolulu, HI

Ben Callahan
December 05, 2012

Responsive Retrofitting from CSS Dev Conf 2012 in Honolulu, HI

Deck from my presentation on responsive retrofitting at CSS Dev Conf in Honolulu, HI on December 5, 2012.

Ben Callahan

December 05, 2012
Tweet

More Decks by Ben Callahan

Other Decks in Design

Transcript

  1. Ben Callahan President, Sparkbox
    CSS Dev Conf December 5, 2012
    Responsive Retrofitting
    @BENCALLAHAN
    http://github.com/bencallahan/rwd-retrofitting
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  2. @BENCALLAHAN
    The Necessary Intro
    My name is Ben
    @bencallahan
    http://seesparkbox.com
    http://buildresponsively.com
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  3. @BENCALLAHAN
    Retrofitting
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  4. @BENCALLAHAN
    What is a Retrofit?
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  5. @BENCALLAHAN
    What is a Retrofit?
    Finding the fastest and lowest-risk approach
    to creating a better experience on an existing
    site for users of any size screen.
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  6. @BENCALLAHAN
    What is a Retrofit?
    1. How to do it.
    2. Managing your client.
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  7. @BENCALLAHAN
    @klayon
    ...performance is important, but access is
    more important. Mobile later is better than
    mobile never.
    From “Responsive images for mobile: don’t sweat it” (http://tiny.cc/vr24gw)
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  8. @BENCALLAHAN
    Retrofitting Techniques
    http://github.com/bencallahan/rwd-retrofitting
    If you like, you can clone this repository:
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  9. @BENCALLAHAN
    Retrofitting Techniques: From Fixed to Fluid
    (demo of Twitter.com)
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  10. @BENCALLAHAN
    Retrofitting Techniques: From Fixed to Fluid
    ➡ Demo of Twitter.com
    http://www.alistapart.com/articles/fluidgrids/
    target  /  context  =  result
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  11. @BENCALLAHAN
    Retrofitting Techniques: From Fixed to Fluid
    ➡ Demo of Twitter.com
    http://www.alistapart.com/articles/fluidgrids/
    target  /  context  =  result
    302  /  837  =  36.08%
    522  /  837  =  62.37%
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  12. @BENCALLAHAN
    Retrofitting Techniques: From Fixed to Fluid
    ➡ Demo of Twitter.com
    http://paulirish.com/2012/box-sizing-border-box-ftw/
    *  {
         -­‐moz-­‐box-­‐sizing:  border-­‐box;
         -­‐webkit-­‐box-­‐sizing:  border-­‐box;
         box-­‐sizing:  border-­‐box;
    }
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  13. @BENCALLAHAN
    Retrofitting Techniques: From Fixed to Fluid
    ➡ Demo of Twitter.com
    /*  some  css  */
    @media  (max-­‐width:  500px)  {
         /*  css  for  500px  and  lower  */
    }
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  14. @BENCALLAHAN
    Retrofitting Techniques: Inline Image Styles
    (demo of /Images)
    http://github.com/bencallahan/rwd-retrofitting
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  15. @BENCALLAHAN
    Retrofitting Techniques: Inline Image Styles
    ➡ Support
    ‣ FireFox 5+ Win/Mac
    ‣ IE7+ (exception: IE8 & min-width)
    ‣ Chrome 14+ Win/Mac
    ‣ Safari 4+ Win, 5+ Mac
    ‣ Opera 10+ Win, 11+ Mac
    ‣ Mobile Safari (iOS 5)
    ‣ Android Browser 2.3+
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  16. @BENCALLAHAN
    Retrofitting Techniques: Background Images
    Tim Kadlec on timkadlec.com
    “Media Query & Asset Downloading Results”
    ‣ display: none on parent element
    ‣ specify all background images inside media queries
    http://timkadlec.com/2012/04/media-query-asset-downloading-results/
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  17. @BENCALLAHAN
    Retrofitting Techniques: Tables
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  18. @BENCALLAHAN
    Retrofitting Techniques: Tables
    (demo of /Tables)
    http://github.com/bencallahan/rwd-retrofitting
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  19. @BENCALLAHAN
    Retrofitting Techniques: Tables
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  20. @BENCALLAHAN
    Retrofitting Techniques: Media Queries
    ➡ Large Resolution First
    ➡ Small Resolution First, Capped
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  21. @BENCALLAHAN
    Retrofitting Techniques: Media Queries
    ➡ Large Resolution First
    /*  FILE:  main.css  */
    /*  all  your  original  styles  */
    @media  (max-­‐width:  53em)  {
       /*  styles  for  53em  and  lower  */
    }
    @media  (max-­‐width:  37em)  {
       /*  styles  for  37em  and  lower  */
    }
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  22. @BENCALLAHAN
    Retrofitting Techniques: Media Queries
    ➡ Small Resolution First, Capped
    ‣ Serve the original CSS to large viewports
    ‣ Serve mobile-first CSS to small viewports
    ‣ No changes to original CSS
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  23. @BENCALLAHAN
    Retrofitting Techniques: Media Queries
    ➡ Small Resolution First, Capped


       
       <br/>        yepnope({<br/>            test  :  Modernizr.mq(‘(min-­‐width:  0px)’),<br/>            yep    :  ‘base.css’,<br/>            nope  :  ‘original.css’<br/>        });  <br/>    
       
           
       

    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  24. @BENCALLAHAN
    Retrofitting Techniques: Media Queries
    ➡ Small Resolution First, Capped
    @media (max-width: 979px) {
    @import "small";
    }
    @media (min-width: 661px) and (max-width: 979px) {
    @import "medium";
    }
    @media (min-width: 980px) {
    @import "original";
    }
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  25. @BENCALLAHAN
    Other Considerations
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  26. @BENCALLAHAN
    Retrofitting Techniques: Other Considerations
    ➡ Touch Target Area
    ➡ Hover States
    ➡ Contrast
    ➡ Prioritization
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  27. @BENCALLAHAN
    Retrofitting Techniques: Other Considerations
    ➡ Touch Target Area
    ‣ Apple recommends minimum 44px X 44px
    ‣ This is based on non-retina displays
    ‣ Using padding instead of margin
    ‣ Consider increasing font-size at smaller resolutions
    http://www.lukew.com/ff/entry.asp?1085
    http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/
    DesigningNativeApp/DesigningNativeApp.html#//apple_ref/doc/uid/TP40006556-CH4-SW1
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  28. @BENCALLAHAN
    Retrofitting Techniques: Other Considerations
    ➡ Hover States
    ‣ Consider using modernizr
    a {
    /* standard styles */
    }
    .no-touch a:hover {
    /* :hover styles */
    }
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  29. @BENCALLAHAN
    Retrofitting Techniques: Other Considerations
    ➡ Contrast
    ‣ Try your site outside in the sun
    ‣ Try your site in bed when it’s dark
    ‣ Take it with you
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  30. @BENCALLAHAN
    Retrofitting Techniques: Other Considerations
    ➡ Prioritization
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  31. @BENCALLAHAN
    Retrofitting Techniques: Other Considerations
    ➡ Prioritization
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  32. @BENCALLAHAN
    Retrofitting Techniques: Other Considerations
    ➡ Prioritization
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  33. @BENCALLAHAN
    Retrofitting Techniques: Other Considerations
    ➡ Prioritization (http://mobilism.nl)
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  34. @BENCALLAHAN
    Retrofitting Techniques: Other Considerations
    ➡ Prioritization (http://mobilism.nl)
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  35. @BENCALLAHAN
    Retrofitting Techniques: Other Considerations
    ➡ Prioritization
    ‣ Instead of adding/removing content, prioritize
    ‣ Generally requires ability to change HTML
    ‣ Use CSS to show/hide small prioritized blocks
    ‣ Sometimes this is all we can do, every bit helps
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  36. @BENCALLAHAN
    Client Interaction
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  37. @BENCALLAHAN
    Client Interaction: Great Need
    Big Companies
    + No Mobile Presence
    + Triple Digit Growth
    = Anxious Clients
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  38. @BENCALLAHAN
    Client Interaction: Great Need
    Less than Half the Cost
    + Less than Half the Time
    + Increased Conversions
    = Desperate Clients
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  39. @BENCALLAHAN
    Client Interaction: When It’s Right
    ➡ Evaluate the Project
    ‣ Solid UX at higher widths?
    ‣ Semantic markup?
    ‣ Immediate need?
    ‣ Real benefit for the user?
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  40. @BENCALLAHAN
    Client Interaction: Proceed Carefully
    Retrofitting is a step in
    the right direction.
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  41. @BENCALLAHAN
    Client Interaction: Proceed Carefully
    Make sure you’re
    capturing analytics.
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  42. @BENCALLAHAN
    Constantly remind them
    of the user.
    Client Interaction: Proceed Carefully
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  43. @BENCALLAHAN
    When you’re done and
    they ask for more...
    Client Interaction: Proceed Carefully
    ...push for even better
    experiences!
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  44. @BENCALLAHAN
    Fun with Retrofitting
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  45. @BENCALLAHAN
    Fun with Retrofitting
    (demo of Responsive Retrofitting Bookmarklet)
    RESPONSIVE RETROFITTING
    Thursday, December 6, 12

    View Slide

  46. Thank You!
    @BENCALLAHAN
    RESPONSIVE RETROFITTING
    Ben Callahan President, Sparkbox
    CSS Dev Conf December 5, 2012
    Thursday, December 6, 12

    View Slide