Form Function Class 6, Manila, Philippines 14/11/2015
•
4 likes•1,520 views
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.
Report
Share
More Related Content
What's hot
What's hot (19)
Similar to Form Function Class 6, Manila, Philippines 14/11/2015
Similar to Form Function Class 6, Manila, Philippines 14/11/2015 (20)
More from Holger Bartel
More from Holger Bartel (14)
Recently uploaded
Recently uploaded (20)
Form Function Class 6, Manila, Philippines 14/11/2015
- 1. SWEATING DETAILS Holger Bartel - @foobartel - Form Function Class 6
- 2. SWEATING DETAILS The li le things that make a difference
- 6. Develop your a ention to detail
- 7. Common Problem Spaces in Web Design
- 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?
- 35. From an airline ticket booking process:
- 36. * We really don’t want you to book this flight * What they’re really saying is:
- 40. Small tweaks can make a huge difference. Choose your words wisely.
- 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?
- 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.
- 80. Saving the best for last ;)
- 82. SmashingConf 2012, Freiburg, Germany
- 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.
- 101. Render blocking CSS
- 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
- 112. Chrome Dev Tools
- 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