Responsive Retrofitting for Refresh LX, 2012

Transcript

1. Ben Callahan President, Sparkbox Refresh LX September 20 & 21,

   2012 Responsive Retrofitting RESPONSIVE RETROFITTING @BENCALLAHAN http://github.com/bencallahan/rwd-retrofitting Friday, September 21, 12

2. @BENCALLAHAN What is a Retrofit? RESPONSIVE RETROFITTING Friday, September 21,

   12

3. @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 Friday, September 21, 12

4. @BENCALLAHAN What is a Retrofit? 1. How to do it.

   2. Managing your client. RESPONSIVE RETROFITTING Friday, September 21, 12

5. @BENCALLAHAN Retrofitting Techniques http://github.com/bencallahan/rwd-retrofitting If you like, you can clone

   this repository: RESPONSIVE RETROFITTING Friday, September 21, 12

6. @BENCALLAHAN Retrofitting Techniques: From Fixed to Fluid (demo of Twitter.com)

   RESPONSIVE RETROFITTING Friday, September 21, 12

7. @BENCALLAHAN Retrofitting Techniques: From Fixed to Fluid ➡ Demo of

   Twitter.com http://www.alistapart.com/articles/fluidgrids/ target  /  context  =  result RESPONSIVE RETROFITTING Friday, September 21, 12

8. @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 Friday, September 21, 12

9. @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 Friday, September 21, 12

10. @BENCALLAHAN Retrofitting Techniques: From Fixed to Fluid ➡ Semantic Grid

    Systems ‣ http://semantic.gs ‣ http://susy.oddbird.net RESPONSIVE RETROFITTING Friday, September 21, 12

11. @BENCALLAHAN Retrofitting Techniques: From Fixed to Fluid @column-­‐width:  60; @gutter-­‐width:

     20; @columns:  12; @total-­‐width:  100%; header  {  .column(12);  } article  {  .column(12);  } aside  {  .column(12);  } @media  (min-­‐width:  38em)  {      article  {  .column(8);  }      aside  {  .column(4);  } } RESPONSIVE RETROFITTING Friday, September 21, 12

12. @BENCALLAHAN Retrofitting Techniques: Inline Image Styles (demo of /Images) http://github.com/bencallahan/rwd-retrofitting

    RESPONSIVE RETROFITTING Friday, September 21, 12

13. @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 Friday, September 21, 12

14. @BENCALLAHAN Retrofitting Techniques: Tables RESPONSIVE RETROFITTING Friday, September 21, 12

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

    Friday, September 21, 12

16. @BENCALLAHAN Retrofitting Techniques: Tables RESPONSIVE RETROFITTING Friday, September 21, 12

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

    Small Resolution First, Capped RESPONSIVE RETROFITTING Friday, September 21, 12

18. @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 Friday, September 21, 12

19. @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 Friday, September 21, 12

20. @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 Friday, September 21, 12

21. @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 Friday, September 21, 12

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

    Hover States ➡ Contrast ➡ Prioritization RESPONSIVE RETROFITTING Friday, September 21, 12

23. @BENCALLAHAN Retrofitting Techniques: Other Considerations ➡ Hover States ‣ Consider

    using modernizr a { /* standard styles */ } .no-touch a:hover { /* :hover styles */ } RESPONSIVE RETROFITTING Friday, September 21, 12

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

    Hover States ➡ Contrast ➡ Prioritization RESPONSIVE RETROFITTING Friday, September 21, 12

25. @BENCALLAHAN Client Interaction RESPONSIVE RETROFITTING Friday, September 21, 12

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

    Presence + Triple Digit Mobile Growth = Anxious Clients RESPONSIVE RETROFITTING Friday, September 21, 12

27. @BENCALLAHAN Client Interaction: Great Need Less than Half the Cost

    + Less than Half the Time + Increased Conversions = Desperate Clients RESPONSIVE RETROFITTING Friday, September 21, 12

28. @BENCALLAHAN Client Interaction: When It’s Right ➡ Evaluate the Project

    ‣ Solid UX at higher widths? ‣ Semantic markup? ‣ Can’t start over? ‣ Real benefit for the user? RESPONSIVE RETROFITTING Friday, September 21, 12

29. @BENCALLAHAN Client Interaction: Proceed Carefully Retrofitting is a step in

    the right direction. RESPONSIVE RETROFITTING Friday, September 21, 12

30. @BENCALLAHAN Client Interaction: Proceed Carefully Make sure you’re capturing analytics.

    RESPONSIVE RETROFITTING Friday, September 21, 12

31. @BENCALLAHAN If you’re not doing a retrofit for your site’s

    users, you’re doing it for the wrong reason. Client Interaction: Proceed Carefully RESPONSIVE RETROFITTING Friday, September 21, 12

32. @BENCALLAHAN When you’re done and they ask for more... Client

    Interaction: Proceed Carefully ...push for even better experiences! RESPONSIVE RETROFITTING Friday, September 21, 12

33. @BENCALLAHAN Fun with Retrofitting RESPONSIVE RETROFITTING Friday, September 21, 12

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

    RETROFITTING Friday, September 21, 12

35. Responsive Retrofitting @BENCALLAHAN @bencallahan RESPONSIVE RETROFITTING Ben Callahan President, Sparkbox

    Refresh LX September 20 & 21, 2012 Friday, September 21, 12