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

RWD IRL

RWD IRL

My talk for Artifact Conference 2014 — Austin

Trent Walton

May 06, 2014
Tweet

More Decks by Trent Walton

Other Decks in Design

Transcript

  1. #RWD IRL
    @trentwalton

    View Slide

  2. #RWD IRL

    View Slide

  3. View Slide

  4. RESPONSIVE
    WEB DESIGN

    View Slide

  5. IN REAL LIFE

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. OUR WORK…

    View Slide

  11. 9
    fittextjs.com

    View Slide

  12. fitvidsjs.com

    View Slide

  13. View Slide

  14. marksimonson.com

    View Slide

  15. View Slide

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

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. WHY?

    View Slide

  22. RWD IS HARD

    View Slide

  23. RWD IS HARD

    View Slide

  24. WEB DESIGN IS HARD

    View Slide

  25. BUT IT DIDN’T USED TO BE

    View Slide

  26. BUT IT DIDN’T USED TO BE

    View Slide

  27. BUT IT DIDN’T USED TO BE

    View Slide

  28. BUT IT DIDN’T USED TO BE

    View Slide

  29. BUT IT DIDN’T USED TO BE

    View Slide

  30. BUT IT DIDN’T USED TO BE

    View Slide

  31. BUT IT DIDN’T USED TO BE

    View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. WHAT CHANGED?

    View Slide

  36. View Slide

  37. 29
    whatyouseeiswhatyouget.net

    View Slide

  38. flickr.com/photos/lukew/10412448136

    View Slide

  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.

    View Slide

  40. EMBRACE THE
    MULTI-DEVICE WEB

    View Slide

  41. LET’S PRETEND

    View Slide

  42. HOW WE #RWD
    (At Paravel)

    View Slide

  43. DEVICE-AGNOSTIC
    (device not-known)

    View Slide

  44. 1. Hostile browsers
    DEVICE-AGNOSTIC

    View Slide

  45. 1. Hostile browsers
    2. Tiny screens
    DEVICE-AGNOSTIC

    View Slide

  46. 1. Hostile browsers
    2. Tiny screens
    3. Slow connection speeds
    DEVICE-AGNOSTIC

    View Slide

  47. 1. Hostile browsers
    2. Tiny screens
    3. Slow connection speeds
    4. Touch inputs
    DEVICE-AGNOSTIC

    View Slide

  48. 1. Hostile browsers
    2. Tiny screens
    3. Slow connection speeds
    4. Touch inputs
    (no uni-taskers)
    DEVICE-AGNOSTIC

    View Slide

  49. 1. HOSTILE BROWSERS

    View Slide

  50. MORE TO CONSIDER THAN

    View Slide

  51. A USER’S
    DELIBERATE CHOICE

    View Slide

  52. OPERA MINI

    View Slide

  53. OPERA MINI

    View Slide

  54. OPERA MINI
    • Up to 90% data savings

    View Slide

  55. OPERA MINI
    • Up to 90% data savings
    • Over 250 million users

    View Slide

  56. CSS
    “Dotted and dashed borders are however
    rendered as solid for bandwidth and
    memory reasons.”

    View Slide

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

    View Slide

  58. dowebsitesneedtolookexactlythesameineverybrowser.com

    View Slide

  59. Further reading: adactio.com/journal/6692

    View Slide

  60. THE PROBLEM WITH…

    View Slide

  61. 2. TINY SCREENS

    View Slide

  62. Obligatory Stats

    View Slide

  63. View Slide

  64. !
    —Google, The New Multi-screen World
    90% [of users] use multiple screens
    sequentially to accomplish a task over time.

    View Slide

  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.

    View Slide

  66. via http://wtfmobileweb.com/

    View Slide

  67. via http://wtfmobileweb.com/

    View Slide

  68. via http://wtfmobileweb.com/

    View Slide

  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

    View Slide

  70. 3. SLOW CONNECTION SPEEDS

    View Slide

  71. via http://radar.oreilly.com
    SLOW PAGES LOSE USERS

    View Slide

  72. via http://www.webperformancetoday.com
    THE AVERAGE WEB PAGE
    HAS ALMOST DOUBLED
    IN SIZE SINCE 2010

    View Slide

  73. via http://www.webperformancetoday.com
    828KB TO 1.2MB

    View Slide

  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.

    View Slide

  75. EVERY DECISION IS A
    BUSINESS DECISION

    View Slide

  76. via http://www.apple.com/mac-pro
    7.4MB ON LOAD, 24.7MB TOTAL

    View Slide

  77. View Slide

  78. 4. TOUCH INPUTS

    View Slide

  79. TOUCH≠MOBILE

    View Slide

  80. TOUCH≠TABLET

    View Slide

  81. http://today.tumblr.com http://www.zktek.com

    View Slide

  82. via http://www.crn.com.au

    View Slide

  83. FAT FINGER FRIENDLY

    View Slide

  84. via http://www.usetechtips.com

    View Slide

  85. trentwalton.com/2010/07/05/non-hover

    View Slide

  86. View Slide

  87. View Slide

  88. View Slide

  89. *PAUSE*

    View Slide

  90. View Slide

  91. Seems legit.

    View Slide

  92. THIS IS EASY TO AGREE
    WITH ON THE SURFACE

    View Slide

  93. 1. Hostile browsers
    2. Tiny screens
    3. Slow connection speeds
    4. Touch inputs
    DEVICE-AGNOSTIC

    View Slide

  94. CHANGE IS HARD

    View Slide

  95. 1. Organization structure
    CHANGE IS HARD

    View Slide

  96. 1. Organization structure
    2. Content
    CHANGE IS HARD

    View Slide

  97. 1. Organization structure
    2. Content
    3. Process / deliverables
    CHANGE IS HARD

    View Slide

  98. 1. Organization structure
    2. Content
    3. Process / deliverables
    4. Tools
    CHANGE IS HARD

    View Slide

  99. 1. Organization structure
    2. Content
    3. Process / deliverables
    4. Tools
    5. Measures of success
    CHANGE IS HARD

    View Slide

  100. Thanks, @robweychert

    View Slide

  101. PERCEPTIONS DON’T
    CHANGE OVERNIGHT

    View Slide

  102. CLIENT CONSULTANT

    View Slide

  103. CLIENT CONSULTANT
    progress

    View Slide

  104. #RWD IRL

    View Slide

  105. It’s not browsers, devices, or a
    lack of tools that keeps a site
    from launching successfully.

    View Slide

  106. It’s not browsers, devices, or a
    lack of tools that keeps a site
    from launching successfully.
    It’s us.

    View Slide

  107. WHAT CAN WE DO?

    View Slide

  108. 1. Reorganize
    WHAT CAN WE DO?

    View Slide

  109. 1. Reorganize
    2. Improve our relationships
    WHAT CAN WE DO?

    View Slide

  110. 1. Reorganize
    2. Improve our relationships
    3. Learn new things
    WHAT CAN WE DO?

    View Slide

  111. 1. Reorganize
    2. Improve our relationships
    3. Learn new things
    4. Focus on the browser
    WHAT CAN WE DO?

    View Slide

  112. REORGANIZE

    View Slide

  113. https://twitter.com/mulegirl/status/458674029717897216

    View Slide

  114. View Slide

  115. View Slide

  116. • Team not fully utilized

    View Slide

  117. • Team not fully utilized
    • Iteration is slow

    View Slide

  118. • Team not fully utilized
    • Iteration is slow
    • Morale drops (tension rises)

    View Slide

  119. • Team not fully utilized
    • Iteration is slow
    • Morale drops (tension rises)
    • Final product diminished

    View Slide

  120. View Slide

  121. View Slide

  122. BABY STEPS
    Thanks, @danielmall

    View Slide

  123. DESIGN
    CODE
    PLAN

    View Slide

  124. DESIGN
    CODE
    PLAN

    View Slide

  125. DESIGN
    CODE
    PLAN

    View Slide

  126. DESIGN
    CODE
    PLAN

    View Slide

  127. View Slide

  128. IMPROVE
    RELATIONSHIPS

    View Slide

  129. really easy for us to hate each other

    View Slide

  130. PLANNERS…

    View Slide

  131. ur-prblm-now.xls

    View Slide

  132. DESIGNERS…

    View Slide

  133. f#©k-you.jpg

    View Slide

  134. CODERS…

    View Slide

  135. LET’S TALK ABOUT
    OUR FEELINGS

    View Slide

  136. PLANNERS

    View Slide

  137. PLANNERS
    1. Scripting improv

    View Slide

  138. PLANNERS
    1. Scripting improv
    2. Stopgap for sign-off & scheduling

    View Slide

  139. DESIGNERS

    View Slide

  140. DESIGNERS
    1. Fear losing control

    View Slide

  141. DESIGNERS
    1. Fear losing control
    2. Insecure about code

    View Slide

  142. DESIGNERS
    1. Fear losing control
    2. Insecure about code
    3. Secretive process

    View Slide

  143. CODERS

    View Slide

  144. CODERS
    1. Undervalued creatively

    View Slide

  145. CODERS
    1. Undervalued creatively
    2. Plan & design is prescriptive

    View Slide

  146. CODERS
    1. Undervalued creatively
    2. Plan & design is prescriptive
    3. Secretive about the build

    View Slide

  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.

    View Slide

  148. THE LITTLE THINGS

    View Slide

  149. LEARN NEW
    THINGS

    View Slide

  150. Design

    View Slide

  151. T-SHAPED

    View Slide

  152. Design

    View Slide

  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.

    View Slide

  154. Design

    View Slide

  155. Design
    Brand
    Business
    CSS
    HTML

    View Slide

  156. View Slide

  157. 1. Reorganize
    2. Improve our relationships
    3. Learn new things
    4. Focus on the browser
    WHAT CAN WE DO?

    View Slide

  158. FOCUS ON THE
    BROWSER

    View Slide

  159. View Slide

  160. AVOID WASTED
    EFFORT

    View Slide

  161. View Slide

  162. View Slide

  163. View Slide

  164. View Slide

  165. !
    —Jason Santa Maria, The Nimble Process
    Ideas want to be ugly.

    View Slide

  166. View Slide

  167. View Slide

  168. AVOID
    VIEWPORT SILOS

    View Slide

  169. VIEWPORT SILOS

    View Slide

  170. A solution for one viewport
    isn’t really a solution.

    View Slide

  171. PATTERN LAB
    FOR THE WIN

    View Slide

  172. TINY BOOTSTRAPS
    FOR EVERY CLIENT!

    View Slide

  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.

    View Slide

  174. patternlab.io

    View Slide

  175. INCORPORATION

    View Slide

  176. 1. Explore via sketching & photoshop
    INCORPORATION

    View Slide

  177. 1. Explore via sketching & photoshop
    2. Prototype in code
    INCORPORATION

    View Slide

  178. 1. Explore via sketching & photoshop
    2. Prototype in code
    3. Test, discuss, iterate
    INCORPORATION

    View Slide

  179. 1. Explore via sketching & photoshop
    2. Prototype in code
    3. Test, discuss, iterate
    4. Incorporate into Pattern Lab
    INCORPORATION

    View Slide

  180. 1. Explore via sketching & photoshop
    2. Prototype in code
    3. Test, discuss, iterate
    4. Incorporate into Pattern Lab
    5. Deploy to site
    INCORPORATION

    View Slide

  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.

    View Slide

  182. View Slide

  183. View Slide

  184. FIGHT THE
    GOOD FIGHT

    View Slide

  185. FIGHT THE
    GOOD FIGHT

    View Slide

  186. EVERYONE HAS
    AN OPINION

    View Slide

  187. BUT I NEED TO
    HAVE MY OWN

    View Slide

  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

    View Slide

  189. EDUCATION CAMARADERIE HANDOFF
    DOCUMENTATION BUSINESS
    GOALS
    ACCOUNTABILITY TIMELINES
    SIGN-OFF BUDGET
    MORALE RESPECT
    COMMUNICATION HAPPINESS ORGANIZATIONAL
    POLITICS RESEARCH
    APPROVAL

    View Slide

  190. THANKS!
    @trentwalton

    View Slide