RWD Techniques Workshop

Deck from my half-day workshop on responsive web design techniques in Salt Lake City on July 29, 2013.

Transcript

1. Ben Callahan RWD TECHNIQUES @bencallahan Monday, July 29, 13
2. Monday, July 29, 13
3. Collaborative note-taking experiment: http://goo.gl/pyjfKo Monday, July 29, 13
4. #rwdslc Monday, July 29, 13
5. For the Type-A Personalities ‣ Getting Started with RWD ‣ RWD Workflow ‣ Creating Flexibility ‣ RWD Retrofitting ‣ Lessons Learned ‣ Future of RWD Monday, July 29, 13
6. LET’S JUMP IN! Monday, July 29, 13
7. RESPONSIVE WEB DESIGN TECHNIQUES GETTING STARTED WITH RWD Monday, July 29, 13
8. September 9, 2007 6:30am Monday, July 29, 13
9. 177% increase in tablet ownership since last year In the US... http://bit.ly/YFW4Ai Monday, July 29, 13
10. 80% of consumers multi-task with other devices while watching TV In the US... http://bit.ly/YFW4Ai Monday, July 29, 13
11. 26% of consumers own a laptop, tablet & smartphone http://bit.ly/YFW4Ai In the US... Monday, July 29, 13
12. Q1 2013 conversions on tablets surpassed conversions on traditional desktops http://bit.ly/sNpLte In the US... Monday, July 29, 13
13. The web is not fixed width Monday, July 29, 13
14. The penetration of desktop ownership is the same today as it was in 2007. http://bit.ly/zE1zgp In the US... Monday, July 29, 13
15. Mobile vs Desktop Browsing 0 500 1000 1500 2000 2007 2008 2009 2010 2011 2012 2013 2014 2015 Mobile Users Desktop Users http://bit.ly/L5cqiO Monday, July 29, 13
16. 0 500 1000 1500 2000 2007 2008 2009 2010 2011 2012 2013 2014 2015 Mobile Users Desktop Users http://bit.ly/L5cqiO Not that far away Monday, July 29, 13
17. Flexibility is the new norm Monday, July 29, 13
18. People are trying to browse your sites on these devices, today Monday, July 29, 13
19. Responsive web design Monday, July 29, 13
20. Ethan Marcotte Article on ALA (http://bit.ly/Wi0xvw) Book via ABA (http://bit.ly/f6TPB7) Monday, July 29, 13
21. RWD 101 ‣ Three Core Techniques - A Fluid Foundation - Flexible Content - Media Queries Monday, July 29, 13
22. A Fluid Foundation Honor the proportions of the design by creating percentage-based layout instead of fixed-width, pixel-based layout. Monday, July 29, 13
23. A Fluid Foundation http://microsoft.com Monday, July 29, 13
24. Flexible Content Once we have a layout which is based on proportions, the content must also respond. Monday, July 29, 13
25. Flexible Content http://stry.us Monday, July 29, 13
26. Media Queries When our content and our design are no longer working in harmony, we need to make a larger shift in layout. Monday, July 29, 13
27. Media Queries http://skinnyties.com Monday, July 29, 13
28. RWD 101 ‣ Three Core Techniques - A Fluid Foundation - Flexible Content - Media Queries Monday, July 29, 13
29. RESPONSIVE WEB DESIGN TECHNIQUES RWD WORKFLOW Monday, July 29, 13
30. Before RWD, we pretended like things were pretty simple. Monday, July 29, 13
31. 1024ish 768ish fixed width Monday, July 29, 13
32. GAET grand2013 Monday, July 29, 13
33. DESIGN FRONT-END BACK-END LAUNCH! Linear Workflow Monday, July 29, 13
34. DESIGN FRONT-END BACK-END LAUNCH! THINK ABOUT USERS Linear Workflow Monday, July 29, 13
35. DESIGN FRONT-END BACK-END LAUNCH! Linear Workflow THINK ABOUT USERS THROW IN SOME CONTENT Monday, July 29, 13
36. Slightly Better Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Monday, July 29, 13
37. Why hello, RWD. Monday, July 29, 13
38. Why hello, RWD. Monday, July 29, 13
39. Linear Workflow Now with RWD! CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Monday, July 29, 13
40. Ditto! Now with RWD! Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Me too! Monday, July 29, 13
41. This doesn’t work. Monday, July 29, 13
42. Linear Workflow Problem LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE Monday, July 29, 13
43. We need to invite others into the process Monday, July 29, 13
44. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Monday, July 29, 13
45. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Monday, July 29, 13
46. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Monday, July 29, 13
47. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Monday, July 29, 13
48. A “1 deliverable” workflow... is centered on iteration Monday, July 29, 13
49. A “1 deliverable” workflow... requires collaboration Monday, July 29, 13
50. A “1 deliverable” workflow... results in natural decisions Monday, July 29, 13
51. A “1 deliverable” workflow... conflicts with organizational structure Monday, July 29, 13
52. http://www.zeldman.com/2007/07/02/let-there-be-web-divisions/ “...[A]lmost no one who makes websites works in their company or organization’s web division. That’s because almost no company or organization has a web division. And that void on the org chart is one reason we have so many bloated, unusable failures where we should be producing great user experiences.” @zeldman, 2007 Monday, July 29, 13
53. A “1 deliverable” workflow... requires the right team Monday, July 29, 13
54. LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE CONTENT UX FRONT-END DESIGN BACK-END Monday, July 29, 13
55. LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE CONTENT UX FRONT-END DESIGN BACK-END UX FRONT-END DESIGN LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE Monday, July 29, 13
56. ND DESIGN So, how do we advance design through a “1 deliverable” workflow? Monday, July 29, 13
57. WEB DESIGNERS STILL USE PHOTOSHOP! Monday, July 29, 13
58. Dissecting Design PRODUCTIVITY TIME Monday, July 29, 13
59. Dissecting Design PRODUCTIVITY TIME Monday, July 29, 13
60. Dissecting Design PRODUCTIVITY TIME Monday, July 29, 13
61. Establish the Aesthetic DISSECTING DESIGN Monday, July 29, 13
62. Solve the Problem DISSECTING DESIGN Monday, July 29, 13
63. Refine the Solution DISSECTING DESIGN Monday, July 29, 13
64. Monday, July 29, 13
65. Establish the Aesthetic DISSECTING DESIGN Monday, July 29, 13
66. DISSECTING DESIGN ‣ Style Comparisons ‣ Style Tiles ‣ Style Prototypes Establish the Aesthetic Monday, July 29, 13
67. Style Comparisons ESTABLISH THE AESTHETIC “I could create an illustration or a 3D rendering of what I want my new office to look like, but that doesn’t take advantage of his great ideas. It’s dictation, not collaboration. Instead, I show him a Pinterest board my wife and I created.” @danielmall http://danielmall.com/articles/the-post-psd-era/ Monday, July 29, 13
68. Style Comparisons ESTABLISH THE AESTHETIC Light vs Dark Monday, July 29, 13
69. Style Comparisons ESTABLISH THE AESTHETIC Flat vs Textured Monday, July 29, 13
70. Style Comparisons ESTABLISH THE AESTHETIC Illustration vs Photography Monday, July 29, 13
71. Style Tiles ESTABLISH THE AESTHETIC Monday, July 29, 13
72. Style Tiles ESTABLISH THE AESTHETIC Monday, July 29, 13
73. Style Tiles ESTABLISH THE AESTHETIC Monday, July 29, 13
74. Style Prototypes ESTABLISH THE AESTHETIC Monday, July 29, 13
75. USE TOOLS YOU ARE COMFORTABLE WITH TO ESTABLISH THE AESTHETIC HOW TO DECIDE Monday, July 29, 13
76. Cool, so what happens next? Monday, July 29, 13
77. Solve the Problem DISSECTING DESIGN Monday, July 29, 13
78. DISSECTING DESIGN ‣ Static Design Tools ‣ Responsive Design Tools ‣ HTML/CSS Solve the Problem Monday, July 29, 13
79. Static Design Tools SOLVE THE PROBLEM Monday, July 29, 13
80. Static Design Tools SOLVE THE PROBLEM Monday, July 29, 13
81. Static Design Tools SOLVE THE PROBLEM Monday, July 29, 13
82. Responsive Design Tools SOLVE THE PROBLEM Monday, July 29, 13
83. SOLVE THE PROBLEM Responsive Design Tools Monday, July 29, 13
84. SOLVE THE PROBLEM Responsive Design Tools Monday, July 29, 13
85. HTML/CSS SOLVE THE PROBLEM Monday, July 29, 13
86. HTML/CSS SOLVE THE PROBLEM Monday, July 29, 13
87. HTML/CSS SOLVE THE PROBLEM Monday, July 29, 13
88. Layout vs Modules SOLVE THE PROBLEM Monday, July 29, 13
89. Layout vs Modules SOLVE THE PROBLEM Monday, July 29, 13
90. Layout vs Modules SOLVE THE PROBLEM Monday, July 29, 13
91. YOU BEST SOLVE PROBLEMS USING TOOLS YOU ARE FLUENT WITH HOW TO DECIDE Monday, July 29, 13
92. Monday, July 29, 13
93. SOLVE THE PROBLEM Monday, July 29, 13
94. Unconscious Incompetence SOLVE THE PROBLEM Monday, July 29, 13
95. Unconscious Incompetence Conscious Incompetence SOLVE THE PROBLEM Monday, July 29, 13
96. Unconscious Incompetence Conscious Incompetence Conscious Competence SOLVE THE PROBLEM Monday, July 29, 13
97. Unconscious Incompetence Conscious Incompetence Conscious Competence Unconscious Competence SOLVE THE PROBLEM Monday, July 29, 13
98. Fluency SOLVE THE PROBLEM Monday, July 29, 13
99. Refine the Solution DISSECTING DESIGN Monday, July 29, 13
100. DISSECTING DESIGN ‣ Static Design Tools ‣ Design Pairing Refine the Solution Monday, July 29, 13
101. Don’t Use Static Design Tools REFINE THE SOLUTION LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE Monday, July 29, 13
102. Instead of static design hand-offs, consider design pairing REFINE THE SOLUTION Monday, July 29, 13
103. Design Pairing REFINE THE SOLUTION Monday, July 29, 13
104. Design Pairing REFINE THE SOLUTION Monday, July 29, 13
105. Design Pairing REFINE THE SOLUTION Monday, July 29, 13
106. Design Pairing REFINE THE SOLUTION Monday, July 29, 13
107. Monday, July 29, 13
108. You don’t want to do the long tail more than once REFINE THE SOLUTION Monday, July 29, 13
109. The Switching Point REFINE THE SOLUTION Monday, July 29, 13
110. EFFICIENCY IS KEY WHEN REFINING A DESIGN SOLUTION HOW TO DECIDE Monday, July 29, 13
111. Establish Solve Refine ........................ Comfort ............................... Fluency .......................... Efficiency Guidelines for Selecting Tooling Monday, July 29, 13
112. Establish Solve Refine ............. Style Prototype ....... Sketching + PSD + CSS ............ In-Browser Pairing Tools we use at Sparkbox Monday, July 29, 13
113. CONTENT How do we prioritize content & functionality through a “one deliverable” workflow? Monday, July 29, 13
114. Monday, July 29, 13
115. Content Prototypes [demo] Monday, July 29, 13
116. Photo Credit: Jay Maisel Monday, July 29, 13
117. Photo Credit: Jay Maisel Monday, July 29, 13
118. Photo Credit: Jay Maisel Monday, July 29, 13
119. Group improvisation is a challenge. Aside from the weighty technical problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. Bill Evans Monday, July 29, 13
120. Group improvisation is a challenge. Aside from the weighty technical problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. Bill Evans Monday, July 29, 13
121. Group improvisation is a challenge. Aside from the weighty technical problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. Bill Evans Monday, July 29, 13
122. Group Improvisation Monday, July 29, 13
123. Group improvisation requires individuals on a team to... be great Monday, July 29, 13
124. Group improvisation requires individuals on a team to... be humble Monday, July 29, 13
125. Group improvisation requires individuals on a team to... be empathetic Monday, July 29, 13
126. Create guidelines instead of rigid process Monday, July 29, 13
127. Invest in people over process Monday, July 29, 13
128. CREATING FLEXIBILITY RESPONSIVE WEB DESIGN TECHNIQUES Monday, July 29, 13
129. CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout ‣ Typography ‣ Images ‣ Tables ‣ Video Monday, July 29, 13
130. CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout ‣ Typography ‣ Images ‣ Tables ‣ Video Monday, July 29, 13
131. It starts with the grid Monday, July 29, 13
132. body { width: 1000px; } div.main { width: 700px; } aside { width: 280px; } It starts with the grid body { width: 100%; } div.main { width: 70%; } aside { width: 28%; } Monday, July 29, 13
133. body { width: 1000px; } div.main { width: 700px; } It starts with the grid body { width: 100%; } div.main { width: 70%; } target / context = % 700 / 1000 = .7 .7 = 70% Monday, July 29, 13
134. body { width: 1000px; } aside { width: 280px; } It starts with the grid body { width: 100%; } aside { width: 28%; } target / context = % 280 / 1000 = .28 .28 = 28% Monday, July 29, 13
135. Responsive grid systems Monday, July 29, 13
136. CREATING FLEXIBILITY RWD Grid Systems ‣ Foundation ‣ Bootstrap ‣ Skeleton ‣ Responsive.gs ‣ Columnal ‣ ...this list goes on, and on, and on Monday, July 29, 13
137. CREATING FLEXIBILITY Semantic RWD Grid Systems ‣ Semantic.gs ‣ Susy ‣ Zen Grids Monday, July 29, 13
138. @column-width: 60; @gutter-width: 20; @columns: 12; @total-width: 100%; header { @include column(12); } article { @include column(12); } aside { @include column(12); } @media (min-width: 38em) { article { @include column(8); } aside { @include column(4); } } Semantic.gs Monday, July 29, 13
139. @column-width: 60; @gutter-width: 20; @columns: 12; @total-width: 100%; header { @include column(12); } article { @include column(12); } aside { @include column(12); } @media (min-width: 38em) { article { @include column(8); } aside { @include column(4); } } Semantic.gs Monday, July 29, 13
140. Semantic.gs @column-width: 60; @gutter-width: 20; @columns: 12; @total-width: 100%; header { @include column(12); } article { @include column(12); } aside { @include column(12); } @media (min-width: 38em) { article { @include column(8); } aside { @include column(4); } } Monday, July 29, 13
141. Semantic.gs @column-width: 60; @gutter-width: 20; @columns: 12; @total-width: 100%; header { @include column(12); } article { @include column(12); } aside { @include column(12); } @media (min-width: 38em) { article { @include column(8); } aside { @include column(4); } } Monday, July 29, 13
142. Semantic.gs @column-width: 60; @gutter-width: 20; @columns: 12; @total-width: 100%; header { @include column(12); } article { @include column(12); } aside { @include column(12); } @media (min-width: 38em) { article { @include column(8); } aside { @include column(4); } } Monday, July 29, 13
143. Or, just roll your own Monday, July 29, 13
144. CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout ‣ Typography ‣ Images ‣ Tables ‣ Video Monday, July 29, 13
145. CREATING FLEXIBILITY Responsive Layout Patterns ‣ Source order stacking ‣ Content choreography ‣ Off canvas Monday, July 29, 13
146. CREATING FLEXIBILITY Responsive Layout Patterns ‣ Source order stacking ‣ Content choreography ‣ Off canvas Monday, July 29, 13
147. Monday, July 29, 13
148. CREATING FLEXIBILITY Responsive Layout Patterns ‣ Source order stacking ‣ Content choreography ‣ Off canvas Monday, July 29, 13
149. Monday, July 29, 13
150. Monday, July 29, 13
151. [AppendAround Demo] Monday, July 29, 13
152. CREATING FLEXIBILITY Responsive Layout Patterns ‣ Source order stacking ‣ Content choreography ‣ Off canvas Monday, July 29, 13
153. Monday, July 29, 13
154. Monday, July 29, 13
155. Easiest to show a few examples: http://jasonweaver.name/lab/offcanvas/ http://mashable.com/ Monday, July 29, 13
156. There are many, many combinations of these basic ideas http://bit.ly/U4N5qH (http://bradfrost.github.com/this-is-responsive/patterns.html) Monday, July 29, 13
157. There are some really cool new layout modules coming... Monday, July 29, 13
158. http://www.fivesimplesteps.com/ products/css3-layout-modules Monday, July 29, 13
159. http://www.netmagazine.com/tutorials/ master-new-css-layout-properties Monday, July 29, 13
160. CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout ‣ Typography ‣ Images ‣ Tables ‣ Video Monday, July 29, 13
161. Type flexes by default Monday, July 29, 13
162. We need to consider readability Monday, July 29, 13
163. CREATING FLEXIBILITY Responsive Typography ‣ Small screen != small font-size ‣ Consider contrast ‣ If text has links, give adequate room to touch them Monday, July 29, 13
164. CREATING FLEXIBILITY Responsive Typography ‣ Small screen != small font-size ‣ Consider contrast ‣ If text has links, give adequate room to touch them Monday, July 29, 13
165. CREATING FLEXIBILITY Responsive Typography ‣ Small screen != small font-size ‣ Consider contrast ‣ If text has links, give adequate room to touch them Monday, July 29, 13
166. @snookca http://snook.ca/technical/colour_contrast/ colour.html @leaverou http://leaverou.github.com/contrast-ratio/ Monday, July 29, 13
167. CREATING FLEXIBILITY Responsive Typography ‣ Small screen != small font-size ‣ Consider contrast ‣ If text has links, give adequate room to touch them Monday, July 29, 13
168. CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout ‣ Typography ‣ Images ‣ Tables ‣ Video Monday, July 29, 13
169. img { max-width: 100%; } Flexible Images Monday, July 29, 13
170. http://bit.ly/12TbTX4 (http://codepen.io/bencallahan/pen/CtLDb) Monday, July 29, 13
171. The image problem(s) Monday, July 29, 13
172. CREATING FLEXIBILITY The image problem(s) ‣ Content ‣ Bandwidth ‣ Pixel density Monday, July 29, 13
173. CREATING FLEXIBILITY Image: Content Monday, July 29, 13
174. CREATING FLEXIBILITY Image: Content Monday, July 29, 13
175. CREATING FLEXIBILITY Image: Content Monday, July 29, 13
176. CREATING FLEXIBILITY Image: Content Monday, July 29, 13
177. CREATING FLEXIBILITY Image: Bandwidth As of March of 2012, 86% of the sites on mediaqueri.es demonstrated the same weight and load time at resolutions from 300ish to 1200ish. via @guypod http://www.guypo.com/mobile/performance-implications-of- responsive-design-book-contribution/ Monday, July 29, 13
178. CREATING FLEXIBILITY Image: Bandwidth Responsive & Responsible via @scotjehl https://speakerdeck.com/scottjehl/responsive-responsible http://www.lukew.com/ff/entry.asp?1565 Monday, July 29, 13
179. CREATING FLEXIBILITY Image: Pixel Density Most new mobile devices have high pixel density displays: Apple iPhone 4+: 326 PPI Amazon Kindle Fire HD 8.9: 254 PPI Nokia Lumia 920: 332 PPI BlackBerry Z10: 356 PPI Samsung Galaxy Note: 285 PPI Monday, July 29, 13
180. CREATING FLEXIBILITY The image problem(s) ‣ Content ‣ Bandwidth ‣ Pixel density Monday, July 29, 13
181. CREATING FLEXIBILITY The image solution(s) ‣ SVG ‣ Icon fonts ‣ Pixel-density media queries ‣ Compressive ‣ Picturefill ‣ User preference Monday, July 29, 13
182. SVG (Scalable Vector Graphics) ‣ Allows the image to be resolution independent. ‣ Support isn’t very good for older browsers. ‣ We can use Modernizr to detect if the browser supports SVG and provide a .png fallback for those that do not. Monday, July 29, 13
183. @dbushell wrote a great primer for SVG Monday, July 29, 13
184. Icon Fonts ‣ Fonts by default are resolution independent, Icon fonts are no different. ‣ http://icomoon.io/app/ allows you to create your own icon fonts ‣ They do require a bit more markup, and JS for IE 7 and lower. Monday, July 29, 13
185. <!--html--> <a href="#" class="search-toggle"> <span aria-hidden="true" data-icon="&#xe009;"></span> <span class="screen-reader">Search</span> </a> Icon Font Markup /*.scss*/ [data-icon]:before { content: attr(data-icon); font-family: 'icon-font-family'; speak: none; } Monday, July 29, 13
186. “Compressive” Images ‣ http://bit.ly/Sygdey ‣ Increase the image dimensions ‣ Add massive compression ‣ Scale the image in the browser Monday, July 29, 13
187. Pixel Density MQs ‣ Detect the pixel ratio of the device and serve a second, higher-res image. ‣ Retina devices now have to make an additional request for the retina asset. Monday, July 29, 13
188. /*.scss*/ @media only all and (-webkit-min-device-pixel-ratio: 1.5) { .logo { background-image: url(/i/logo-2x.png); background-size: 100%; } } Pixel Density MQs Also need other browser prefixes Monday, July 29, 13
189. Picturefill ‣ https://github.com/scottjehl/ picturefill ‣ Polyfill for the new <picture> element Monday, July 29, 13
190. Picturefill Monday, July 29, 13
191. User Preference ‣ Allow the user to choose what experience they would like to have on their device: “HD” or “SD”. Monday, July 29, 13
192. CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout ‣ Typography ‣ Images ‣ Tables ‣ Video Monday, July 29, 13
193. CREATING FLEXIBILITY Tables http://codepen.io/bencallahan/pen/xvmCe Monday, July 29, 13
194. RWD Table Patterns [demo] Monday, July 29, 13
195. CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout ‣ Typography ‣ Images ‣ Tables ‣ Video Monday, July 29, 13
196. CREATING FLEXIBILITY Video Monday, July 29, 13
197. CREATING FLEXIBILITY Intrinsic Ratios http://codepen.io/bencallahan/pen/KICkl Monday, July 29, 13
198. CREATING FLEXIBILITY Video Monday, July 29, 13
199. Creating flexibility requires experimentation Monday, July 29, 13
200. RWD RETROFITTING RESPONSIVE WEB DESIGN TECHNIQUES Monday, July 29, 13
201. @BENCALLAHAN What is a Retrofit? RESPONSIVE RETROFITTING Monday, July 29, 13
202. @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 Monday, July 29, 13
203. @BENCALLAHAN What is a Retrofit? 1. How to do it. RESPONSIVE RETROFITTING Monday, July 29, 13
204. @BENCALLAHAN What is a Retrofit? 1. How to do it. 2. Managing your client. RESPONSIVE RETROFITTING Monday, July 29, 13
205. @BENCALLAHAN @klayon RESPONSIVE RETROFITTING Monday, July 29, 13
206. @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 Monday, July 29, 13
207. @BENCALLAHAN Retrofitting Techniques http://github.com/bencallahan/rwd-retrofitting If you like, you can clone this repository: RESPONSIVE RETROFITTING Monday, July 29, 13
208. @BENCALLAHAN Retrofitting Techniques: From Fixed to Fluid (demo of Twitter.com) RESPONSIVE RETROFITTING Monday, July 29, 13
209. @BENCALLAHAN Retrofitting Techniques: From Fixed to Fluid ➡ Demo of Twitter.com http://www.alistapart.com/articles/fluidgrids/ target  /  context  =  result RESPONSIVE RETROFITTING Monday, July 29, 13
210. @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 Monday, July 29, 13
211. @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 Monday, July 29, 13
212. @BENCALLAHAN Retrofitting Techniques: From Fixed to Fluid ➡ Demo of Twitter.com /*  some  css  */ @media  (max-­‐width:  500px)  {      /*  css  for  500px  and  lower  */ } RESPONSIVE RETROFITTING Monday, July 29, 13
213. @BENCALLAHAN Retrofitting Techniques: Inline Image Styles (demo of /Images) http://github.com/bencallahan/rwd-retrofitting RESPONSIVE RETROFITTING Monday, July 29, 13
214. @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 Monday, July 29, 13
215. @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 Monday, July 29, 13
216. @BENCALLAHAN Retrofitting Techniques: Tables RESPONSIVE RETROFITTING Monday, July 29, 13
217. @BENCALLAHAN Retrofitting Techniques: Tables (demo of /Tables) http://github.com/bencallahan/rwd-retrofitting RESPONSIVE RETROFITTING Monday, July 29, 13
218. @BENCALLAHAN Retrofitting Techniques: Tables RESPONSIVE RETROFITTING Monday, July 29, 13
219. @BENCALLAHAN Retrofitting Techniques: Media Queries ➡ Large Resolution First ➡ Small Resolution First, Capped RESPONSIVE RETROFITTING Monday, July 29, 13
220. @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 Monday, July 29, 13
221. @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 Monday, July 29, 13
222. @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 Monday, July 29, 13
223. @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 Monday, July 29, 13
224. @BENCALLAHAN Client Interaction RESPONSIVE RETROFITTING Monday, July 29, 13
225. @BENCALLAHAN Client Interaction: Great Need Big Companies + No Mobile Presence + Triple Digit Growth = Anxious Clients RESPONSIVE RETROFITTING Monday, July 29, 13
226. @BENCALLAHAN Client Interaction: Great Need Less than Half the Cost + Less than Half the Time + Increased Conversions = Desperate Clients RESPONSIVE RETROFITTING Monday, July 29, 13
227. @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 Monday, July 29, 13
228. @BENCALLAHAN Client Interaction: Proceed Carefully Retrofitting is a step in the right direction. RESPONSIVE RETROFITTING Monday, July 29, 13
229. @BENCALLAHAN Client Interaction: Proceed Carefully Make sure you’re capturing analytics. RESPONSIVE RETROFITTING Monday, July 29, 13
230. @BENCALLAHAN Constantly remind them of the user. Client Interaction: Proceed Carefully RESPONSIVE RETROFITTING Monday, July 29, 13
231. @BENCALLAHAN When you’re done and they ask for more... Client Interaction: Proceed Carefully ...push for even better experiences! RESPONSIVE RETROFITTING Monday, July 29, 13
232. LESSONS LEARNED RESPONSIVE WEB DESIGN TECHNIQUES Monday, July 29, 13
233. Testing Monday, July 29, 13
234. LESSONS LEARNED Testing ‣ You must test on real devices ‣ Do your development in a webkit browser ‣ Bulid libraries of your patterns Monday, July 29, 13
235. Pricing Monday, July 29, 13
236. LESSONS LEARNED Pricing ‣ As much as 100% more, initially ‣ Likely to be 50% more, soon after ‣ Probably never less than 25% more Monday, July 29, 13
237. LESSONS LEARNED Pricing ‣ As much as 100% more, initially ‣ Likely to be 50% more, soon after ‣ Probably never less than 25% more COMPARED TO WHAT? Monday, July 29, 13
238. LESSONS LEARNED Pricing ‣ Testing (labs & time) ‣ Fewer patterns ‣ Project management ‣ Learning curve ‣ Maintenance ‣ Content strategy Monday, July 29, 13
239. Prioritization Monday, July 29, 13
240. LESSONS LEARNED Prioritization Monday, July 29, 13
241. LESSONS LEARNED Prioritization Monday, July 29, 13
242. LESSONS LEARNED Prioritization Monday, July 29, 13
243. LESSONS LEARNED Prioritization Monday, July 29, 13
244. LESSONS LEARNED Prioritization Monday, July 29, 13
245. Performance Monday, July 29, 13
246. LESSONS LEARNED Performance ‣ Optimize or cut out images ‣ Decrease the number of requests ‣ Gzip if you can ‣ Concat and minify CSS/JS ‣ Load CSS at the top ‣ Load JS at the bottom ‣ Follow @souders on Twitter Monday, July 29, 13
247. Barriers Monday, July 29, 13
248. LESSONS LEARNED Barriers ‣ Organization barriers block collaboration ‣ Must have buy in from upper management ‣ Must have buy in from those doing the work ‣ It’s not easy, we’re still figuring it out Monday, July 29, 13
249. WHERE WE’RE GOING RESPONSIVE WEB DESIGN TECHNIQUES Monday, July 29, 13
250. Monday, July 29, 13
251. YOU ARE ALL SECRET AGENTS Monday, July 29, 13
252. The Responsive Dip http://bit.ly/MasqBk Monday, July 29, 13
253. The server is our friend Monday, July 29, 13
254. Performance is a feature Monday, July 29, 13
255. Build something that does more than just fit on small screens Monday, July 29, 13
256. Focus on the content Monday, July 29, 13
257. Simplicity “Simplicity isn’t just a visual style. It’s not just minimalisim or the absence of clutter...You have deeply understand the essence of a product in order to be able to get rid of the parts that are not essential.” Jony Ive Monday, July 29, 13
258. 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/ Monday, July 29, 13
259. There are many problems left to solve. We’ll solve them much faster if we solve them together. Monday, July 29, 13
260. THANKS! @bencallahan Monday, July 29, 13