Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@BENCALLAHAN Hello. RETROFITTING SITES FOR RESPONSIVE WEB DESIGN My name is Ben. Monday, September 17, 12

Slide 3

Slide 3 text

@BENCALLAHAN Hello. RETROFITTING SITES FOR RESPONSIVE WEB DESIGN My name is Ben. Idealist & Realist. Monday, September 17, 12

Slide 4

Slide 4 text

@BENCALLAHAN What is a Retrofit? RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Monday, September 17, 12

Slide 5

Slide 5 text

@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

Slide 6

Slide 6 text

@BENCALLAHAN What is a Retrofit? RETROFITTING SITES FOR RESPONSIVE WEB DESIGN 1. How to do it. Monday, September 17, 12

Slide 7

Slide 7 text

@BENCALLAHAN What is a Retrofit? RETROFITTING SITES FOR RESPONSIVE WEB DESIGN 1. How to do it. 2. Managing your client. Monday, September 17, 12

Slide 8

Slide 8 text

@BENCALLAHAN @klayon RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Monday, September 17, 12

Slide 9

Slide 9 text

@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

Slide 10

Slide 10 text

@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

Slide 11

Slide 11 text

@BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: From Fixed to Fluid (demo of Twitter.com) Monday, September 17, 12

Slide 12

Slide 12 text

@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

Slide 13

Slide 13 text

@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

Slide 14

Slide 14 text

@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

Slide 15

Slide 15 text

@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

Slide 16

Slide 16 text

@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

Slide 17

Slide 17 text

@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

Slide 18

Slide 18 text

@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

Slide 19

Slide 19 text

@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

Slide 20

Slide 20 text

@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

Slide 21

Slide 21 text

@BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Tables Monday, September 17, 12

Slide 22

Slide 22 text

@BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Tables (demo of /Tables) http://github.com/bencallahan/rwd-summit-retrofitting Monday, September 17, 12

Slide 23

Slide 23 text

@BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Tables Monday, September 17, 12

Slide 24

Slide 24 text

@BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Media Queries ➡ Large Resolution First ➡ Device Queries ➡ Small Resolution First, Capped Monday, September 17, 12

Slide 25

Slide 25 text

@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

Slide 26

Slide 26 text

@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

Slide 27

Slide 27 text

@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

Slide 28

Slide 28 text

@BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Media Queries ➡ Small Resolution First, Capped 1                if  (  Modernizr.mq('(min-­‐width:  0px)')  )  {            $(  "html"  ).removeClass(  "no-­‐mediaquery"  );            $(  "html"  ).addClass(  "mediaquery"  );          }         Monday, September 17, 12

Slide 29

Slide 29 text

@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

Slide 30

Slide 30 text

@BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Media Queries ➡ Small Resolution First, Capped 2                yepnope({            test  :  Modernizr.mq(‘(min-­‐width:  0px)’),            yep    :  ‘base.css’,            nope  :  ‘original.css’        });                       Monday, September 17, 12

Slide 31

Slide 31 text

@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

Slide 32

Slide 32 text

@BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Other Considerations ➡ Touch Target Area ➡ Hover States ➡ Prioritization Monday, September 17, 12

Slide 33

Slide 33 text

@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

Slide 34

Slide 34 text

@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

Slide 35

Slide 35 text

@BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Other Considerations ➡ Prioritization (http://mobilism.nl) Monday, September 17, 12

Slide 36

Slide 36 text

@BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Retrofitting Techniques: Other Considerations ➡ Prioritization (http://mobilism.nl) Monday, September 17, 12

Slide 37

Slide 37 text

@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

Slide 38

Slide 38 text

@BENCALLAHAN Client Interaction RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Monday, September 17, 12

Slide 39

Slide 39 text

@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

Slide 40

Slide 40 text

@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

Slide 41

Slide 41 text

@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

Slide 42

Slide 42 text

@BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Client Interaction: Proceed Carefully Retrofitting is a step in the right direction. Monday, September 17, 12

Slide 43

Slide 43 text

@BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Client Interaction: Proceed Carefully Make sure you’re capturing analytics. Monday, September 17, 12

Slide 44

Slide 44 text

@BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Constantly remind them of the user. Client Interaction: Proceed Carefully Monday, September 17, 12

Slide 45

Slide 45 text

@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

Slide 46

Slide 46 text

@BENCALLAHAN Fun with Retrofitting RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Monday, September 17, 12

Slide 47

Slide 47 text

@BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Fun with Retrofitting (demo of Responsive Retrofitting Bookmarklet) Monday, September 17, 12

Slide 48

Slide 48 text

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