SWEATING DETAILS
Holger Bartel - @foobartel - Form Function Class 6
SWEATING DETAILS
The li le things that make a difference
German Perfection
German Perfection
Falling Short
Develop your
a ention to detail
Common Problem
Spaces in Web Design
Process
User
Experience
Copywriting
Code Design Performance
Challenges
Everywhere!
Process
User
Experience
Copywriting
Code Design Performance
Process
User
Experience
Copywriting
Code Design Performance
Design
Sweating Details
On Process
It’s all about collaboration.
A sentence so simple, that it’s highly underestimated.
Set the right expectations with designers, developers
stakeholders and clients.
Choose the right process for the right job.
Projects are all about people and not all people are
the same.
Get a sense for what can work for different teams and
try to push a bit further, but stay close to their comfort
zone
We have been talking about design in the browser for
many years now, still there is no perfect tool yet.
I still come across many web design projects where the
main design delivery are Photoshop files.
More clearly: Get designs in the browser early.
Shi the design deliverables to be code - Because
design is more than only a layer of paint.
How can a web design be anything else but a website?
Style tiles: Sometimes these can be a huge
improvement for your process, other times they might
fail.
Design systems, living style guides and tools like
Pa ern Lab and can help in the process.
The next challenges are already waiting in line ;)
You mileage might vary.
Sweating Details
On User Experience
We want our users to feel happy, help them to achieve
their intended goals and make it easy for them to use
our products.
Unobtrusive experiences are king. 

There are many ways to improve a users experience.
!
loading…
And many ways to ruin it."
Do you think I’m
stupid?
Do you think I’m
stupid?
Copy text, user feedback, error messages, alerts 

- we’ve seen them all many times.
It’s bad enough errors happen, but if they do, at least
make use of your chance to communicate to your
users.
Is “No” even an option?
Too fast! Really?
From an airline ticket booking process:
* We really don’t want you to book this flight *
What they’re really saying is:
Look who’s talking:
Small tweaks can make a huge difference.
Choose your words wisely.
Test your assumptions.
Minimum Usable
Product
Sweating Details
On Design
As with all other areas of design, testing is important.
The spaces in between.
Margins, Padding, Line height & Friends
What The
Grid?
Sweating Details
On Code
The visual outcome of code.
The quality of code ma ers as much.
The mobile-first development approach.
Practice what you preach.
Frameworks. The same design for everyone.
Themes.
Out of the box clu er.
Laziness in the age of the stack overflow developer.
Learn your cra . Understand. Practice. Learn again.
Testing is important!
Saving the best for last ;)
Sweating Details
On Performance
SmashingConf 2012, Freiburg, Germany
Performance
Design
=
If you don't get to the site, all the previous stuff
actually doesn't ma er.
— Ian Feather
“Performance is a compromise
between design and performance.
You can only be as fast as the
design allows.”
Different areas & levels of performance optimisation
Here: Front end performance
Many sites take 10s + to load. 



If you can reduce this by half, it’s already much be er. 

3-5s is quite good. 



If you want to be faster than 3s, its usually quite some
work.
01 Oct 2012 - 15 Oct 2014
h p://h parchive.org/interesting.php
01 Oct 2014 - 01 Oct 2015
h p://h parchive.org/interesting.php
42 requests, 6.3 MB
250 requests, 6.7 MB
😝
86 requests, 10.2 MB
78 requests, 25.1 MB
Images - The Big Evil
(and an easy fix)
👹
Original Optimised
2 MB
@ 298 x 530
73 KB
ImageOptim App
Collaboration & communication between designers
and developers nowadays is essential and more
important than ever before.
Get designs into the browser as soon as possible, so
you, your team and your client can get a be er feel for
what it will be like in the real world.
Building for
Performance
Render blocking CSS
Render blocking JavaScript
Loading assets
Every request fetched inside of HEAD, will postpone
the rendering of the page
Limit HTTP Requests
Every request takes roughly ~200ms
Avoid unnecessary redirects
The Critical Rendering Path
Critical resource
Critical path length
Critical bytes
=
Optimising the Critical
Rendering Path
Ge ing 💩 on the
screen fast
Tools
Performance Testing
http://www.webpagetest.org
http://tools.pingdom.com/fpt/
https://developers.google.com/speed/pagespeed/
https://developer.yahoo.com/yslow/
Performance Testing
Chrome Dev Tools
Perf-Tooling Today
h p://perf-tooling.today
Perf Rocks
h p://perf.rocks
Perf School
github.com/bevacqua/perfschool
With achieving fast page load time, people can quickly
use your site and accomplish what they want.
Making it a great experience all the way through…
People will appreciate it and end up being much
happier users.
And happy users usually return.
Sweat more details
and let the web blossom!
Thanks!
Holger Bartel | @foobartel | Form Function Class, 14/11/2015

Form Function Class 6, Manila, Philippines 14/11/2015