RWD IRL

My talk for Artifact Conference 2014 — Austin

Transcript

1. #RWD IRL @trentwalton
2. #RWD IRL
4. RESPONSIVE WEB DESIGN
5. IN REAL LIFE
10. OUR WORK…
11. 9 fittextjs.com
12. fitvidsjs.com
14. marksimonson.com
16. BUT LOTS HASN’T SEEN THE LIGHT OF DAY
21. WHY?
22. RWD IS HARD
23. RWD IS HARD
24. WEB DESIGN IS HARD
25. BUT IT DIDN’T USED TO BE
26. BUT IT DIDN’T USED TO BE
27. BUT IT DIDN’T USED TO BE
28. BUT IT DIDN’T USED TO BE
29. BUT IT DIDN’T USED TO BE
30. BUT IT DIDN’T USED TO BE
31. BUT IT DIDN’T USED TO BE
35. WHAT CHANGED?
37. 29 whatyouseeiswhatyouget.net
38. flickr.com/photos/lukew/10412448136
39. ! —John Allsopp, A Dao of Web Design, 2000 It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.
40. EMBRACE THE MULTI-DEVICE WEB
41. LET’S PRETEND
42. HOW WE #RWD (At Paravel)
43. DEVICE-AGNOSTIC (device not-known)
44. 1. Hostile browsers DEVICE-AGNOSTIC
45. 1. Hostile browsers 2. Tiny screens DEVICE-AGNOSTIC
46. 1. Hostile browsers 2. Tiny screens 3. Slow connection speeds DEVICE-AGNOSTIC
47. 1. Hostile browsers 2. Tiny screens 3. Slow connection speeds 4. Touch inputs DEVICE-AGNOSTIC
48. 1. Hostile browsers 2. Tiny screens 3. Slow connection speeds 4. Touch inputs (no uni-taskers) DEVICE-AGNOSTIC
49. 1. HOSTILE BROWSERS
50. MORE TO CONSIDER THAN
51. A USER’S DELIBERATE CHOICE
52. OPERA MINI
53. OPERA MINI
54. OPERA MINI • Up to 90% data savings
55. OPERA MINI • Up to 90% data savings • Over 250 million users
56. CSS “Dotted and dashed borders are however rendered as solid for bandwidth and memory reasons.”
57. WEBFONTS “Mini uses the fonts present on the device it runs on.” ! “Opera Mini will only use one family of font per page, and setting font-family will have no effect.”
58. dowebsitesneedtolookexactlythesameineverybrowser.com
59. Further reading: adactio.com/journal/6692
60. THE PROBLEM WITH…
61. 2. TINY SCREENS
62. Obligatory Stats
64. ! —Google, The New Multi-screen World 90% [of users] use multiple screens sequentially to accomplish a task over time.
65. ! —Karen McGrane, Your Content, Now Mobile, 2012 It is your mission to get your content out, on whichever platform, in whichever format your audience wants to consume it. Your users get to decide how, when, and where they want to read your content. It is your challenge and your responsibility to deliver a good experience to them.
66. via http://wtfmobileweb.com/
67. via http://wtfmobileweb.com/
68. via http://wtfmobileweb.com/
69. If a piece of content doesn’t fit into a mobile experience, what qualifies it for the desktop? ! —Anyone from Paravel in a room full of pissed off people
70. 3. SLOW CONNECTION SPEEDS
71. via http://radar.oreilly.com SLOW PAGES LOSE USERS
72. via http://www.webperformancetoday.com THE AVERAGE WEB PAGE HAS ALMOST DOUBLED IN SIZE SINCE 2010
73. via http://www.webperformancetoday.com 828KB TO 1.2MB
74. ! —Tim Kadlec, Fast Enough, 2014 With anything added to a page, you need to be able to answer the question of “What value does this provide?” and in turn be able to determine if the value outweighs the pain.
75. EVERY DECISION IS A BUSINESS DECISION
76. via http://www.apple.com/mac-pro 7.4MB ON LOAD, 24.7MB TOTAL
78. 4. TOUCH INPUTS
79. TOUCH≠MOBILE
80. TOUCH≠TABLET
81. http://today.tumblr.com http://www.zktek.com
82. via http://www.crn.com.au
83. FAT FINGER FRIENDLY
84. via http://www.usetechtips.com
85. trentwalton.com/2010/07/05/non-hover
89. *PAUSE*
91. Seems legit.
92. THIS IS EASY TO AGREE WITH ON THE SURFACE
93. 1. Hostile browsers 2. Tiny screens 3. Slow connection speeds 4. Touch inputs DEVICE-AGNOSTIC
94. CHANGE IS HARD
95. 1. Organization structure CHANGE IS HARD
96. 1. Organization structure 2. Content CHANGE IS HARD
97. 1. Organization structure 2. Content 3. Process / deliverables CHANGE IS HARD
98. 1. Organization structure 2. Content 3. Process / deliverables 4. Tools CHANGE IS HARD
99. 1. Organization structure 2. Content 3. Process / deliverables 4. Tools 5. Measures of success CHANGE IS HARD
100. Thanks, @robweychert
101. PERCEPTIONS DON’T CHANGE OVERNIGHT
102. CLIENT CONSULTANT
103. CLIENT CONSULTANT progress
104. #RWD IRL
105. It’s not browsers, devices, or a lack of tools that keeps a site from launching successfully.
106. It’s not browsers, devices, or a lack of tools that keeps a site from launching successfully. It’s us.
107. WHAT CAN WE DO?
108. 1. Reorganize WHAT CAN WE DO?
109. 1. Reorganize 2. Improve our relationships WHAT CAN WE DO?
110. 1. Reorganize 2. Improve our relationships 3. Learn new things WHAT CAN WE DO?
111. 1. Reorganize 2. Improve our relationships 3. Learn new things 4. Focus on the browser WHAT CAN WE DO?
112. REORGANIZE
113. https://twitter.com/mulegirl/status/458674029717897216
116. • Team not fully utilized
117. • Team not fully utilized • Iteration is slow
118. • Team not fully utilized • Iteration is slow • Morale drops (tension rises)
119. • Team not fully utilized • Iteration is slow • Morale drops (tension rises) • Final product diminished
122. BABY STEPS Thanks, @danielmall
123. DESIGN CODE PLAN
124. DESIGN CODE PLAN
125. DESIGN CODE PLAN
126. DESIGN CODE PLAN
128. IMPROVE RELATIONSHIPS
129. really easy for us to hate each other
130. PLANNERS…
131. ur-prblm-now.xls
132. DESIGNERS…
133. f#©k-you.jpg
134. CODERS…
135. LET’S TALK ABOUT OUR FEELINGS
136. PLANNERS
137. PLANNERS 1. Scripting improv
138. PLANNERS 1. Scripting improv 2. Stopgap for sign-off & scheduling
139. DESIGNERS
140. DESIGNERS 1. Fear losing control
141. DESIGNERS 1. Fear losing control 2. Insecure about code
142. DESIGNERS 1. Fear losing control 2. Insecure about code 3. Secretive process
143. CODERS
144. CODERS 1. Undervalued creatively
145. CODERS 1. Undervalued creatively 2. Plan & design is prescriptive
146. CODERS 1. Undervalued creatively 2. Plan & design is prescriptive 3. Secretive about the build
147. ! Stephen Caver, Why Developers Need to Learn Design, 2014 Nothing is more toxic to a project than developers and designers seeing each other as rivals. —
148. THE LITTLE THINGS
149. LEARN NEW THINGS
150. Design
151. T-SHAPED
152. Design
153. ! —Mark Otto, Fatten up those T's Being T-shaped means you can shift yourself and provide value at just about any stage or type of project—like sketching, wireframing, visual design, and code.
154. Design
155. Design Brand Business CSS HTML
157. 1. Reorganize 2. Improve our relationships 3. Learn new things 4. Focus on the browser WHAT CAN WE DO?
158. FOCUS ON THE BROWSER
160. AVOID WASTED EFFORT
165. ! —Jason Santa Maria, The Nimble Process Ideas want to be ugly.
168. AVOID VIEWPORT SILOS
169. VIEWPORT SILOS
170. A solution for one viewport isn’t really a solution.
171. PATTERN LAB FOR THE WIN
172. TINY BOOTSTRAPS FOR EVERY CLIENT!
173. ! —Dave Rupert, Responsive Deliverables, 2013 These living code samples are self- documenting style guides that extend to accommodate a client’s needs as well as the needs of the ever-evolving multi-device web.
174. patternlab.io
175. INCORPORATION
176. 1. Explore via sketching & photoshop INCORPORATION
177. 1. Explore via sketching & photoshop 2. Prototype in code INCORPORATION
178. 1. Explore via sketching & photoshop 2. Prototype in code 3. Test, discuss, iterate INCORPORATION
179. 1. Explore via sketching & photoshop 2. Prototype in code 3. Test, discuss, iterate 4. Incorporate into Pattern Lab INCORPORATION
180. 1. Explore via sketching & photoshop 2. Prototype in code 3. Test, discuss, iterate 4. Incorporate into Pattern Lab 5. Deploy to site INCORPORATION
181. ! —Jeff Veen, I Don’t Care About Accessibility, 2004 …I end up delivering solutions to my clients that are far less complex to implement, are much easier to maintain, cost exponentially less to serve, work on multiple browsers and devices, do way better in the search engine lottery, and — of course — are accessible to everyone … everyone … using the Web today. And try to argue with the business value of that.
184. FIGHT THE GOOD FIGHT
185. FIGHT THE GOOD FIGHT
186. EVERYONE HAS AN OPINION
187. BUT I NEED TO HAVE MY OWN
188. MOBILE FIRST RESOLUTION INDEPENDENCE DESIGN IN THE BROWSER STYLE PROTOTYPE AUTOMATION PROJECT HUBS STYLE TILES ELEMENT COLLAGE LESS DEVICE AGNOSTIC ATOMIC DESIGN CONTENT PARITY SASS PHOTOSHOP CONTENT CHOREOGRAPHY WIREFRAME
189. EDUCATION CAMARADERIE HANDOFF DOCUMENTATION BUSINESS GOALS ACCOUNTABILITY TIMELINES SIGN-OFF BUDGET MORALE RESPECT COMMUNICATION HAPPINESS ORGANIZATIONAL POLITICS RESEARCH APPROVAL
190. THANKS! @trentwalton