Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RWD IRL

RWD IRL

My talk for Artifact Conference 2014 — Austin

7aad555700fb85bf9787067349ac7ba9?s=128

Trent Walton

May 06, 2014
Tweet

Transcript

  1. #RWD IRL @trentwalton

  2. #RWD IRL

  3. None
  4. RESPONSIVE WEB DESIGN

  5. IN REAL LIFE

  6. None
  7. None
  8. None
  9. None
  10. OUR WORK…

  11. 9 fittextjs.com

  12. fitvidsjs.com

  13. None
  14. marksimonson.com

  15. None
  16. BUT LOTS HASN’T SEEN THE LIGHT OF DAY

  17. None
  18. None
  19. None
  20. None
  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

  32. None
  33. None
  34. None
  35. WHAT CHANGED?

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

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

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

  86. None
  87. None
  88. None
  89. *PAUSE*

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

  114. None
  115. None
  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
  120. None
  121. None
  122. BABY STEPS Thanks, @danielmall

  123. DESIGN CODE PLAN

  124. DESIGN CODE PLAN

  125. DESIGN CODE PLAN

  126. DESIGN CODE PLAN

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

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

  159. None
  160. AVOID WASTED EFFORT

  161. None
  162. None
  163. None
  164. None
  165. ! —Jason Santa Maria, The Nimble Process Ideas want to

    be ugly.
  166. None
  167. None
  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.
  182. None
  183. None
  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