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.

1. FRONT-END DEVELOPERS' CHECKLIST
FOR BETTER UX
Stoyan Dipchikov!
CTO / Despark

2. Who?... Where?... WHAT?.....

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