CSS Dev Conf 2016 Closing Keynote

7aad555700fb85bf9787067349ac7ba9?s=47 Trent Walton
October 18, 2016

CSS Dev Conf 2016 Closing Keynote

7aad555700fb85bf9787067349ac7ba9?s=128

Trent Walton

October 18, 2016
Tweet

Transcript

  1. The Seasonal Web Designer @TrentWalton

  2. Thank you, Christopher and Ari

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

  4. None
  5. None
  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
  9. None
  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

  16. None
  17. Realtime Balance Philosophical Adventurous Constructive Restorative

  18. Seasonal Philosophical Adventurous Constructive Restorative

  19. Within Our Community

  20. None
  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
  43. None
  44. Let’s talk about balance.

  45. Realtime Balance Philosophical Adventurous Constructive Restorative

  46. Know Thyself

  47. None
  48. Realtime Balance Philosophical Adventurous Constructive Restorative

  49. Seasonal Philosophical Adventurous Constructive Restorative

  50. 1

  51. The web should be an expressive medium!

  52. None
  53. If I can do it with Photoshop, I will do

    it with HTML & CSS!
  54. None
  55. None
  56. Let’s build these exciting things for clients too!

  57. None
  58. None
  59. Today I found three browser bugs and three new gray

    hairs.
  60. 2

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

    expressive!
  62. None
  63. No limits! I’m going to recreate posters and crazy designs

    with web type!
  64. None
  65. None
  66. None
  67. Other people want to see what’s possible with CSS &

    web type too!
  68. None
  69. None
  70. But what about all these devices?

  71. 3

  72. None
  73. Web design is about embracing the grain of the web

    and designing for maximum reach and access.
  74. None
  75. RWD! Fluidity, media queries, etc. won’t hold quality or expressiveness

    back!
  76. None
  77. None
  78. Device proliferation and RWD transformed the industry. There’s a ton

    of work to do!
  79. None
  80. None
  81. None
  82. None
  83. Not everyone shares my new perception of the web. Process

    has become even more difficult.
  84. None
  85. None
  86. 4

  87. The quality of my work is limited by my ability

    to effectively communicate with others about it.
  88. None
  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!
  94. None
  95. None
  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

  114. None
  115. None
  116. None
  117. None
  118. None
  119. Okay! Thanks! @TrentWalton