Retrofitting Sites for Responsive Web Design

From my presentation at the RWD Summit on August 28, 2012 by Environments for Humans.

Transcript

1. Ben Callahan President, Sparkbox RWD Summit August 28, 2012 Retrofitting Sites for Responsive Web Design RETROFITTING SITES FOR RESPONSIVE WEB DESIGN @BENCALLAHAN http://github.com/bencallahan/rwd-summit-retrofitting Monday, September 17, 12
2. @BENCALLAHAN Hello. RETROFITTING SITES FOR RESPONSIVE WEB DESIGN My name is Ben. Monday, September 17, 12
3. @BENCALLAHAN Hello. RETROFITTING SITES FOR RESPONSIVE WEB DESIGN My name is Ben. Idealist & Realist. Monday, September 17, 12
4. @BENCALLAHAN What is a Retrofit? RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Monday, September 17, 12
5. @BENCALLAHAN What is a Retrofit? RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Finding the fastest and lowest-risk approach to creating a better experience for users of any size screen. Monday, September 17, 12
6. @BENCALLAHAN What is a Retrofit? RETROFITTING SITES FOR RESPONSIVE WEB DESIGN 1. How to do it. Monday, September 17, 12
7. @BENCALLAHAN What is a Retrofit? RETROFITTING SITES FOR RESPONSIVE WEB DESIGN 1. How to do it. 2. Managing your client. Monday, September 17, 12
8. @BENCALLAHAN @klayon RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Monday, September 17, 12
9. @BENCALLAHAN @klayon RETROFITTING SITES FOR RESPONSIVE WEB DESIGN ...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) Monday, September 17, 12
10. @BENCALLAHAN Retrofitting Techniques RETROFITTING SITES FOR RESPONSIVE WEB DESIGN http://github.com/bencallahan/rwd-summit-retrofitting You should clone this repo: Monday, September 17, 12
11. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: From Fixed to Fluid (demo of Twitter.com) Monday, September 17, 12
12. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: From Fixed to Fluid ➡ Demo of Twitter.com http://www.alistapart.com/articles/fluidgrids/ target  /  context  =  result Monday, September 17, 12
13. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN 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% Monday, September 17, 12
14. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN 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; } Monday, September 17, 12
15. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: From Fixed to Fluid ➡ Semantic Grid Systems ‣ http://semantic.gs ‣ http://susy.oddbird.net Monday, September 17, 12
16. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN 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);  } } Monday, September 17, 12
17. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Inline Image Styles (demo of /Images) http://github.com/bencallahan/rwd-summit-retrofitting Monday, September 17, 12
18. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN 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+ Monday, September 17, 12
19. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Inline Image Styles Chris Coyier on css-tricks.com “Override Inline Styles with CSS” http://css-tricks.com/override-inline-styles-with-css/ Monday, September 17, 12
20. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN 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/ Monday, September 17, 12
21. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Tables Monday, September 17, 12
22. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Tables (demo of /Tables) http://github.com/bencallahan/rwd-summit-retrofitting Monday, September 17, 12
23. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Tables Monday, September 17, 12
24. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Media Queries ➡ Large Resolution First ➡ Device Queries ➡ Small Resolution First, Capped Monday, September 17, 12
25. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN 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  */ } Monday, September 17, 12
26. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Media Queries ➡ Device Queries /*  FILE:  main.css  */ /*  all  your  original  styles  */ @media  (max-­‐device-­‐width:  850px)  {    /*  styles  for  850px  and  lower  */ } @media  (max-­‐device-­‐width:  600px)  {    /*  styles  for  600px  and  lower  */ } Monday, September 17, 12
27. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN 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 Monday, September 17, 12
28. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Media Queries ➡ Small Resolution First, Capped 1 <html  class=”no-­‐js  no-­‐mediaquery”> <head>    <script  src=”/js/modernizr.js”></script>    <script>        if  (  Modernizr.mq('(min-­‐width:  0px)')  )  {            $(  "html"  ).removeClass(  "no-­‐mediaquery"  );            $(  "html"  ).addClass(  "mediaquery"  );          }    </script>    <link  rel="stylesheet"  href="/css/base.css"> </head> Monday, September 17, 12
29. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Media Queries ➡ Small Resolution First, Capped 1 /*  if  JS  disabled  OR  media  queries  aren't  supported  */ .no-­‐mediaquery  {    @import  "original"; } .mediaquery  {    @media  (max-­‐width:  979px)  {        @import  "small";    }    @media  (min-­‐width:  661px)  and  (max-­‐width:  979px)  {        @import  "medium";    }    @media  (min-­‐width:  980px)  {        @import  "original";    } } Monday, September 17, 12
30. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Media Queries ➡ Small Resolution First, Capped 2 <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> Monday, September 17, 12
31. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Media Queries ➡ Small Resolution First, Capped 2 @media (max-width: 979px) { @import "small"; } @media (min-width: 661px) and (max-width: 979px) { @import "medium"; } @media (min-width: 980px) { @import "original"; } Monday, September 17, 12
32. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Other Considerations ➡ Touch Target Area ➡ Hover States ➡ Prioritization Monday, September 17, 12
33. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN 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 Monday, September 17, 12
34. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Other Considerations ➡ Hover States ‣ Consider using modernizr a { /* standard styles */ } .no-touch a:hover { /* :hover styles */ } Monday, September 17, 12
35. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Other Considerations ➡ Prioritization (http://mobilism.nl) Monday, September 17, 12
36. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Other Considerations ➡ Prioritization (http://mobilism.nl) Monday, September 17, 12
37. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN 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 Monday, September 17, 12
38. @BENCALLAHAN Client Interaction RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Monday, September 17, 12
39. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Client Interaction: Great Need Big Companies + No Mobile Presence + Triple Digit Growth = Anxious Clients Monday, September 17, 12
40. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Client Interaction: Great Need Less than Half the Cost + Less than Half the Time + Increased Conversions = Desperate Clients Monday, September 17, 12
41. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Client Interaction: When It’s Right ➡ Evaluate the Project ‣ Solid UX at higher widths? ‣ Semantic markup? ‣ Can’t start over? ‣ Immediate need? ‣ Real benefit for the user? Monday, September 17, 12
42. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Client Interaction: Proceed Carefully Retrofitting is a step in the right direction. Monday, September 17, 12
43. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Client Interaction: Proceed Carefully Make sure you’re capturing analytics. Monday, September 17, 12
44. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Constantly remind them of the user. Client Interaction: Proceed Carefully Monday, September 17, 12
45. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN When you’re done and they ask for more... Client Interaction: Proceed Carefully ...push for even better experiences! Monday, September 17, 12
46. @BENCALLAHAN Fun with Retrofitting RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Monday, September 17, 12
47. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Fun with Retrofitting (demo of Responsive Retrofitting Bookmarklet) Monday, September 17, 12
48. Ben Callahan President, Sparkbox RWD Summit August 28, 2012 Retrofitting Sites for Responsive Web Design RETROFITTING SITES FOR RESPONSIVE WEB DESIGN @BENCALLAHAN @bencallahan Monday, September 17, 12