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