InControl Honolulu, HI 2012 Mobile Workshop

Fe8510ee8e06c36d02799dbf8f934b9c?s=47 Ben Callahan
December 02, 2012

InControl Honolulu, HI 2012 Mobile Workshop

Deck from my half of the mobile workshop with Karen McGrane which we presented at InControl Honolulu 2012.

Fe8510ee8e06c36d02799dbf8f934b9c?s=128

Ben Callahan

December 02, 2012
Tweet

Transcript

  1. Ben Callahan President, Sparkbox In Control 2012 December 2, 2012

    Mobile Workshop @BENCALLAHAN http://bit.ly/LWLTEA RESPONSIVE WEB DESIGN Thursday, December 6, 12
  2. September 9, 2007 6:30am @BENCALLAHAN RESPONSIVE WEB DESIGN Thursday, December

    6, 12
  3. @BENCALLAHAN RESPONSIVE WEB DESIGN Thursday, December 6, 12

  4. 52% of laptop owners also own a smartphone In the

    US... http://bit.ly/zE1zgp @BENCALLAHAN RESPONSIVE WEB DESIGN Thursday, December 6, 12
  5. 31% of smartphone owners also own a tablet In the

    US... http://bit.ly/zE1zgp @BENCALLAHAN RESPONSIVE WEB DESIGN Thursday, December 6, 12
  6. 23% of laptop owners also own a tablet In the

    US... http://bit.ly/zE1zgp @BENCALLAHAN RESPONSIVE WEB DESIGN Thursday, December 6, 12
  7. 13% own a laptop, smartphone, and tablet In the US...

    http://bit.ly/zE1zgp @BENCALLAHAN RESPONSIVE WEB DESIGN Thursday, December 6, 12
  8. @BENCALLAHAN RESPONSIVE WEB DESIGN Thursday, December 6, 12

  9. The web is not fixed width @BENCALLAHAN RESPONSIVE WEB DESIGN

    Thursday, December 6, 12
  10. Content matters on mobile. Strive for content parity. It’s not

    a strategy if you can’t maintain it. You don’t decide which device people use. They do. @BENCALLAHAN RESPONSIVE WEB DESIGN Karen McGrane Thursday, December 6, 12
  11. @BENCALLAHAN The Necessary Intro RESPONSIVE WEB DESIGN My name is

    Ben @bencallahan http://seesparkbox.com Thursday, December 6, 12
  12. @BENCALLAHAN The Necessary Intro RESPONSIVE WEB DESIGN Let’s talk over

    a beer Thursday, December 6, 12
  13. @BENCALLAHAN The Necessary Intro RESPONSIVE WEB DESIGN Speak up Thursday,

    December 6, 12
  14. @BENCALLAHAN The Necessary Intro RESPONSIVE WEB DESIGN Download the repo

    http://bit.ly/LWLTEA Thursday, December 6, 12
  15. @BENCALLAHAN What We’ll Cover RESPONSIVE WEB DESIGN RWD 101 RWD

    Process Applying RWD Styles JS To The Rescue Lessons Learned What’s Next in RWD Thursday, December 6, 12
  16. @BENCALLAHAN RWD 101 RESPONSIVE WEB DESIGN Thursday, December 6, 12

  17. The web is not fixed width @BENCALLAHAN RESPONSIVE WEB DESIGN

    Thursday, December 6, 12
  18. The penetration of desktop/ laptop ownership is the same today

    as it was in 2007. In the US... http://bit.ly/zE1zgp @BENCALLAHAN RESPONSIVE WEB DESIGN Thursday, December 6, 12
  19. @BENCALLAHAN RESPONSIVE WEB DESIGN 0 500 1000 1500 2000 2007

    2008 2009 2010 2011 2012 2013 2014 2015 Mobile Users Desktop Users RWD 101 Thursday, December 6, 12
  20. @BENCALLAHAN RESPONSIVE WEB DESIGN Flexibility is the new norm RWD

    101 Thursday, December 6, 12
  21. @BENCALLAHAN RESPONSIVE WEB DESIGN People are trying to browse your

    sites on these devices. Today. RWD 101 Thursday, December 6, 12
  22. @BENCALLAHAN RESPONSIVE WEB DESIGN Responsive Web Design RWD 101 Thursday,

    December 6, 12
  23. @BENCALLAHAN RESPONSIVE WEB DESIGN Ethan Marcotte Article on alistapart.com Book

    via A Book Apart RWD 101 Thursday, December 6, 12
  24. @BENCALLAHAN RESPONSIVE WEB DESIGN A Fluid Foundation Flexible Content Media

    Queries RWD 101 Thursday, December 6, 12
  25. @BENCALLAHAN RESPONSIVE WEB DESIGN Honor the proportions of the design

    by creating percentage-based grids instead of fixed-width, pixel-based grids. RWD 101: A Fluid Foundation Thursday, December 6, 12
  26. @BENCALLAHAN RESPONSIVE WEB DESIGN <div class=”span-1”> <!-- one column -->

    </div> <div class=”span-2”> <!-- two columns --> </div> <div class=”span-3”> <!-- three columns --> </div> RWD 101: A Fluid Foundation Thursday, December 6, 12
  27. @BENCALLAHAN RESPONSIVE WEB DESIGN .span-1 { width: 90px; } .span-1

    { width: ??%; } FIXED-WIDTH FLUID 300px wide grid RWD 101: A Fluid Foundation Thursday, December 6, 12
  28. @BENCALLAHAN RESPONSIVE WEB DESIGN .span-1 { width: 90px; } .span-1

    { width: ??%; } FIXED-WIDTH FLUID target / context = % RWD 101: A Fluid Foundation Thursday, December 6, 12
  29. @BENCALLAHAN RESPONSIVE WEB DESIGN .span-1 { width: 90px; } .span-1

    { width: 30%; } FIXED-WIDTH FLUID 90 / 300 = .3 target / context = % RWD 101: A Fluid Foundation Thursday, December 6, 12
  30. @BENCALLAHAN RESPONSIVE WEB DESIGN Turn a 300px 3-column grid into

    a fluid grid. /01-RWD101/br-1.html RWD 101: A Fluid Foundation Example http://bit.ly/LWLTEA Thursday, December 6, 12
  31. @BENCALLAHAN RESPONSIVE WEB DESIGN IE & Rounding RWD 101: A

    Fluid Foundation Thursday, December 6, 12
  32. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: A Fluid Foundation ➡Semantic

    Grid Systems ‣ http://semantic.gs ‣ http://susy.oddbird.net Thursday, December 6, 12
  33. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: A Fluid Foundation @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);  } } Thursday, December 6, 12
  34. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: Flexible Content Once we

    have a grid which is based on proportions, the content we put in that grid must also respond. Thursday, December 6, 12
  35. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: Flexible Content img {

    max-width: 100%; } Thursday, December 6, 12
  36. @BENCALLAHAN RESPONSIVE WEB DESIGN Make the image flexible. /01-RWD101/br-3.html http://bit.ly/LWLTEA

    RWD 101: Flexible Content The awesome poem is by a guy named Douglas, check him out at: http://ligzpoems.blogspot.com/ Example Thursday, December 6, 12
  37. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: Flexible Content Video embed/object

    works similarly. If you use iframe embeds, you can use intrinsic ratios. /11-Ratios and /12-Ratios-Review http://bit.ly/LWLTEA Thursday, December 6, 12
  38. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: Media Queries When our

    content and our design are no longer working in harmony, we need to make a larger shift in layout. Thursday, December 6, 12
  39. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: Media Queries <link  media=”(min-­‐width:

     30em)”  ... <link  media=”screen  and  (min-­‐width:  30em)”  ... @media  (min-­‐width:  30em)  {  ...  } @media  screen  and  (min-­‐width:  30em)  {  ...  } Thursday, December 6, 12
  40. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: Media Types <link  media=”(min-­‐width:

     30em)”  ... <link  media=”screen  and  (min-­‐width:  30em)”  ... @media  (min-­‐width:  30em)  {  ...  } @media  print  {  ...  } Thursday, December 6, 12
  41. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: Media Types all braille,

    embossed, speech handheld, projection, screen, tv print tty http://www.w3.org/TR/CSS21/media.html#media-types Thursday, December 6, 12
  42. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: Media Features <link  media=”(min-­‐width:

     30em)”  ... <link  media=”screen  and  (max-­‐width:  30em)”  ... @media  (orientation:  portrait)  {  ...  } @media  screen  and  (color)  {  ...  } Thursday, December 6, 12
  43. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: Media Features width, height,

    device-width, device-height orientation aspect-ratio, device-aspect-ratio color, color-index, monochrome resolution, scan, grid http://www.w3.org/TR/css3-mediaqueries Thursday, December 6, 12
  44. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: Media Queries @media (min-width:

    600px) { /* styles for 600px and up here */ } @media (max-width: 38em) { /* styles for 38em and down here */ } Thursday, December 6, 12
  45. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: Media Queries /* Large

    Resolution First CSS File Structure */ /* large resolution layouts here */ @media (max-width: 62em) { /* styles for 62em and down here */ } @media (max-width: 40em) { /* styles for 40em and down here */ } Thursday, December 6, 12
  46. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: Media Queries /* Small

    Resolution First CSS File Structure */ /* smallest resolution layouts here */ @media (min-width: 28em) { /* styles for 28em and up here */ } @media (min-width: 53em) { /* styles for 53em and up here */ } Thursday, December 6, 12
  47. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: Media Queries Large Rez

    First Easy support for old IE Small devices load all assets Small Rez First More logical (build up vs tear down) Old IE is tricky Thursday, December 6, 12
  48. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: Media Queries The Media

    Query Bookmarklet by @robtarr http://sparkbox.github.com/mediaQueryBookmarklet Thursday, December 6, 12
  49. @BENCALLAHAN RESPONSIVE WEB DESIGN Throw in a media query. /01-RWD101/br-4.html

    Example http://bit.ly/LWLTEA RWD 101: Media Queries Thursday, December 6, 12
  50. @BENCALLAHAN RESPONSIVE WEB DESIGN A Fluid Foundation Flexible Content Media

    Queries RWD 101 Thursday, December 6, 12
  51. @BENCALLAHAN RESPONSIVE WEB DESIGN ➡ Touch Target Area ➡ Hover

    States ➡ Contrast ➡ Readability Other Considerations RWD 101 Thursday, December 6, 12
  52. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: Other Considerations ➡ Touch

    Target Area ‣ Apple recommends minimum 44px X 44px ‣ This is based on non-retina displays ‣ Using padding instead of margin 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 Thursday, December 6, 12
  53. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: Other Considerations ➡ Hover

    States ‣ Don’t hide content behind :hover ‣ Consider using modernizr a { /* standard styles */ } .no-touch a:hover { /* :hover styles */ } Thursday, December 6, 12
  54. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: Other Considerations ➡ Contrast

    ‣ Try your site outside in the sun ‣ Try your site in bed when it’s dark ‣ Take it with you Thursday, December 6, 12
  55. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101: Other Considerations ➡ Readability

    ‣ Small screen != small type ‣ Consider increasing font size Thursday, December 6, 12
  56. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD 101 ➡ Touch Target Area

    ➡ Hover States ➡ Contrast ➡ Readability A Fluid Foundation Flexible Content Media Queries Thursday, December 6, 12
  57. @BENCALLAHAN RWD Process RESPONSIVE WEB DESIGN Thursday, December 6, 12

  58. @BENCALLAHAN RESPONSIVE WEB DESIGN A Process Myth Each client deliverable

    needs to look more like a final, beautiful end- product than the previous one. RWD Process Thursday, December 6, 12
  59. @BENCALLAHAN RESPONSIVE WEB DESIGN Which Results In Pushing toward nearly-designed

    wireframes quickly and completely designed comps soon after. RWD Process Thursday, December 6, 12
  60. @BENCALLAHAN RESPONSIVE WEB DESIGN A Better Mindset Deliverables that best

    serve the organization and prioritization of content and function across multiple resolutions. RWD Process Thursday, December 6, 12
  61. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD Process Planning Content Design Development

    Thursday, December 6, 12
  62. @BENCALLAHAN RESPONSIVE WEB DESIGN Our Deliverables RWD Process Research Deliverables

    Content Deliverables Priority Deliverables Style Deliverables Functional Deliverables Thursday, December 6, 12
  63. @BENCALLAHAN RESPONSIVE WEB DESIGN Let’s Focus On RWD Process Research

    Deliverables Content Deliverables Priority Deliverables Style Deliverables Functional Deliverables Thursday, December 6, 12
  64. @BENCALLAHAN RESPONSIVE WEB DESIGN Content Priority Prototype Takes the place

    of a traditional wireframe. As much real content as you can. Linear in nature, so priority is implied. Created in HTML, viewed in a browser. Generated by content/UX people. RWD Process: Priority Deliverables Thursday, December 6, 12
  65. @BENCALLAHAN RESPONSIVE WEB DESIGN There is an example in the

    repository. /02-PlanDesign Take A Look http://bit.ly/LWLTEA RWD Process: Priority Deliverables Thursday, December 6, 12
  66. @BENCALLAHAN RESPONSIVE WEB DESIGN Style Prototype Like Style Tiles, but

    in the browser. Very fast to build. Accurate web typography. Easy to show web interaction. Client reviews in their browser of preference. RWD Process: Style Deliverables Thursday, December 6, 12
  67. @BENCALLAHAN RESPONSIVE WEB DESIGN There is an example on Github.

    Take A Look http://sparkbox.github.com/dr-style-prototype RWD Process: Style Deliverables http://bit.ly/Tb7HPr Thursday, December 6, 12
  68. @BENCALLAHAN RESPONSIVE WEB DESIGN From @hellofisher http://responsiveprocess.com/yp2012/wireframes/ RWD Process: Style

    Deliverables Thursday, December 6, 12
  69. @BENCALLAHAN RESPONSIVE WEB DESIGN From @hellofisher http://responsiveprocess.com/yp2012/wireframes/ RWD Process: Style

    Deliverables Thursday, December 6, 12
  70. @BENCALLAHAN RESPONSIVE WEB DESIGN From @brad_frost http://bradfrostweb.com/demo/mobile-first/ RWD Process: Style

    Deliverables Thursday, December 6, 12
  71. @BENCALLAHAN RESPONSIVE WEB DESIGN From @brad_frost http://bradfrostweb.com/demo/mobile-first/ RWD Process: Style

    Deliverables Thursday, December 6, 12
  72. @BENCALLAHAN RESPONSIVE WEB DESIGN From @danielmall http://rif.superfriend.ly/designs/round2/ RWD Process: Style

    Deliverables Thursday, December 6, 12
  73. @BENCALLAHAN RESPONSIVE WEB DESIGN Our New RWD Deliverable: The Style

    Prototype RWD Process: Style Deliverables From @jeremyloyd http://seesparkbox.com/foundry/ our_new_responsive_design_deliverable_the_style_prototype Thursday, December 6, 12
  74. @BENCALLAHAN RESPONSIVE WEB DESIGN Responsive Comping: Obtaining Signoff without Mockups

    RWD Process: Style Deliverables From @elefontpress http://www.alistapart.com/articles/responsive-comping- obtaining-signoff-with-mockups/ Thursday, December 6, 12
  75. @BENCALLAHAN RESPONSIVE WEB DESIGN Can’t throw it over the wall

    RWD Process: Collaboration Thursday, December 6, 12
  76. @BENCALLAHAN RESPONSIVE WEB DESIGN Priority becomes critical with small displays

    RWD Process: Priority Thursday, December 6, 12
  77. @BENCALLAHAN RESPONSIVE WEB DESIGN Content Priority Prototype Style Prototype RWD

    Process Thursday, December 6, 12
  78. @BENCALLAHAN Applying RWD Styles RESPONSIVE RETROFITTING Thursday, December 6, 12

  79. @BENCALLAHAN RESPONSIVE WEB DESIGN Applying RWD Styles <head>    

     <media  name=”viewport”                    content=”width=device-­‐width,  initial-­‐scale=1.0”>      <link  rel=”stylesheet”  href=”c/base.css”>      <link  rel=”stylesheet”  media=”not  print”  href=”c/mq.css”>      <!-­‐-­‐[if  (lte  IE  8)&(!IEMobile)]>          <link  rel=”stylesheet”  media=”screen”  href=”c/nomq.css”>      <![endif]-­‐-­‐> </head> HTML (index.html) Thursday, December 6, 12
  80. @BENCALLAHAN RESPONSIVE WEB DESIGN Applying RWD Styles @-­‐ms-­‐viewport  {  

       width:  device-­‐width; } @import  “reset”; @import  “smallest”; @media  print  {      @import  “print”; } SCSS (base.css) Thursday, December 6, 12
  81. @BENCALLAHAN RESPONSIVE WEB DESIGN Applying RWD Styles @media  (min-­‐width:  30em)

     {      @include  “min-­‐width-­‐30em”; } @media  (min-­‐width:  60em)  {      @include  “min-­‐width-­‐60em”; } SCSS (mq.css) Thursday, December 6, 12
  82. @BENCALLAHAN RESPONSIVE WEB DESIGN Applying RWD Styles @include  “min-­‐width-­‐30em”; @include

     “min-­‐width-­‐60em”; SCSS (nomq.css) Thursday, December 6, 12
  83. @BENCALLAHAN RESPONSIVE WEB DESIGN Applying RWD Styles Using em-based media

    queries A more proportional measurement Layout adjusts based on font-size Adheres more to the principles of RWD Thursday, December 6, 12
  84. @BENCALLAHAN What is a Retrofit? RESPONSIVE RETROFITTING Thursday, December 6,

    12
  85. @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
  86. @BENCALLAHAN What is a Retrofit? 1. How to do it.

    2. Managing your client. RESPONSIVE RETROFITTING Thursday, December 6, 12
  87. @BENCALLAHAN @klayon RESPONSIVE RETROFITTING Thursday, December 6, 12

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

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

    RESPONSIVE RETROFITTING Thursday, December 6, 12
  90. @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
  91. @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
  92. @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
  93. @BENCALLAHAN Retrofitting Techniques: Inline Image Styles (demo of /Images) http://github.com/bencallahan/rwd-retrofitting

    RESPONSIVE RETROFITTING Thursday, December 6, 12
  94. @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
  95. @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
  96. @BENCALLAHAN Retrofitting Techniques: Tables RESPONSIVE RETROFITTING Thursday, December 6, 12

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

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

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

    Small Resolution First, Capped RESPONSIVE RETROFITTING Thursday, December 6, 12
  100. @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
  101. @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
  102. @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
  103. @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
  104. @BENCALLAHAN Client Interaction RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Thursday,

    December 6, 12
  105. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Client Interaction: Great

    Need Big Companies + No Mobile Presence + Triple Digit Growth = Anxious Clients Thursday, December 6, 12
  106. @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 Thursday, December 6, 12
  107. @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? Thursday, December 6, 12
  108. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Client Interaction: Proceed

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

    Carefully Make sure you’re capturing analytics. Thursday, December 6, 12
  110. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Constantly remind them

    of the user. Client Interaction: Proceed Carefully Thursday, December 6, 12
  111. @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! Thursday, December 6, 12
  112. @BENCALLAHAN Fun with Retrofitting RETROFITTING SITES FOR RESPONSIVE WEB DESIGN

    Thursday, December 6, 12
  113. @BENCALLAHAN RETROFITTING SITES FOR RESPONSIVE WEB DESIGN Fun with Retrofitting

    (demo of Responsive Retrofitting Bookmarklet) Thursday, December 6, 12
  114. @BENCALLAHAN RWD Patterns RESPONSIVE WEB DESIGN Thursday, December 6, 12

  115. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD Patterns: Navigation Top Nav Bottom

    Nav Slide Down Nav Select Box Nav Menu Icon Nav Multi-Level http://siyelo.com/ http://contentsmagazine.com http://2012.dconstruct.org http://www.stry.us/ http://twitter.github.com/bootstrap http://msj.edu/ http://dpandl.com http://bostonglobe.com Thursday, December 6, 12
  116. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD Patterns: Tables Show the first

    column Flip it on it’s side Just hide some of it Selective Display http://www.zurb.com/playground/responsive-tables http://css-tricks.com/examples/ResponsiveTables/responsive.php http://codepen.io/bencallahan/pen/xvmCe http://elvery.net/demo/responsive-tables http://filamentgroup.com/examples/rwd-table-patterns Thursday, December 6, 12
  117. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD Patterns: Images Picturefill Sencha.io Resrc.it

    Adaptive Images https://github.com/scottjehl/picturefill http://docs.sencha.io http://resrc.it http://adaptive-images.com and tons more... Thursday, December 6, 12
  118. @BENCALLAHAN RESPONSIVE WEB DESIGN “...performance is important, but access is

    more important. Mobile later is better than mobile never.” RWD Patterns: Images K istofer Layon http://tiny.cc/vr24gw Thursday, December 6, 12
  119. @BENCALLAHAN RESPONSIVE WEB DESIGN RWD Patterns: Off-Canvas Layouts www.lukew.com/ff/entry.asp?1569 Thursday,

    December 6, 12
  120. @BENCALLAHAN JS To The Rescue RESPONSIVE WEB DESIGN Thursday, December

    6, 12
  121. @BENCALLAHAN RESPONSIVE WEB DESIGN JS To The Rescue: Media Queries

    Pollyfills for Media Queries respond.js (by @scottjehl) https://github.com/scottjehl/Respond css3-mediaqueries.js (by @wjvandergraaf) http://code.google.com/p/css3-mediaqueries-js/ Thursday, December 6, 12
  122. @BENCALLAHAN RESPONSIVE WEB DESIGN if  (window.matchMedia(        

     "(min-­‐width:  400px)").matches)  {          /*  the  view  port  is  at  least                400  pixels  wide  */ }  else  {          /*  the  view  port  is  less  than                400  pixels  wide  */ } JS To The Rescue: matchMedia Part of the CSS Object Module Thursday, December 6, 12
  123. @BENCALLAHAN RESPONSIVE WEB DESIGN JS To The Rescue: matchMedia Polyfills

    & Wrappers matchMedia.js (by @paulirish) https://github.com/paulirish/matchMedia.js/ Harvey (by the team at Harvest) https://github.com/harvesthq/harvey mediaCheck (by @robtarr) https://github.com/sparkbox/mediaCheck enquire.js (by @wickynilliams) http://wickynilliams.github.com/enquire.js/ Thursday, December 6, 12
  124. @BENCALLAHAN RESPONSIVE WEB DESIGN JS To The Rescue: Conditional Loading

    Aggressive Enhancement Ajax-Include-Pattern (by Filament Group) https://github.com/filamentgroup/Ajax-Include-Pattern Demo with Media Queries http://filamentgroup.github.com/Ajax-Include-Pattern/test/ functional/media.html Live Example of this Pattern http://m.people.com Thursday, December 6, 12
  125. @BENCALLAHAN RESPONSIVE WEB DESIGN JS To The Rescue: Responsive Images

    Polyfill for <picture> Picturefill (by @scottjehl) https://github.com/scottjehl/picturefill Thursday, December 6, 12
  126. @BENCALLAHAN RESPONSIVE WEB DESIGN JS To The Rescue: Intelligent Loading

    Only load needed CSS eCSSential (by @scottjehl) https://github.com/scottjehl/eCSSential Thursday, December 6, 12
  127. @BENCALLAHAN RESPONSIVE WEB DESIGN JS To The Rescue: Fun Stuff

    fittext.js (by @paravel) http://fittextjs.com/ fitvid.js (by @chriscoyier and @paravel) http://fitvidsjs.com/ Thursday, December 6, 12
  128. @BENCALLAHAN Lessons Learned RESPONSIVE WEB DESIGN Thursday, December 6, 12

  129. @BENCALLAHAN RESPONSIVE WEB DESIGN Lessons Learned Pricing Thursday, December 6,

    12
  130. @BENCALLAHAN RESPONSIVE WEB DESIGN As much as 100% more, initially

    Likely to be 50% more, soon after Probably never less than 25% more Lessons Learned: Pricing Thursday, December 6, 12
  131. @BENCALLAHAN RESPONSIVE WEB DESIGN Lessons Learned Prioritization Thursday, December 6,

    12
  132. @BENCALLAHAN RESPONSIVE WEB DESIGN Lessons Learned: Prioritization Thursday, December 6,

    12
  133. @BENCALLAHAN RESPONSIVE WEB DESIGN Lessons Learned: Prioritization Thursday, December 6,

    12
  134. @BENCALLAHAN RESPONSIVE WEB DESIGN Lessons Learned: Prioritization Thursday, December 6,

    12
  135. @BENCALLAHAN RESPONSIVE WEB DESIGN Lessons Learned: Prioritization Thursday, December 6,

    12
  136. @BENCALLAHAN RESPONSIVE WEB DESIGN Lessons Learned: Prioritization Thursday, December 6,

    12
  137. @BENCALLAHAN RESPONSIVE WEB DESIGN Testing Lessons Learned Thursday, December 6,

    12
  138. @BENCALLAHAN RESPONSIVE WEB DESIGN You must test on real devices

    Do your development in a webkit browser Build libraries of your patterns Lessons Learned: Testing Thursday, December 6, 12
  139. @BENCALLAHAN RESPONSIVE WEB DESIGN Lessons Learned Consistency Thursday, December 6,

    12
  140. @BENCALLAHAN RESPONSIVE WEB DESIGN Familiarity breeds usability Don’t do crazy

    stuff just because you can Users do resize their browser http://seesparkbox.com/foundry/cross_width_consistency Lessons Learned: Consistency Thursday, December 6, 12
  141. @BENCALLAHAN RESPONSIVE WEB DESIGN Lessons Learned Experimentation Thursday, December 6,

    12
  142. @BENCALLAHAN RESPONSIVE WEB DESIGN Get into the browser quickly The

    inspector is your friend Lessons Learned: Experimentation Thursday, December 6, 12
  143. @BENCALLAHAN What’s Next in RWD RESPONSIVE WEB DESIGN Thursday, December

    6, 12
  144. @BENCALLAHAN RESPONSIVE WEB DESIGN What’s Next in RWD Thursday, December

    6, 12
  145. @BENCALLAHAN RESPONSIVE WEB DESIGN What’s Next in RWD: The Dip

    Thursday, December 6, 12
  146. @BENCALLAHAN RESPONSIVE WEB DESIGN What’s Next in RWD: The Dip

    Stages of Competence Unconscious Incompetence Conscious Incompetence Conscious Competence Unconscious Competence Thursday, December 6, 12
  147. @BENCALLAHAN RESPONSIVE WEB DESIGN What’s Next in RWD The Responsive

    Dip http://bit.ly/MasqBk Thursday, December 6, 12
  148. @BENCALLAHAN RESPONSIVE WEB DESIGN What’s Next in RWD The Responsive

    Mindset Thursday, December 6, 12
  149. @BENCALLAHAN RESPONSIVE WEB DESIGN What’s Next in RWD The Responsive

    Mindset “The truly responsive design web designer wasn’t born until after the launch of the iPhone. We haven’t seen his or her work yet.” Andy Clarke http://the-pastry-box-project.net/andy-clarke/2012-april-8/ Thursday, December 6, 12
  150. @BENCALLAHAN RESPONSIVE WEB DESIGN What’s Next in RWD Move beyond

    the technique • Mobile first process • Performance as a feature • The server is our friend • Modular content systems • Content and functional priority Thursday, December 6, 12
  151. @BENCALLAHAN RESPONSIVE WEB DESIGN What’s Next in RWD Move the

    industry forward • Apprenticeships • Board of Advisors • Experimentation Thursday, December 6, 12
  152. @BENCALLAHAN http://bit.ly/LWLTEA RESPONSIVE WEB DESIGN Ben Callahan President, Sparkbox In

    Control 2012 December 2, 2012 Mobile Workshop Thursday, December 6, 12