CSS Dev Conf 2016 Closing Keynote

http://2016.cssdevconf.com/

Transcript

1. The Seasonal
   Web Designer
   @TrentWalton
   

   View Slide

2. Thank you,
   Christopher
   and Ari
   

   View Slide

3. 98
   Conferences
   http://environmentsforhumans.com/schedule/
   

   View Slide

4. View Slide

5. View Slide

6. Balance
   

   View Slide

7. The pace of
   the web is
   unnatural
   

   View Slide

8. •Learn about new web tech
   •Build something
   •See web tech evolve
   •Realize your thing is obsolete
   •Repeat
   

   View Slide

9. View Slide

10. Innovative SVG Animations
    Simple. Accessible. Fast.
    Responsive Web Apps with Container
    Queries
    Modern Workflow & Tooling
    Impressive Art with CSS
    KonMari CSS
    Perceived Performance
    Communicating Animation
    Reactive Animations with CSS Variables
    Creating Beautiful, Accessible, and User-
    Friendly Forms
    The Talks
    Motion Paths Beyond SVG
    Automated UI Testing and You
    Data Visualization with 

    Responsive d3.js
    Stop Thinking in Pixels
    Level Up Your GIF Game
    Advanced Fluid Typography
    Pattern Libraries Can Change Your Life
    HTTP/2 FTW
    How to Fight and Prevent Burnout
    Sunsetting our Grid Systems and
    Embracing CSS Grid Module
    

    View Slide

11. The Talks
    Innovative SVG Animations
    Simple. Accessible. Fast.
    Responsive Web Apps with Container
    Queries
    Modern Workflow & Tooling
    Impressive Art with CSS
    KonMari CSS
    Perceived Performance
    Communicating Animation
    Reactive Animations with CSS Variables
    Creating Beautiful, Accessible, and User-
    Friendly Forms
    Motion Paths Beyond SVG
    Automated UI Testing and You
    Data Visualization with 

    Responsive d3.js
    Stop Thinking in Pixels
    Level Up Your GIF Game
    Advanced Fluid Typography
    Pattern Libraries Can Change Your Life
    HTTP/2 FTW
    How to Fight and Prevent Burnout
    Sunsetting our Grid Systems and
    Embracing CSS Grid Module
    

    View Slide

12. The Talks
    Innovative SVG Animations
    Simple. Accessible. Fast.
    Responsive Web Apps with Container
    Queries
    Modern Workflow & Tooling
    Impressive Art with CSS
    KonMari CSS
    Perceived Performance
    Communicating Animation
    Reactive Animations with CSS Variables
    Creating Beautiful, Accessible, and User-
    Friendly Forms
    Motion Paths Beyond SVG
    Automated UI Testing and You
    Data Visualization with 

    Responsive d3.js
    Stop Thinking in Pixels
    Level Up Your GIF Game
    Advanced Fluid Typography
    Pattern Libraries Can Change Your Life
    HTTP/2 FTW
    How to Fight and Prevent Burnout
    Sunsetting our Grid Systems and
    Embracing CSS Grid Module
    

    View Slide

13. The Talks
    Simple. Accessible. Fast.
    Perceived Performance
    Advanced Fluid Typography
    Stop Thinking in Pixels
    Innovative SVG Animations
    Responsive Web Apps with Container
    Queries
    Impressive Art with CSS
    Data Visualization with 

    Responsive d3.js
    KonMari CSS
    Reactive Animations with CSS Variables
    Sunsetting our Grid Systems and
    Embracing CSS Grid Module
    Communicating Animation
    Motion Paths Beyond SVG
    Level Up Your GIF Game
    HTTP/2 FTW
    Automated UI Testing and You
    Pattern Libraries Can Change Your Life
    Modern Workflow & Tooling
    Creating Beautiful, Accessible, and User-
    Friendly Forms
    How to Fight and Prevent Burnout
    

    View Slide

14. Philosophical
    Simple. Accessible. Fast.
    Perceived Performance
    Advanced Fluid Typography
    Stop Thinking in Pixels
    Constructive
    Automated UI Testing and You
    Pattern Libraries Can Change Your Life
    Modern Workflow & Tooling
    Creating Beautiful, Accessible, and User-
    Friendly Forms
    Restorative
    How to Fight and Prevent Burnout
    Adventurous
    Innovative SVG Animations
    Responsive Web Apps with Container
    Queries
    Impressive Art with CSS
    Data Visualization with 

    Responsive d3.js
    KonMari CSS
    Reactive Animations with CSS Variables
    Sunsetting our Grid Systems and
    Embracing CSS Grid Module
    Communicating Animation
    Motion Paths Beyond SVG
    Level Up Your GIF Game
    HTTP/2 FTW
    

    View Slide

15. Philosophical
    Adventurous
    Constructive
    Restorative
    

    View Slide

16. View Slide

17. Realtime Balance
    Philosophical Adventurous Constructive Restorative
    

    View Slide

18. Seasonal
    Philosophical Adventurous
    Constructive
    Restorative
    

    View Slide

19. Within Our Community
    

    View Slide

20. View Slide

21. The Philosopher
    

    View Slide

22. What should the web be like?

    Why should it be like that?
    

    View Slide

23. The sites we build should not be cul-de-sacs for the
    inquisitive visitors who have found their way to our work
    by whatever unique trails they have followed.
    We should recognize that when we design and publish
    information on the humblest homepage or the grandest
    web app, we are creating connections within a much
    larger machine of knowledge
    Jeremy Keith
    As We May Link, The Manual, Issue 3
    

    View Slide

24. The web’s greatest strength, I believe, is often seen as a
    limitation, as a defect. 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.
    John Allsopp
    A Dao of Web Design, A List Apart 2000
    

    View Slide

25. 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.
    Karen McGrane
    Your Content, Now Mobile, A List Apart 2012
    

    View Slide

26. The Crusader
    

    View Slide

27. How can I translate my beliefs
    about the web into action?
    I want to innovate!
    

    View Slide

28. How old is this remote?
    

    View Slide

29. How old is this remote?
    […] my Time Warner DVR has the exact
    same horrible user interface it had in
    2004. The way technology works is that
    by default, it stands still, and it moves
    forward only when something pushes it
    forward.
    Tim Urban
    How Tesla Will Change The World,
    waitbutwhy.com
    

    View Slide

30. Brad Frost
    http://demo.patternlab.io/
    

    View Slide

31. Jen Simmons
    http://labs.jensimmons.com/
    

    View Slide

32. Tim Kadlec
    https://timkadlec.com/2013/01/setting-a-
    performance-budget/
    

    View Slide

33. The Builder
    

    View Slide

34. How can I do my job effectively
    and efficiently?
    

    View Slide

35. http://ricostacruz.com/cheatsheets/jekyll.html
    

    View Slide

36. https://jakearchibald.github.io/svgomg/
    

    View Slide

37. http://codepen.io/patterns/
    

    View Slide

38. The Restorer
    

    View Slide

39. Can I be okay giving myself time to
    rest, rethink, and reevaluate?
    

    View Slide

40. http://geekmentalhelp.com/
    

    View Slide

41. The web doesn’t naturally
    encourage rest & restoration…
    

    View Slide

42. Write when inspired; rest when tired.
    If you want to be great, or at least to be better, start by
    breathing, taking breaks, and working intensely when
    the mood is on.
    Jeffrey Zeldman
    Write When Inspired, zeldman.com 2009
    

    View Slide

43. View Slide

44. Let’s talk about balance.
    

    View Slide

45. Realtime Balance
    Philosophical Adventurous Constructive Restorative
    

    View Slide

46. Know Thyself
    

    View Slide

47. View Slide

48. Realtime Balance
    Philosophical Adventurous Constructive Restorative
    

    View Slide

49. Seasonal
    Philosophical Adventurous
    Constructive
    Restorative
    

    View Slide

50. View Slide

51. The web should be an expressive
    medium!
    

    View Slide

52. View Slide

53. If I can do it with Photoshop, I will
    do it with HTML & CSS!
    

    View Slide

54. View Slide

55. View Slide

56. Let’s build these exciting things for
    clients too!
    

    View Slide

57. View Slide

58. View Slide

59. Today I found three browser bugs
    and three new gray hairs.
    

    View Slide

60. View Slide

61. Web fonts are here! Let’s make the
    web even more expressive!
    

    View Slide

62. View Slide

63. No limits! I’m going to recreate
    posters and crazy designs with
    web type!
    

    View Slide

64. View Slide

65. View Slide

66. View Slide

67. Other people want to see what’s
    possible with CSS & web type too!
    

    View Slide

68. View Slide

69. View Slide

70. But what about all these devices?
    

    View Slide

71. View Slide

72. View Slide

73. Web design is about embracing
    the grain of the web and designing
    for maximum reach and access.
    

    View Slide

74. View Slide

75. RWD! Fluidity, media queries, etc.
    won’t hold quality or
    expressiveness back!
    

    View Slide

76. View Slide

77. View Slide

78. Device proliferation and RWD
    transformed the industry. There’s a
    ton of work to do!
    

    View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

83. Not everyone shares my new
    perception of the web. Process has
    become even more difficult.
    

    View Slide

84. View Slide

85. View Slide

86. View Slide

87. The quality of my work is limited by
    my ability to effectively
    communicate with others about it.
    

    View Slide

88. View Slide

89. • Easy to Monetize
    • Plenty of Ad Spots
    • Good SEO
    • Increased Traffic
    

    View Slide

90. • Cluttered
    • Sluggish & Slow
    • Redundant
    • Manipulative
    

    View Slide

91. • Clear Hierarchy
    • Good Typography
    • Solid UX
    • Beautiful Imagery
    

    View Slide

92. • Inaccessible
    • Heavy File Size
    • JS Dependent
    • Hover Dependent
    

    View Slide

93. We need design systems and
    prototypes to get everyone on the
    same page!
    

    View Slide

94. View Slide

95. View Slide

96. How do we maintain these
    systems? Why did nobody explain
    all this to the CEO?
    

    View Slide

97. http://www.theverge.com/2013/1/24/3904134/google-redesign-how-larry-page-
    engineered-beautiful-revolution
    

    View Slide

98. Oh. Systems don’t take the place
    of teamwork and collaboration.
    

    View Slide

99. Within Our Community
    

    View Slide

100. We can
     frustrate
     each other.
     

     View Slide

101. “Here’s an amazing new thing
     you can do! Check the demo!”
     

     View Slide

102. “Here’s an amazing new thing
     you can do! Check the demo!”
     “It’s easy—stop being lazy
     and use all these new things!”
     

     View Slide

103. “Cool prototype, but it’s not ready
     for prime time”
     

     View Slide

104. “Cool prototype, but it’s not
     ready for prime time”
     “Fail! I don’t think you’re
     contributing any value here.”
     

     View Slide

105. We can inspire
     each other.
     

     View Slide

106. “I just realized something that
     changed the way I see the web!”
     

     View Slide

107. “Wow! I’m inspired. Check out this
     Codepen!”
     

     View Slide

108. “I used to feel guilty taking time
     off. Now I realize it makes me a
     better collaborator.”
     

     View Slide

109. “Wait—we can admit that?”
     

     View Slide

110. We can
     support
     each other.
     

     View Slide

111. “It’s been a hard month. I need
     some slack.”
     

     View Slide

112. “I hear you. I’ve got your back!”
     

     View Slide

113. Balance
     

     View Slide

114. View Slide

115. View Slide

116. View Slide

117. View Slide

118. View Slide

119. Okay!
     Thanks!
     @TrentWalton
     

     View Slide