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.

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