UXify 2015 - Front-end Developers' Checklist for Better UX
-
Upload
stoian-dipchikov -
Category
Technology
-
view
269 -
download
2
Transcript of UXify 2015 - Front-end Developers' Checklist for Better UX
FRONT-END DEVELOPERS' CHECKLIST FOR BETTER UX
Stoyan Dipchikov!CTO / Despark
Who?... Where?... WHAT?.....
Why do front-end devs need to be involved in the UX
DON’Ts
The crazy tab index
No Mobile
No Mobile
University of Advancing Technology’s website"(http://www.uat.edu/)
DOs
Page speed is cruicial
Optimize your resources
• Optimized PNGs • Image sprites • Minified CSS & JS • Progressive JPGs
Lazy loading of content
• Search results • Other less important parts of
the page
SVG icon fonts IcoMoon.io
CSS pseudo elements
• ::before • ::after • :nth-child(even) • :nth-child(odd)
Tooling
• Google Page Speed
Resource pre-fetching
<link rel=“prefetch” href=“sprite.png”>
Eliminate whitespace in HTML
Reduce DNS look-ups
• https://si0.twimg.com!• https://fbstatic-a.akamaihd.net/!
CSS on top, JS at the bottom
Some more useful tips
• Be careful with the tabindex
Some more useful tips
• Be careful with the tabindex
• Mobile web
Some more useful tips
• Be careful with the tabindex
• Mobile web
• Wise hover transformations
Some more useful tips
• Be careful with the tabindex
• Mobile web
• Wise hover transformations
• Use pre-processors
Some more useful tips
• Be careful with the tabindex
• Mobile web
• Wise hover transformations
• Use pre-processors
• ENTER SHOULD SUBMIT
Some more useful tips
• Be careful with the tabindex
• Mobile web
• Wise hover transformations
• Use pre-processors
• ENTER SHOULD SUBMIT
• Focus on dynamically addedform elements
+!
Some more useful tips
• Make use of the for=“” attribute
✔ !
Some more useful tips
• Make use of the for=“” attribute
✔ !• Title attributes for better accessibility
Some more useful tips
• Make use of the for=“” attribute
✔ !• Title attributes for better accessibility
• Always use 3rd party modal popups
X
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
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
SUMMARY