Sweating Details - Slides from my talk at Form Function Class 6 in Manila Philippines on Nov 14th, 2015. This talk is about sweating details and how small tweaks and changes can make a big difference in any of the web design stages. From optimising the process, via UX and design all the way to performance, this talk covers possible tweaks and recommendations with some practical examples to improve the overall experience of our products.

1. SWEATING DETAILS
Holger Bartel - @foobartel - Form Function Class 6

2. SWEATING DETAILS
The li le things that make a difference

3. German Perfection

4. German Perfection

5. Falling Short

6. Develop your
a ention to detail

7. Common Problem
Spaces in Web Design

8. Process
User
Experience
Copywriting
Code Design Performance

9. Challenges
Everywhere!

10. Process
User
Experience
Copywriting
Code Design Performance

11. Process
User
Experience
Copywriting
Code Design Performance
Design

12. Sweating Details
On Process

13. It’s all about collaboration.
A sentence so simple, that it’s highly underestimated.

14. Set the right expectations with designers, developers
stakeholders and clients.
Choose the right process for the right job.

15. 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

16. 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.

17. 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.

18. How can a web design be anything else but a website?

19. Style tiles: Sometimes these can be a huge
improvement for your process, other times they might
fail.

21. 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 ;)

22. You mileage might vary.

23. Sweating Details
On User Experience

24. We want our users to feel happy, help them to achieve
their intended goals and make it easy for them to use
our products.

25. Unobtrusive experiences are king.

26. There are many ways to improve a users experience.
!

27. loading…

28. And many ways to ruin it."

30. Do you think I’m
stupid?

31. Do you think I’m
stupid?

32. 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.

33. Is “No” even an option?

34. Too fast! Really?

35. From an airline ticket booking process:

36. * We really don’t want you to book this flight *
What they’re really saying is:

37. Look who’s talking:

40. Small tweaks can make a huge difference.
Choose your words wisely.

41. Test your assumptions.

42. Minimum Usable
Product

45. Sweating Details
On Design

46. As with all other areas of design, testing is important.

48. The spaces in between.
Margins, Padding, Line height & Friends

50. What The
Grid?

61. Sweating Details
On Code

62. The visual outcome of code.
The quality of code ma ers as much.

63. The mobile-first development approach.
Practice what you preach.

64. Frameworks. The same design for everyone.
Themes.
Out of the box clu er.

65. Laziness in the age of the stack overflow developer.

66. Learn your cra . Understand. Practice. Learn again.

79. Testing is important!

80. Saving the best for last ;)

81. Sweating Details
On Performance

82. SmashingConf 2012, Freiburg, Germany

83. Performance
Design
=

84. If you don't get to the site, all the previous stuff
actually doesn't ma er.

85. — Ian Feather
“Performance is a compromise
between design and performance.
You can only be as fast as the
design allows.”

86. Different areas & levels of performance optimisation
Here: Front end performance

87. 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.

88. 01 Oct 2012 - 15 Oct 2014
h p://h parchive.org/interesting.php

89. 01 Oct 2014 - 01 Oct 2015
h p://h parchive.org/interesting.php

90. 42 requests, 6.3 MB

91. 250 requests, 6.7 MB

92. 😝

93. 86 requests, 10.2 MB

94. 78 requests, 25.1 MB

95. Images - The Big Evil
(and an easy fix)
👹

97. Original Optimised
2 MB
@ 298 x 530
73 KB
ImageOptim App

98. Collaboration & communication between designers
and developers nowadays is essential and more
important than ever before.

99. 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.

100. Building for
Performance

101. Render blocking CSS

102. Render blocking JavaScript

103. Loading assets
Every request fetched inside of HEAD, will postpone
the rendering of the page

104. Limit HTTP Requests
Every request takes roughly ~200ms
Avoid unnecessary redirects

105. The Critical Rendering Path
Critical resource
Critical path length
Critical bytes

106. =
Optimising the Critical
Rendering Path
Ge ing 💩 on the
screen fast

109. Tools

110. Performance Testing
http://www.webpagetest.org

111. http://tools.pingdom.com/fpt/
https://developers.google.com/speed/pagespeed/
https://developer.yahoo.com/yslow/
Performance Testing

112. Chrome Dev Tools

113. Perf-Tooling Today
h p://perf-tooling.today

114. Perf Rocks
h p://perf.rocks

115. Perf School
github.com/bevacqua/perfschool

116. With achieving fast page load time, people can quickly
use your site and accomplish what they want.

117. Making it a great experience all the way through…

118. People will appreciate it and end up being much
happier users.
And happy users usually return.

119. Sweat more details

120. and let the web blossom!

121. Thanks!
Holger Bartel | @foobartel | Form Function Class, 14/11/2015