Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@BENCALLAHAN The Necessary Intro My name is Ben @bencallahan http://seesparkbox.com http://buildresponsively.com RESPONSIVE RETROFITTING Thursday, December 6, 12

Slide 3

Slide 3 text

@BENCALLAHAN Retrofitting RESPONSIVE RETROFITTING Thursday, December 6, 12

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

@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

Slide 6

Slide 6 text

@BENCALLAHAN What is a Retrofit? 1. How to do it. 2. Managing your client. RESPONSIVE RETROFITTING Thursday, December 6, 12

Slide 7

Slide 7 text

@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

Slide 8

Slide 8 text

@BENCALLAHAN Retrofitting Techniques http://github.com/bencallahan/rwd-retrofitting If you like, you can clone this repository: RESPONSIVE RETROFITTING Thursday, December 6, 12

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

@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

Slide 11

Slide 11 text

@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

Slide 12

Slide 12 text

@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

Slide 13

Slide 13 text

@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

Slide 14

Slide 14 text

@BENCALLAHAN Retrofitting Techniques: Inline Image Styles (demo of /Images) http://github.com/bencallahan/rwd-retrofitting RESPONSIVE RETROFITTING Thursday, December 6, 12

Slide 15

Slide 15 text

@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

Slide 16

Slide 16 text

@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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

@BENCALLAHAN Retrofitting Techniques: Tables (demo of /Tables) http://github.com/bencallahan/rwd-retrofitting RESPONSIVE RETROFITTING Thursday, December 6, 12

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

@BENCALLAHAN Retrofitting Techniques: Media Queries ➡ Large Resolution First ➡ Small Resolution First, Capped RESPONSIVE RETROFITTING Thursday, December 6, 12

Slide 21

Slide 21 text

@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

Slide 22

Slide 22 text

@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

Slide 23

Slide 23 text

@BENCALLAHAN Retrofitting Techniques: Media Queries ➡ Small Resolution First, Capped                yepnope({            test  :  Modernizr.mq(‘(min-­‐width:  0px)’),            yep    :  ‘base.css’,            nope  :  ‘original.css’        });                       RESPONSIVE RETROFITTING Thursday, December 6, 12

Slide 24

Slide 24 text

@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

Slide 25

Slide 25 text

@BENCALLAHAN Other Considerations RESPONSIVE RETROFITTING Thursday, December 6, 12

Slide 26

Slide 26 text

@BENCALLAHAN Retrofitting Techniques: Other Considerations ➡ Touch Target Area ➡ Hover States ➡ Contrast ➡ Prioritization RESPONSIVE RETROFITTING Thursday, December 6, 12

Slide 27

Slide 27 text

@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

Slide 28

Slide 28 text

@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

Slide 29

Slide 29 text

@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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

@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

Slide 36

Slide 36 text

@BENCALLAHAN Client Interaction RESPONSIVE RETROFITTING Thursday, December 6, 12

Slide 37

Slide 37 text

@BENCALLAHAN Client Interaction: Great Need Big Companies + No Mobile Presence + Triple Digit Growth = Anxious Clients RESPONSIVE RETROFITTING Thursday, December 6, 12

Slide 38

Slide 38 text

@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

Slide 39

Slide 39 text

@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

Slide 40

Slide 40 text

@BENCALLAHAN Client Interaction: Proceed Carefully Retrofitting is a step in the right direction. RESPONSIVE RETROFITTING Thursday, December 6, 12

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

@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

Slide 44

Slide 44 text

@BENCALLAHAN Fun with Retrofitting RESPONSIVE RETROFITTING Thursday, December 6, 12

Slide 45

Slide 45 text

@BENCALLAHAN Fun with Retrofitting (demo of Responsive Retrofitting Bookmarklet) RESPONSIVE RETROFITTING Thursday, December 6, 12

Slide 46

Slide 46 text

Thank You! @BENCALLAHAN RESPONSIVE RETROFITTING Ben Callahan President, Sparkbox CSS Dev Conf December 5, 2012 Thursday, December 6, 12