Download to read offline
Uploaded byStoian Dipchikov
UXify 2015 - Front-end Developers' Checklist for Better UX
This document presents a checklist for front-end developers aimed at enhancing user experience (UX). It emphasizes the importance of optimizing resources for page speed and includes specific strategies such as lazy loading, proper usage of CSS, and improving accessibility through the use of attributes. Additionally, it highlights common pitfalls like improper tabindex management and the need for careful handling of mobile web features.
UXify 2015 - Front-end Developers' Checklist for Better UX
- 1. FRONT-END DEVELOPERS' CHECKLIST FOR BETTER UX Stoyan Dipchikov! CTO / Despark
- 2.
- 3. Why do front-enddevs need to be involved in the UX
- 4.
- 5. The crazy tabindex
- 6.
- 7.
- 8. University of Advancing Technology’swebsite" (http://www.uat.edu/)
- 10.
- 11. Page speed iscruicial
- 12. Optimize your resources • Optimized PNGs • Image sprites • Minified CSS & JS • Progressive JPGs
- 13. Lazy loading of content • Search results • Other less important parts of the page
- 14. SVG icon fonts IcoMoon.io
- 15. CSS pseudo elements • ::before • ::after • :nth-child(even) • :nth-child(odd)
- 16.
- 17. Resource pre-fetching <link rel=“prefetch”href=“sprite.png”>
- 18.
- 19. Reduce DNS look-ups • https://si0.twimg.com! • https://fbstatic-a.akamaihd.net/!
- 20. CSS on top,JS at the bottom
- 21. Some more usefultips • Be careful with the tabindex
- 22. Some more usefultips • Be careful with the tabindex • Mobile web
- 23. Some more usefultips • Be careful with the tabindex • Mobile web • Wise hover transformations
- 24. Some more usefultips • Be careful with the tabindex • Mobile web • Wise hover transformations • Use pre-processors
- 25. Some more usefultips • Be careful with the tabindex • Mobile web • Wise hover transformations • Use pre-processors • ENTER SHOULD SUBMIT
- 26. Some more usefultips • Be careful with the tabindex • Mobile web • Wise hover transformations • Use pre-processors • ENTER SHOULD SUBMIT • Focus on dynamically added form elements +!
- 27. Some more usefultips • Make use of the for=“” attribute ✔!
- 28. Some more usefultips • Make use of the for=“” attribute ✔!• Title attributes for better accessibility
- 29. Some more usefultips • Make use of the for=“” attribute ✔!• Title attributes for better accessibility • Always use 3rd party modal popups X
- 30. Some more usefultips • Make use of the for=“” attribute ✔!• Title attributes for better accessibility • Always use 3rd party modal popups X • Don’t forget the social sharing meta
- 31. Some more usefultips • Make use of the for=“” attribute ✔!• Title attributes for better accessibility • Always use 3rd party modal popups X • Don’t forget the social sharing meta • No more custom selects
- 33.
- 34.