LAUNCH
DESIGN
FRONT
END
BACK
END
CONTENT
DECISIONS
MADE
DECISIONS
MADE
DECISIONS
MADE
DECISIONS
MADE
CONTENT UX
FRONT-END
DESIGN
BACK-END
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
There is no “One Way.”
Slide 33
Slide 33 text
Embrace the constraints.
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Find a way.
Slide 36
Slide 36 text
Choose your tools.
Slide 37
Slide 37 text
PRODUCTIVITY
TIME
Dissecting Workflow
Slide 38
Slide 38 text
PRODUCTIVITY
TIME
Dissecting Workflow
Slide 39
Slide 39 text
Establish
DISSECTING WORKFLOW
Slide 40
Slide 40 text
Solve
DISSECTING WORKFLOW
Slide 41
Slide 41 text
Refine
DISSECTING WORKFLOW
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
THE WAY WE BUILD THE WEB
ESTABLISH
Slide 44
Slide 44 text
Content Audit
Slide 45
Slide 45 text
Style Comparisons
“I could create an illustration or a 3D
rendering of what I want my new office to
look like, but that doesn’t take advantage
of his great ideas. It’s dictation, not
collaboration. Instead, I show him a
Pinterest board my wife and I created.”
!
@danielmall
http://danielmall.com/articles/the-post-psd-era/
Slide 46
Slide 46 text
Style Comparisons
Light vs Dark
Slide 47
Slide 47 text
Style Comparisons
Flat vs Textured
Slide 48
Slide 48 text
Style Comparisons
Illustration vs Photography
Slide 49
Slide 49 text
Style Tiles
Slide 50
Slide 50 text
Style Tiles
Slide 51
Slide 51 text
Style Tiles
Slide 52
Slide 52 text
Style Prototypes
Slide 53
Slide 53 text
Style Prototypes
Slide 54
Slide 54 text
Style Prototypes
Slide 55
Slide 55 text
Comfort
Slide 56
Slide 56 text
THE WAY WE BUILD THE WEB
SOLVE
Slide 57
Slide 57 text
Content Priority Guide
Slide 58
Slide 58 text
Content Prototype
Slide 59
Slide 59 text
Static Wireframes
Slide 60
Slide 60 text
Interactive Wireframes
Slide 61
Slide 61 text
Static Design Tools
Slide 62
Slide 62 text
Static Design Tools
Slide 63
Slide 63 text
Static Design Tools
Slide 64
Slide 64 text
Responsive Design Tools
Slide 65
Slide 65 text
Responsive Design Tools
Slide 66
Slide 66 text
Responsive Design Tools
Slide 67
Slide 67 text
HTML/CSS/JS
Slide 68
Slide 68 text
Fluency
Slide 69
Slide 69 text
THE WAY WE BUILD THE WEB
REFINE
Slide 70
Slide 70 text
Refine in code.
Slide 71
Slide 71 text
LAUNCH
DESIGN
FRONT
END
BACK
END
CONTENT
DECISIONS
MADE
DECISIONS
MADE
DECISIONS
MADE
DECISIONS
MADE
Refine in code.
Slide 72
Slide 72 text
Refine in code.
Slide 73
Slide 73 text
Refine in code.
You don’t want to do the long
tail more than once
Slide 74
Slide 74 text
Refine in code.
The Switching Point
Slide 75
Slide 75 text
Efficiency
Slide 76
Slide 76 text
EXERCISE
Slide 77
Slide 77 text
Draw your current process.
Slide 78
Slide 78 text
Draw your ideal process.
Slide 79
Slide 79 text
WORKFLOW ON RWD PROJECTS
THE CHALLENGE OF
THE INDIVIDUAL
PART 2
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
Group improvisation is a challenge. Aside
from the weighty technical problem of
collective coherent thinking, there is the very
human, even social need for sympathy from
all members to bend for the common result.
!
Bill Evans
Slide 82
Slide 82 text
Group Improvisation
Slide 83
Slide 83 text
Group improvisation is a challenge. Aside
from the weighty technical problem of
collective coherent thinking, there is the very
human, even social need for sympathy from
all members to bend for the common result.
!
Bill Evans
Slide 84
Slide 84 text
Group improvisation is a challenge. Aside
from the weighty technical problem of
collective coherent thinking, there is the very
human, even social need for sympathy from
all members to bend for the common result.
!
Bill Evans
Slide 85
Slide 85 text
The Challenge of the Individual
Slide 86
Slide 86 text
The Challenge of the Individual
Fluency Humility Empathy
Fostering Humility
“Fail without the fear of failure.”
Mark Boulton
http://www.markboulton.co.uk/journal/it-s-not-working-for-me-crit
Slide 105
Slide 105 text
‣ Listen, then talk.
‣ It’s about the work.
‣ It’s a conversation.
‣ It’s public.
‣ What’s said in a critique, stays in a
critique.
Fostering Humility
http://www.markboulton.co.uk/journal/it-s-not-working-for-me-crit
Slide 106
Slide 106 text
Fostering Humility
“What a fun read—an exciting time to be part of the Sparkbox team!”
!
“You constantly remind me that signing on to work at Sparkbox was
the right thing to do.”
!
“Thanks for this. I love reading your thoughtful emails—seriously.”
!
“Thanks. I don’t think many people get these kinds of thoughtful
emails from bosses. Much appreciated.”
Talk About Successes
Slide 107
Slide 107 text
Fostering Humility
Start taking the blame.
Stop taking the credit.
Slide 108
Slide 108 text
Fostering Humility
Do the Dishes
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
THE CHALLENGE OF THE INDIVIDUAL
EMPATHY
Slide 111
Slide 111 text
Empathy is struggling with your
teammates in areas where you
are not fluent.
Slide 112
Slide 112 text
Fluency
Ignorance
Slide 113
Slide 113 text
Ignorance
User
Experience
User
Interface
Fluency
Content CMS
Slide 114
Slide 114 text
Ignorance
User
Experience
User
Interface
Fluency
Content CMS
Slide 115
Slide 115 text
Ignorance
User
Experience
User
Interface
Fluency
Content CMS
Slide 116
Slide 116 text
Ignorance
User
Experience
User
Interface
Threshold
of Empathy
Fluency
Content CMS
Slide 117
Slide 117 text
Ignorance
Content
User
Experience
User
Interface
CMS
Threshold
of Empathy
Fluency
Slide 118
Slide 118 text
The Empathetic Web Maker
Content
User
Experience
User
Interface
CMS
Gap Analysis
Information Architecture
Content Priority
Wireframe
Usability Test
Heuristic Evaluation
Visual Design
Typography
Illustration
Content Modeling
Management Workflow
Content Governance
Semantic Markup
(HTML)
Interaction Layer
(JS)
Style
(CSS)
Ruby
PHP
.NET
Design
Develop
Empathy
Slide 119
Slide 119 text
No content
Slide 120
Slide 120 text
Back to our roots.
Slide 121
Slide 121 text
Our specializations of expertise are
fragmenting the experiences we build.
Slide 122
Slide 122 text
Empathy requires a vision for
something bigger than ourselves.
Slide 123
Slide 123 text
We’re better when we work together.
Slide 124
Slide 124 text
Fostering Empathy
Slide 125
Slide 125 text
Fostering Empathy
Non-Obvious Pairing
Slide 126
Slide 126 text
Fostering Empathy
Eat Together
Slide 127
Slide 127 text
Fostering Empathy
The Cheesy Lunch & Learn
Slide 128
Slide 128 text
Fostering Empathy
Nobody Struggles Alone
Slide 129
Slide 129 text
The Challenge of the Individual
Fluency Humility Empathy
Slide 130
Slide 130 text
THE CHALLENGE OF THE INDIVIDUAL
FROM THE TRENCHES
Slide 131
Slide 131 text
No content
Slide 132
Slide 132 text
No content
Slide 133
Slide 133 text
No content
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
No content
Slide 136
Slide 136 text
No content
Slide 137
Slide 137 text
No content
Slide 138
Slide 138 text
No content
Slide 139
Slide 139 text
No content
Slide 140
Slide 140 text
How do you stay humble?
Strive for fluency. Embrace empathy.
Slide 141
Slide 141 text
Humility
Fluency
Empathy
Slide 142
Slide 142 text
EXERCISE
Slide 143
Slide 143 text
Ignorance
Fluency
Areas of Expertise
Slide 144
Slide 144 text
WORKFLOW ON RWD PROJECTS
THE CHALLENGE OF
THE TEAM
PART 3
Slide 145
Slide 145 text
No content
Slide 146
Slide 146 text
Group Improvisation
Slide 147
Slide 147 text
Group improvisation is a challenge. Aside
from the weighty technical problem of
collective coherent thinking, there is the very
human, even social need for sympathy from
all members to bend for the common result.
!
Bill Evans
Slide 148
Slide 148 text
Group improvisation is a challenge. Aside
from the weighty technical problem of
collective coherent thinking, there is the very
human, even social need for sympathy from
all members to bend for the common result.
!
Bill Evans
Slide 149
Slide 149 text
The Challenge of the Team
Slide 150
Slide 150 text
How do we facilitate
true collaboration?
Slide 151
Slide 151 text
No content
Slide 152
Slide 152 text
No content
Slide 153
Slide 153 text
No content
Slide 154
Slide 154 text
No content
Slide 155
Slide 155 text
No content
Slide 156
Slide 156 text
No content
Slide 157
Slide 157 text
Create guidelines instead
of rigid process.
Slide 158
Slide 158 text
The rigidity of your process should be
inversely proportional to the level of
fluency, humility, and empathy
demonstrated by your team.
Slide 159
Slide 159 text
Ability to
improvise
Fluency, humility, empathy demonstrated by team
Slide 160
Slide 160 text
Inexperienced Experienced
Rigid Process
Group Improvisation
• Missed deadlines
• Blown budgets
• Poor work
• Frustrated team
• Doubt in leadership
• Great work
• Meet deadlines
• Sense that there’s
a better way
• Average work
• Culture of trust
• Regular innovation
• Timeless work
Slide 161
Slide 161 text
Inexperienced Experienced
Rigid Process
Group Improvisation
• Missed deadlines
• Blown budgets
• Poor work
• Frustrated team
• Doubt in leadership
• Great work
• Meet deadlines
• Sense that there’s
a better way
• Average work
• Culture of trust
• Regular innovation
• Timeless work
Slide 162
Slide 162 text
Inexperienced Experienced
Rigid Process
Group Improvisation
• Missed deadlines
• Blown budgets
• Poor work
• Frustrated team
• Doubt in leadership
• Great work
• Meet deadlines
• Sense that there’s
a better way
• Average work
• Culture of trust
• Regular innovation
• Timeless work
Slide 163
Slide 163 text
Collaboration is a balance between
freedom and accountability.
Slide 164
Slide 164 text
Collaboration is a balance between
freedom and accountability.
“Without the possibility of failure, there is no
possibility for real success. You have to introduce
real risk for something really good to happen.”
!
Ben Sidran
Slide 165
Slide 165 text
Collaboration is a child of
culture—it must be fostered.
Fostering Collaboration
Peaceful disagreement is a sign that
there might be a better way.
Slide 170
Slide 170 text
People who work
in the business.
People who work
on the business.
Fostering Collaboration
Slide 171
Slide 171 text
Collaborative Space
Slide 172
Slide 172 text
No content
Slide 173
Slide 173 text
No content
Slide 174
Slide 174 text
No content
Slide 175
Slide 175 text
Whiteboards FTW.
Slide 176
Slide 176 text
Collaborative Workflows
Slide 177
Slide 177 text
Collaborative Workflows
Slide 178
Slide 178 text
Collaborative Workflows
Slide 179
Slide 179 text
Collaborative Workflows
Slide 180
Slide 180 text
Collaboration is all or nothing.
Let’s talk about clients.
Slide 181
Slide 181 text
Clients are people.
Slide 182
Slide 182 text
Collaborative Estimation
Slide 183
Slide 183 text
Hourly Pricing
$200
$165
half day
full day
Slide 184
Slide 184 text
Frequent Updates
Slide 185
Slide 185 text
Work for Hire
Slide 186
Slide 186 text
Frame the Project
“Problem solving is actually some of the most
valuable work that we do for our clients. Taking our
technology expertise and coupling it with their business
expertise allows us to really think outside the box for
profitable solutions. We’ve found that creative solutions
often come when a third party looks at a problem from
outside normal day-to-day operations.”
Rob Harr
Slide 187
Slide 187 text
Initial Engagements
Slide 188
Slide 188 text
Leveling clients up
Slide 189
Slide 189 text
THE CHALLENGE OF THE TEAM
FROM THE TRENCHES
Slide 190
Slide 190 text
Sparkbox Team
Slide 191
Slide 191 text
Sparkbox Team
Slide 192
Slide 192 text
Web
Developer
Creative
Director
Technical
Director
UX
Director
Content
Director
Web
Developer
Project
Manager
At Sparkbox
Slide 193
Slide 193 text
Web
Empathy
Development
Fluency
At Paravel
Design
Fluency
Slide 194
Slide 194 text
Designer Developer
Project
Manager
At Happy Cog
Designer Developer
Slide 195
Slide 195 text
EXERCISE
Slide 196
Slide 196 text
Inexperienced Experienced
Rigid Process
Group Improvisation
• Missed deadlines
• Blown budgets
• Trouble shipping
• Frustrated team
• Doubt in leadership
• Average work
• Meet deadlines
• Sense that there’s
a better way
• Average work
• Culture of trust
• Regular innovation
• Timeless work
Slide 197
Slide 197 text
Draw your current team structure.
Slide 198
Slide 198 text
Draw your ideal team structure.
Slide 199
Slide 199 text
LEARN FROM OUR MISTAKES
LESSONS LEARNED
PART 4
Slide 200
Slide 200 text
Testing
Slide 201
Slide 201 text
LESSONS LEARNED
Testing
‣ You must test on real devices
‣ Do your development in a webkit
browser
‣ Build libraries of your patterns
Slide 202
Slide 202 text
Pricing
Slide 203
Slide 203 text
LESSONS LEARNED
Pricing
‣ As much as 100% more, initially
‣ Likely to be 50% more, soon after
‣ Probably never less than 25% more
Slide 204
Slide 204 text
LESSONS LEARNED
Pricing
‣ As much as 100% more, initially
‣ Likely to be 50% more, soon after
‣ Probably never less than 25% more
COMPARED TO
WHAT?
Performance
‣ Optimize or cut out images
‣ Decrease the number of requests
‣ Gzip if you can
‣ Concat and minify CSS/JS
‣ Load CSS at the top
‣ Load JS at the bottom
‣ Follow @souders on Twitter
Slide 215
Slide 215 text
Barriers
Slide 216
Slide 216 text
Barriers
The people are what make this hard.
Slide 217
Slide 217 text
The Maze
Slide 218
Slide 218 text
amazon.com
Slide 219
Slide 219 text
amazon.com
Slide 220
Slide 220 text
amazon.com
Slide 221
Slide 221 text
amazon.com
Slide 222
Slide 222 text
amazon.com
Slide 223
Slide 223 text
amazon.com
Slide 224
Slide 224 text
Congratulations!
In celebration of all your hard work
and discipline, as a reward for all the
risk you’ve taken to reach this point,
we’re quite pleased to present you
with…YOUR CONTENT!
!
Keep up the good work!
!
~ The Management
Trigger Indicators
‣ Words
‣ menu, main menu
‣ nav, navigation
‣ site specific
(sections, topics,
products, etc.)
‣ Icons
‣ plus
‣ hamburger
‣ arrows
‣ “x”
Slide 229
Slide 229 text
TRIGGER INDICATORS
Words
Slide 230
Slide 230 text
TRIGGER INDICATORS
Icons
Plus Hamburger Down Arrow
Slide 231
Slide 231 text
TRIGGER INDICATORS
Other & Combinations
Slide 232
Slide 232 text
Trigger Indicators
‣ Words
‣ menu, main menu
‣ nav, navigation
‣ site specific
(sections, topics,
products, etc.)
‣ Icons
‣ plus
‣ hamburger
‣ arrows
‣ “x”
Slide 233
Slide 233 text
Trigger Patterns
(or, Reveal Patterns)
Slide 234
Slide 234 text
Trigger Patterns
‣ Always Available
‣ Anchor to Footer
‣ Select Element
‣ Make Room
‣ Cover Up
‣ Off Canvas
‣ Priority +
‣ Full Screen Takeover
Slide 235
Slide 235 text
TRIGGER PATTERNS: ALWAYS AVAILABLE
Slide 236
Slide 236 text
TRIGGER PATTERNS: ANCHOR TO FOOTER
Slide 237
Slide 237 text
TRIGGER PATTERNS: SELECT ELEMENT
Slide 238
Slide 238 text
iOS 7
TRIGGER PATTERNS: SELECT ELEMENT
Slide 239
Slide 239 text
TRIGGER PATTERNS: SELECT ELEMENT
Chrome on OS X
Slide 240
Slide 240 text
TRIGGER PATTERNS: MAKE ROOM
Slide 241
Slide 241 text
TRIGGER PATTERNS: COVER UP
Slide 242
Slide 242 text
TRIGGER PATTERNS: OFF CANVAS
Slide 243
Slide 243 text
TRIGGER PATTERNS: PRIORITY +
Slide 244
Slide 244 text
TRIGGER PATTERNS: FULL SCREEN TAKEOVER
Slide 245
Slide 245 text
Trigger Patterns
‣ Always Available
‣ Anchor to Footer
‣ Select Element
‣ Make Room
‣ Cover Up
‣ Off Canvas
‣ Priority +
‣ Full Screen Takeover
Slide 246
Slide 246 text
Interaction Indicators
Slide 247
Slide 247 text
INTERACTION INDICATORS
Icons
Slide 248
Slide 248 text
Interaction Indicators
‣ Icons
‣ plus
‣ dash
‣ “x”
‣ various arrows
Other Considerations
‣ JavaScript
‣ Visible by Default
‣ Anchor to Footer
‣ Single DOM
Slide 265
Slide 265 text
mediaCheck, by @robtarr
Slide 266
Slide 266 text
Other Considerations
‣ Usability
‣ User Expectations
‣ Plan for the Worst
‣ Teach Use
Slide 267
Slide 267 text
What’s Next
Slide 268
Slide 268 text
Fluency
Slide 269
Slide 269 text
Jakob Nielsen Says...
‣ Build a separate mobile site
‣ Cut features
‣ Cut content
http://www.nngroup.com/articles/mobile-site-vs-full-site/
Slide 270
Slide 270 text
Jakob Nielsen Says...
‣ Build a separate mobile site
‣ Cut features
‣ Cut content
http://www.nngroup.com/articles/mobile-site-vs-full-site/
PLEASE, NO.
Slide 271
Slide 271 text
The Responsive Dip
!
http://bit.ly/MasqBk
Slide 272
Slide 272 text
Responsive web design is about
much more than making stuff fit
on small screens.
Slide 273
Slide 273 text
viewport width
input method
context
low bandwidth
no bandwidth
available light
location
history
state of mind
intent
viewport height
right content speed
user preference
cross-width consistency
Web Design
Slide 274
Slide 274 text
Web Design
viewport width
input method
context
low bandwidth
no bandwidth
available light
location
history
state of mind
intent
viewport height
right content
speed
user preference
cross-width consistency
Slide 275
Slide 275 text
The Responsive Mindset
!
“The truly responsive design web
designer wasn’t born until after the
launch of the iPhone. We haven’t seen his
or her work yet.”
!
Andy Clarke
!
http://the-pastry-box-project.net/andy-clarke/2012-april-8/
Slide 276
Slide 276 text
There are many
problems left to solve.
!
We’ll solve them much faster if we
solve them together.