CSS Dev Conf 2016 Closing Keynote

http://2016.cssdevconf.com/

Transcript

1. The Seasonal Web Designer @TrentWalton
2. Thank you, Christopher and Ari
3. 98 Conferences http://environmentsforhumans.com/schedule/
6. Balance
7. The pace of the web is unnatural
8. •Learn about new web tech •Build something •See web tech evolve •Realize your thing is obsolete •Repeat
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
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
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
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
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
15. Philosophical Adventurous Constructive Restorative
17. Realtime Balance Philosophical Adventurous Constructive Restorative
18. Seasonal Philosophical Adventurous Constructive Restorative
19. Within Our Community
21. The Philosopher
22. What should the web be like?
 Why should it be like that?
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
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
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
26. The Crusader
27. How can I translate my beliefs about the web into action? I want to innovate!
28. How old is this remote?
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
30. Brad Frost http://demo.patternlab.io/
31. Jen Simmons http://labs.jensimmons.com/
32. Tim Kadlec https://timkadlec.com/2013/01/setting-a- performance-budget/
33. The Builder
34. How can I do my job effectively and efficiently?
35. http://ricostacruz.com/cheatsheets/jekyll.html
36. https://jakearchibald.github.io/svgomg/
37. http://codepen.io/patterns/
38. The Restorer
39. Can I be okay giving myself time to rest, rethink, and reevaluate?
40. http://geekmentalhelp.com/
41. The web doesn’t naturally encourage rest & restoration…
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
44. Let’s talk about balance.
45. Realtime Balance Philosophical Adventurous Constructive Restorative
46. Know Thyself
48. Realtime Balance Philosophical Adventurous Constructive Restorative
49. Seasonal Philosophical Adventurous Constructive Restorative
51. The web should be an expressive medium!
53. If I can do it with Photoshop, I will do it with HTML & CSS!
56. Let’s build these exciting things for clients too!
59. Today I found three browser bugs and three new gray hairs.
61. Web fonts are here! Let’s make the web even more expressive!
63. No limits! I’m going to recreate posters and crazy designs with web type!
67. Other people want to see what’s possible with CSS & web type too!
70. But what about all these devices?
73. Web design is about embracing the grain of the web and designing for maximum reach and access.
75. RWD! Fluidity, media queries, etc. won’t hold quality or expressiveness back!
78. Device proliferation and RWD transformed the industry. There’s a ton of work to do!
83. Not everyone shares my new perception of the web. Process has become even more difficult.
87. The quality of my work is limited by my ability to effectively communicate with others about it.
89. • Easy to Monetize • Plenty of Ad Spots • Good SEO • Increased Traffic
90. • Cluttered • Sluggish & Slow • Redundant • Manipulative
91. • Clear Hierarchy • Good Typography • Solid UX • Beautiful Imagery
92. • Inaccessible • Heavy File Size • JS Dependent • Hover Dependent
93. We need design systems and prototypes to get everyone on the same page!
96. How do we maintain these systems? Why did nobody explain all this to the CEO?
97. http://www.theverge.com/2013/1/24/3904134/google-redesign-how-larry-page- engineered-beautiful-revolution
98. Oh. Systems don’t take the place of teamwork and collaboration.
99. Within Our Community
100. We can frustrate each other.
101. “Here’s an amazing new thing you can do! Check the demo!”
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!”
103. “Cool prototype, but it’s not ready for prime time”
104. “Cool prototype, but it’s not ready for prime time” “Fail! I don’t think you’re contributing any value here.”
105. We can inspire each other.
106. “I just realized something that changed the way I see the web!”
107. “Wow! I’m inspired. Check out this Codepen!”
108. “I used to feel guilty taking time off. Now I realize it makes me a better collaborator.”
109. “Wait—we can admit that?”
110. We can support each other.
111. “It’s been a hard month. I need some slack.”
112. “I hear you. I’ve got your back!”
113. Balance
119. Okay! Thanks! @TrentWalton