Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
We have been talking about design in the browser for
many years now, still there is no perfect tool yet.
I still come acro...
More clearly: Get designs in the browser early.
Shi the design deliverables to be code - Because
design is more than only ...
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...
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...
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 y...
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 ...
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/
Performanc...
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
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Upcoming SlideShare
Loading in …5
×

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

1,232 views

Published on

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.

Published in: Technology
  • Be the first to comment

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

  1. 1. SWEATING DETAILS Holger Bartel - @foobartel - Form Function Class 6
  2. 2. SWEATING DETAILS The li le things that make a difference
  3. 3. German Perfection
  4. 4. German Perfection
  5. 5. Falling Short
  6. 6. Develop your a ention to detail
  7. 7. Common Problem Spaces in Web Design
  8. 8. Process User Experience Copywriting Code Design Performance
  9. 9. Challenges Everywhere!
  10. 10. Process User Experience Copywriting Code Design Performance
  11. 11. Process User Experience Copywriting Code Design Performance Design
  12. 12. Sweating Details On Process
  13. 13. It’s all about collaboration. A sentence so simple, that it’s highly underestimated.
  14. 14. Set the right expectations with designers, developers stakeholders and clients. Choose the right process for the right job.
  15. 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. 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. 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. 18. How can a web design be anything else but a website?
  19. 19. Style tiles: Sometimes these can be a huge improvement for your process, other times they might fail.
  20. 20. 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 ;)
  21. 21. You mileage might vary.
  22. 22. Sweating Details On User Experience
  23. 23. We want our users to feel happy, help them to achieve their intended goals and make it easy for them to use our products.
  24. 24. Unobtrusive experiences are king. 

  25. 25. There are many ways to improve a users experience. !
  26. 26. loading…
  27. 27. And many ways to ruin it."
  28. 28. Do you think I’m stupid?
  29. 29. Do you think I’m stupid?
  30. 30. 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.
  31. 31. Is “No” even an option?
  32. 32. Too fast! Really?
  33. 33. From an airline ticket booking process:
  34. 34. * We really don’t want you to book this flight * What they’re really saying is:
  35. 35. Look who’s talking:
  36. 36. Small tweaks can make a huge difference. Choose your words wisely.
  37. 37. Test your assumptions.
  38. 38. Minimum Usable Product
  39. 39. Sweating Details On Design
  40. 40. As with all other areas of design, testing is important.
  41. 41. The spaces in between. Margins, Padding, Line height & Friends
  42. 42. What The Grid?
  43. 43. Sweating Details On Code
  44. 44. The visual outcome of code. The quality of code ma ers as much.
  45. 45. The mobile-first development approach. Practice what you preach.
  46. 46. Frameworks. The same design for everyone. Themes. Out of the box clu er.
  47. 47. Laziness in the age of the stack overflow developer.
  48. 48. Learn your cra . Understand. Practice. Learn again.
  49. 49. Testing is important!
  50. 50. Saving the best for last ;)
  51. 51. Sweating Details On Performance
  52. 52. SmashingConf 2012, Freiburg, Germany
  53. 53. Performance Design =
  54. 54. If you don't get to the site, all the previous stuff actually doesn't ma er.
  55. 55. — Ian Feather “Performance is a compromise between design and performance. You can only be as fast as the design allows.”
  56. 56. Different areas & levels of performance optimisation Here: Front end performance
  57. 57. 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.
  58. 58. 01 Oct 2012 - 15 Oct 2014 h p://h parchive.org/interesting.php
  59. 59. 01 Oct 2014 - 01 Oct 2015 h p://h parchive.org/interesting.php
  60. 60. 42 requests, 6.3 MB
  61. 61. 250 requests, 6.7 MB
  62. 62. 😝
  63. 63. 86 requests, 10.2 MB
  64. 64. 78 requests, 25.1 MB
  65. 65. Images - The Big Evil (and an easy fix) 👹
  66. 66. Original Optimised 2 MB @ 298 x 530 73 KB ImageOptim App
  67. 67. Collaboration & communication between designers and developers nowadays is essential and more important than ever before.
  68. 68. 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.
  69. 69. Building for Performance
  70. 70. Render blocking CSS
  71. 71. Render blocking JavaScript
  72. 72. Loading assets Every request fetched inside of HEAD, will postpone the rendering of the page
  73. 73. Limit HTTP Requests Every request takes roughly ~200ms Avoid unnecessary redirects
  74. 74. The Critical Rendering Path Critical resource Critical path length Critical bytes
  75. 75. = Optimising the Critical Rendering Path Ge ing 💩 on the screen fast
  76. 76. Tools
  77. 77. Performance Testing http://www.webpagetest.org
  78. 78. http://tools.pingdom.com/fpt/ https://developers.google.com/speed/pagespeed/ https://developer.yahoo.com/yslow/ Performance Testing
  79. 79. Chrome Dev Tools
  80. 80. Perf-Tooling Today h p://perf-tooling.today
  81. 81. Perf Rocks h p://perf.rocks
  82. 82. Perf School github.com/bevacqua/perfschool
  83. 83. With achieving fast page load time, people can quickly use your site and accomplish what they want.
  84. 84. Making it a great experience all the way through…
  85. 85. People will appreciate it and end up being much happier users. And happy users usually return.
  86. 86. Sweat more details
  87. 87. and let the web blossom!
  88. 88. Thanks! Holger Bartel | @foobartel | Form Function Class, 14/11/2015

×