Build Right: Midwest Tour Day 2

475203b37527b26e4fb2cc58e6e8493e?s=47 Build Right
August 17, 2012

Build Right: Midwest Tour Day 2

The second day of content from our 2012 Midwest Tour in Columbus, Cleveland, Pittsburgh, and Grand Rapids. Includes the business of RWD, responsive retrofitting, role of JavaScript in RWD, responsive JavaScript, emerging patterns, and what's next.

475203b37527b26e4fb2cc58e6e8493e?s=128

Build Right

August 17, 2012
Tweet

Transcript

  1. MIDWEST TOUR SPONSORED BY

  2. Session Five BUSINESS OF RWD

  3. PROCESS REVIEW Research Technical Requirements Content Inventory Deliverables Priority Guide

    or Content Priority Prototype Style Tile or Style Prototype Large Resolution Design Code Responsive Templates
  4. CHOOSING DELIVERABLES So what hould I do?

  5. CLIENT DELIVERABLES

  6. CLIENT DELIVERABLES So if everything is changing, and there are

    all these new possibilities, what do we show clients?
  7. CLIENT DELIVERABLES It depends... So if everything is changing, and

    there are all these new possibilities, what do we show clients?
  8. Your Team Resources Level of trust from the client Scope

    of the project Time and budget Client Education... CLIENT DELIVERABLES DELIVERABLE DECISIONS ARE EFFECTED BY...
  9. Educated clients (or more trusting and open-minded ones) may be

    open to deliverables closer to what we’ve described in our current process. CLIENT DELIVERABLES
  10. CLIENT DELIVERABLES

  11. Though we may educate our clients, some will inevitably want

    to see more and more versions of wireframes and layouts which cover multiple screen sizes... perhaps due to the project scope, or simply a lack of vision. CLIENT DELIVERABLES
  12. Though we may educate our clients, some will inevitably want

    to see more and more versions of wireframes and layouts which cover multiple screen sizes... perhaps due to the project scope, or simply a lack of vision. We recommend getting paid for that. CLIENT DELIVERABLES
  13. SELLING RWD You get what you pay for.

  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. SELLING RWD

  23. SELLING RWD You have some unique opportunities. Selling Internally:

  24. SELLING RWD Slow and steady wins the race. Selling Internally:

  25. SELLING RWD Covert Opps. Selling Internally:

  26. SELLING RWD Internally or Externally? Other Ideas

  27. PRICING RWD So how much more is it?

  28. PRICING RWD

  29. So, we know it costs more to build responsively. But

    how much more? PRICING RWD
  30. It depends... So, we know it costs more to build

    responsively. But how much more? PRICING RWD
  31. None
  32. PRICING RWD Really, eally ough numbers:

  33. As much as 100% more initially. PRICING RWD Really, eally

    ough numbers:
  34. As much as 100% more initially. Likely to be 50%

    more soon after. PRICING RWD Really, eally ough numbers:
  35. As much as 100% more initially. Likely to be 50%

    more soon after. Probably won’t go less than 30% more. PRICING RWD Really, eally ough numbers:
  36. FACTORS RAISING THE COST OF RESPONSIVE Increased project management costs.

    Less established patterns increasing efficiency. More code = more time coding. More time in testing and quality assurance. Device hardware expenses (for true testing). PRICING RWD
  37. FACTORS RAISING THE COST OF RESPONSIVE Increased project management costs.

    Less established patterns increasing efficiency. More code = more time coding. More time in testing and quality assurance. Device hardware expenses (for true testing). PRICING RWD
  38. Beware the uncharted wilderness, unless you’re willing to pay the

    price of a pioneer. PRICING RWD P o Tip:
  39. Beware the uncharted wilderness, unless you’re willing to pay the

    price of a pioneer. PRICING RWD P o Tip:
  40. PRICING RWD Internally or Externally? Other Ideas

  41. MANAGING RWD Expect unrealistic expectations.

  42. MANAGING RWD

  43. The New P ocess P oblem We’ve gotten very little

    negative feedback. Clients that buy into RWD tend to accept new process. Just try it. MANAGING RWD
  44. MANAGING RWD

  45. MANAGING RWD The Layout P oblem

  46. (Related to The Device-Specific Fixation) MANAGING RWD Constantly educating and

    reminding of the benefits. Remind them of their priorities, and warn against making assumptions of users per context. The Layout P oblem
  47. MANAGING RWD

  48. The Performance P oblem Remind them of their own pain.

    Make connections with the past. MANAGING RWD
  49. MANAGING RWD Internally or Externally? Other Experiences

  50. Session Six RESPONSIVE RETROFITTING http://bit.ly/Of6LoV

  51. RESPONSIVE TECHNIQUES IN NON-RESPONSIVE ORGANIZATIONS

  52. RESPONSIVE RETROFITTING SOMETHING IS BETTER THAN NOTHING

  53. RESPONSIVE RETROFITTING • LARGE RESOLUTION FIRST • SMALL RESOLUTION FIRST,

    CAPPED • DEVICE QUERIES • FUN WITH RETROFITTING
  54. RESPONSIVE RETROFITTING LARGE RESOLUTION FIRST /* FILE: main.css */ /*

    all your original styles */ @media (max-width: 650px) { /* styles for 650px and lower */ }
  55. RESPONSIVE RETROFITTING SMALL RESOLUTION FIRST, CAPPED SERVE THE ORIGINAL CSS

    TO LARGE REZ SERVE MOBILE-FIRST CSS TO SMALL REZ
  56. RESPONSIVE RETROFITTING SMALL RESOLUTION FIRST, CAPPED <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>
  57. /* if JS disabled OR media queries aren't supported */

    .no-mediaquery { @import "original"; } .mediaquery { @media (max-width: 660px) { @import "small"; } @media (min-width: 661px) and (max-width: 979px) { @import "small"; @import "medium"; } @media (min-width: 980px) { @import "original"; } }
  58. /* translated to CSS as... */ .no-mediaquery li { /*

    original li styles */ } @media (max-width: 660px) { .mediaquery li { /* small li styles */ } } @media (min-width: 661px) and (max-width: 979px) { .mediaquery li { /* small li styles */ } .mediaquery li { /* medium li styles */ } } @media (min-width: 980px) { .mediaquery li { /* original li styles */ } }
  59. RESPONSIVE RETROFITTING Apply styles based on width of device vs

    width of browser. @media (max-device-width: 650px) { /* styles for 650px and lower */ } DEVICE QUERIES
  60. RESPONSIVE RETROFITTING TABLE EXAMPLE

  61. RESPONSIVE RETROFITTING TABLE EXAMPLE

  62. RESPONSIVE RETROFITTING TABLE EXAMPLE

  63. RESPONSIVE RETROFITTING WHEN IS RETROFITTING APPROPRIATE? - smaller budget/timeline -

    can’t start over - semantic markup - solid UX at large resolutions
  64. RESPONSIVE RETROFITTING TURNING THE TITANIC - take small steps -

    start buliding responsive elements - ask for forgiveness, not permission
  65. RESPONSIVE RETROFITTING PRACTICE! Our Friend the Inspector

  66. RESPONSIVE RETROFITTING AN EXPERIMENT http://bit.ly/Of6LoV

  67. Session Seven ROLE OF JS

  68. None
  69. Fluid Grids Flexible Media Media Queries +

  70. Fluid Grids Flexible Media Media Queries + RESPONSIVE =

  71. Fluid Grids Flexible Media Media Queries +

  72. Fluid Grids Flexible Media Media Queries JavaScript + AWESOME =

  73. @AaronGustafson

  74. RESPONSIVE JAVASCRIPT P ogressive Enhancement “...uses web technologies in a

    layered fashion that allows everyone to access the basic content and functionality of a web page... while also providing an enhanced version of the page... http://en.wikipedia.org/wiki/Progressive_enhancement
  75. RESPONSIVE JAVASCRIPT Aggressive Enhancement “... treating content itself as an

    enhancement.” http://globalmoxie.com/blog/making-of-people-mobile.shtml
  76. RESPONSIVE JAVASCRIPT Aggressive Enhancement http://filamentgroup.com/lab/ajax_includes_modular_content/ https://github.com/filamentgroup/Ajax-Include-Pattern/ https://github.com/filamentgroup/quickconcat http://24ways.org/2011/conditional-loading-for-responsive-designs

  77. RESPONSIVE JAVASCRIPT Enhanced Content Loading Content Based on Media Queries

    /13-JS-1-Enhanced-Content
  78. RESPONSIVE JAVASCRIPT Performance

  79. RESPONSIVE JAVASCRIPT eCSSential http://github.com/scottjehl/eCSSential A better way to load CSS

    files?
  80. RESPONSIVE JAVASCRIPT eCSSential http://github.com/scottjehl/eCSSential A better way to load CSS

    files? http://github.com/filamentgroup/quickconcat
  81. RESPONSIVE JAVASCRIPT Polyfills A shim that mimics a future API

    providing fallback functionality to older browsers. http://paulirish.com/i/7570.png
  82. RESPONSIVE JAVASCRIPT Polyfills http://bit.ly/eBMoLW

  83. RESPONSIVE JAVASCRIPT Polyfills http://bit.ly/eBMoLW http://github.com/afarkas/html5shiv

  84. RESPONSIVE JAVASCRIPT Polyfills http://bit.ly/eBMoLW http://github.com/afarkas/html5shiv http://github.com/ryanseddon/H5F

  85. RESPONSIVE JAVASCRIPT Polyfills http://bit.ly/eBMoLW http://github.com/afarkas/html5shiv http://github.com/ryanseddon/H5F https://github.com/balupton/history.js

  86. RESPONSIVE JAVASCRIPT Polyfills http://bit.ly/eBMoLW http://github.com/afarkas/html5shiv http://github.com/ryanseddon/H5F https://github.com/balupton/history.js http://selectivizr.com/

  87. RESPONSIVE JAVASCRIPT Roles Performance Enhancing User Interactions Polyfills

  88. Session Eight RESPONSIVE JAVASCRIPT

  89. None
  90. RESPONSIVE JAVASCRIPT position: fixed

  91. RESPONSIVE JAVASCRIPT position: fixed https://github.com/filamentgroup/fixed-fixed

  92. RESPONSIVE JAVASCRIPT position: fixed https://github.com/filamentgroup/fixed-fixed http://github.com/scottjehl/Device-Bugs/issues/1

  93. RESPONSIVE JAVASCRIPT orientation change bugs https://github.com/scottjehl/iOS-Orientationchange-Fix

  94. RESPONSIVE JAVASCRIPT espond.js http://scottjehl.github.com/respond

  95. RESPONSIVE JAVASCRIPT matchmedia http://github.com/paulirish/matchMedia.js http://github.com/sparkbox/mediaCheck

  96. RESPONSIVE JAVASCRIPT Typography

  97. http://fittextjs.com RESPONSIVE JAVASCRIPT Typography

  98. http://www.frequency-decoder.com/demo/slabText RESPONSIVE JAVASCRIPT Other typography libraries http://letteringjs.com/ http://www.kernjs.com/ /14-JS-2-Typography

  99. http://eightmedia.github.com/hammer.js/ RESPONSIVE JAVASCRIPT Touch Gestures https://github.com/jairajs89/Touchy.js https://github.com/taitems/Mobile-Web-based-Gesture-Recognition http://static.uxebu.com/~david/touchscroll/ /15-JS-3-Touch

  100. http://swipejs.com/ RESPONSIVE JAVASCRIPT image liders http://flexslider.woothemes.com/ http://marktyrrell.com/labs/blueberry/

  101. RESPONSIVE JAVASCRIPT tructuring your code

  102. RESPONSIVE JAVASCRIPT tructuring your code

  103. RESPONSIVE JAVASCRIPT tructuring your code

  104. RESPONSIVE JAVASCRIPT tructuring your code nav.js

  105. RESPONSIVE JAVASCRIPT tructuring your code nav.js /16-JS-4-Navigation

  106. Session Nine EMERGING PATTERNS

  107. EMERGING PATTERNS navigation

  108. Top Nav Bottom Nav Slide Down Nav Select Box Nav

    Menu Icon Nav Multi-Level EMERGING PATTERNS navigation
  109. Top Nav Bottom Nav Slide Down Nav Select Box Nav

    Menu Icon Nav Multi-Level EMERGING PATTERNS navigation http://riothq.com http://contentsmagazine.com http://2012.dconstruct.org http://fortysevenmedia.com http://twitter.github.com/bootstrap http://msj.edu/
  110. EMERGING PATTERNS tables

  111. Show the first column Turn the rows into blocks Just

    hide some of it Selective Display EMERGING PATTERNS tables
  112. Show the first column Turn the rows into blocks Just

    hide some of it Selective Display EMERGING PATTERNS tables http://www.zurb.com/playground/responsive-tables http://css-tricks.com/examples/ResponsiveTables/responsive.php http://elvery.net/demo/responsive-tables http://filamentgroup.com/examples/rwd-table-patterns
  113. EMERGING PATTERNS images

  114. Picturefill Sencha.io Adaptive Images EMERGING PATTERNS images and tons more...

  115. Picturefill Sencha.io Adaptive Images EMERGING PATTERNS images http://scottjehl.github.com/picturefill http://docs.sencha.io http://adaptive-images.com

    and tons more...
  116. http://tiny.cc/vr24gw EMERGING PATTERNS images ~K istofer Lanyon “...performance is important,

    but access is more important. Mobile later is better than mobile never.”
  117. EMERGING PATTERNS em-based media queries

  118. EMERGING PATTERNS @media (min-width: 600px) { /* styles for 600px

    and up here */ } @media (min-width: 30em) { /* styles for 60em and up here */ } em-based media queries
  119. EMERGING PATTERNS off-canvas layouts

  120. ONE MORE... intrinsic atios

  121. /11-Ratios EMERGING PATTERNS intrinsic atios Responsive video, and much more!

  122. Session Ten WHAT’S NEXT

  123. THE RESPONSIVE DIP

  124. None
  125. None
  126. THE DIP

  127. Unconscious Incompetence Conscious Incompetence Conscious Competence Unconscious Competence STAGES OF

    COMPETENCE
  128. Unconscious Incompetence Conscious Incompetence Conscious Competence Unconscious Competence STAGES OF

    COMPETENCE
  129. Unconscious Incompetence Conscious Incompetence Conscious Competence Unconscious Competence STAGES OF

    COMPETENCE
  130. THE RESPONSIVE DIP http://bit.ly/MasqBk

  131. THE RESPONSIVE MINDSET

  132. “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/
  133. MOVE BEYOND THE TECHNIQUES

  134. • MOBILE FIRST PROCESS • PERFORMANCE AS A FEATURE •

    THE SERVER IS OUR FRIEND • MODULAR CONTENT SYSTEMS • CONTENT PRIORITY MOVE BEYOND
  135. EMERGING PATTERNS priority

  136. EMERGING PATTERNS priority

  137. EMERGING PATTERNS priority

  138. PUSH THROUGH