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

QUESTIONS?!?

W: www.despark.comE: sdipchikov@despark.com

T: @sdipchikov