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.

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.
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
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
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
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
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