UXify 2015 - Front-end Developers' Checklist for Better UX
•
2 gefällt mir•1,115 views
Good UX has always been one of the key factors for success in the contemporary web development and there fore has led to huge improvements in our industry in the last years. Nowadays the UX of a software product is not responsibility only of the UX Architects / Producers, but to each individual involved in the creation of an app or a website, including the Front-end developers. The talk presents a summarized list of DOs and DON’Ts, which Stoyan and his team believe should be respected by the Front-end developers if they want to build a useable web product, up to and above industry standards. There will be a lot of case studies and actual examples taken from Despark’s experience in the field.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie UXify 2015 - Front-end Developers' Checklist for Better UX
Ähnlich wie UXify 2015 - Front-end Developers' Checklist for Better UX (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
UXify 2015 - Front-end Developers' Checklist for Better UX
- 1. FRONT-END DEVELOPERS' CHECKLIST FOR BETTER UX Stoyan Dipchikov! CTO / Despark
- 3. Why do front-end devs need to be involved in the UX
- 4. DON’Ts
- 5. The crazy tab index
- 6. No Mobile
- 7. No Mobile
- 8. University of Advancing Technology’s website" (http://www.uat.edu/)
- 10. DOs
- 11. Page speed is cruicial
- 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. Tooling • Google Page Speed
- 17. Resource pre-fetching <link rel=“prefetch” href=“sprite.png”>
- 18. Eliminate whitespace in HTML
- 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 useful tips • Be careful with the tabindex
- 22. Some more useful tips • Be careful with the tabindex • Mobile web
- 23. Some more useful tips • Be careful with the tabindex • Mobile web • Wise hover transformations
- 24. Some more useful tips • Be careful with the tabindex • Mobile web • Wise hover transformations • Use pre-processors
- 25. Some more useful tips • Be careful with the tabindex • Mobile web • Wise hover transformations • Use pre-processors • ENTER SHOULD SUBMIT
- 26. Some more useful tips • 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 useful tips • Make use of the for=“” attribute ✔!
- 28. Some more useful tips • Make use of the for=“” attribute ✔!• Title attributes for better accessibility
- 29. Some more useful tips • Make use of the for=“” attribute ✔!• Title attributes for better accessibility • Always use 3rd party modal popups X
- 30. Some more useful tips • 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 useful tips • 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. SUMMARY
- 34. QUESTIONS?!? W: www.despark.com E: sdipchikov@despark.com T: @sdipchikov