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

University of Advancing Technology’s website"(http://www.uat.edu/)

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



•  Mobile web



•  Mobile web

•  Wise hover transformations



•  Mobile web


•  Use pre-processors



•  Mobile web



•  ENTER SHOULD SUBMIT



•  Mobile web



•  ENTER SHOULD SUBMIT

•  Focus on dynamically addedform elements

+!


•  Make use of the for=“” attribute

✔ !



✔ !•  Title attributes for better accessibility




•  Always use 3rd party modal popups

X





X

•  Don’t forget the social sharing meta





X

•  Don’t forget the social sharing meta

•  No more custom selects

SUMMARY

QUESTIONS?!?

W: www.despark.comE: [email protected]

T: @sdipchikov

Technology