Responsive Retrofitting from CSS Dev Conf 2012 in Honolulu, HI

Fe8510ee8e06c36d02799dbf8f934b9c?s=47 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.

Fe8510ee8e06c36d02799dbf8f934b9c?s=128

Ben Callahan

December 05, 2012
Tweet

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
  2. @BENCALLAHAN The Necessary Intro My name is Ben @bencallahan http://seesparkbox.com

    http://buildresponsively.com RESPONSIVE RETROFITTING Thursday, December 6, 12
  3. @BENCALLAHAN Retrofitting RESPONSIVE RETROFITTING Thursday, December 6, 12

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

    12
  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
  6. @BENCALLAHAN What is a Retrofit? 1. How to do it.

    2. Managing your client. RESPONSIVE RETROFITTING Thursday, December 6, 12
  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
  8. @BENCALLAHAN Retrofitting Techniques http://github.com/bencallahan/rwd-retrofitting If you like, you can clone

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

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

    RESPONSIVE RETROFITTING Thursday, December 6, 12
  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
  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
  17. @BENCALLAHAN Retrofitting Techniques: Tables RESPONSIVE RETROFITTING Thursday, December 6, 12

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

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

  20. @BENCALLAHAN Retrofitting Techniques: Media Queries ➡ Large Resolution First ➡

    Small Resolution First, Capped RESPONSIVE RETROFITTING Thursday, December 6, 12
  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
  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
  23. @BENCALLAHAN Retrofitting Techniques: Media Queries ➡ Small Resolution First, Capped

    <html  class=”no-­‐js”> <head>    <script  src=”/js/modernizr.js”></script>    <script>        yepnope({            test  :  Modernizr.mq(‘(min-­‐width:  0px)’),            yep    :  ‘base.css’,            nope  :  ‘original.css’        });      </script>    <noscript>        <link  rel="stylesheet"  href="original.css">    </noscript> </head> RESPONSIVE RETROFITTING Thursday, December 6, 12
  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
  25. @BENCALLAHAN Other Considerations RESPONSIVE RETROFITTING Thursday, December 6, 12

  26. @BENCALLAHAN Retrofitting Techniques: Other Considerations ➡ Touch Target Area ➡

    Hover States ➡ Contrast ➡ Prioritization RESPONSIVE RETROFITTING Thursday, December 6, 12
  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
  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
  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
  30. @BENCALLAHAN Retrofitting Techniques: Other Considerations ➡ Prioritization RESPONSIVE RETROFITTING Thursday,

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

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

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

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

    Thursday, December 6, 12
  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
  36. @BENCALLAHAN Client Interaction RESPONSIVE RETROFITTING Thursday, December 6, 12

  37. @BENCALLAHAN Client Interaction: Great Need Big Companies + No Mobile

    Presence + Triple Digit Growth = Anxious Clients RESPONSIVE RETROFITTING Thursday, December 6, 12
  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
  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
  40. @BENCALLAHAN Client Interaction: Proceed Carefully Retrofitting is a step in

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

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

    Carefully RESPONSIVE RETROFITTING Thursday, December 6, 12
  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
  44. @BENCALLAHAN Fun with Retrofitting RESPONSIVE RETROFITTING Thursday, December 6, 12

  45. @BENCALLAHAN Fun with Retrofitting (demo of Responsive Retrofitting Bookmarklet) RESPONSIVE

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

    Dev Conf December 5, 2012 Thursday, December 6, 12