supercharge your front end with the best ux practices
DESCRIPTION
A whirlwind tour of best practices for building responsive, fluid and transitional interfaces for the web, mobile and beyond. This talk sheds some light on improving perceived speed, optimizing conversion funnels, building polished apps and provides tips & tricks for better maintainability.TRANSCRIPT
![Page 1: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/1.jpg)
supercharge your front-end with
the best ux practices
Gercek Karakus Linz, May 2014
![Page 2: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/2.jpg)
![Page 3: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/3.jpg)
how many people are front-end engineers? write html, css & javascript daily as part of their job
how many people are designers? build flow charts, wireframes, graphics design
how many people are unicorns? best of both worlds
![Page 4: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/4.jpg)
![Page 5: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/5.jpg)
![Page 6: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/6.jpg)
ux designthe process of enhancing customer satisfaction and loyalty by improving the ease of use and pleasure provided in the interaction between the customer and the product.
![Page 7: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/7.jpg)
![Page 8: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/8.jpg)
![Page 9: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/9.jpg)
![Page 10: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/10.jpg)
everything on the web is a form
![Page 11: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/11.jpg)
![Page 12: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/12.jpg)
validate to bring user on your side
![Page 13: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/13.jpg)
meaningful error messages
![Page 14: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/14.jpg)
huge drop-off after front-end validation
![Page 15: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/15.jpg)
test different validation messages
![Page 16: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/16.jpg)
do your homework first
![Page 17: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/17.jpg)
validating phone numbers
remove non-digit characters and reformat in the backend
![Page 18: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/18.jpg)
validating email fields• capture common mistakes in email fields
• ie. gnail.com, yhoo.com …
![Page 20: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/20.jpg)
think about mobile input entry
![Page 21: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/21.jpg)
Use HTML5 input types
to trigger appropriate keyboard
![Page 22: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/22.jpg)
<input type=“email” name=“email” />
![Page 23: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/23.jpg)
<input type=“url” name=“url” />
![Page 24: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/24.jpg)
<input type=“tel” name=“zipcode” />
On Android, both “number” and “tel” brings up the number pad keyboard
![Page 25: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/25.jpg)
auto-complete common fields
![Page 26: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/26.jpg)
turn off auto-capitalize
when designing form fields on email, password & url
![Page 27: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/27.jpg)
graceful degradation
• build for now and future
• don’t force yourself to build features for old browsers
• make it work and move on
![Page 28: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/28.jpg)
![Page 29: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/29.jpg)
auto-login from emails
![Page 30: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/30.jpg)
![Page 31: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/31.jpg)
![Page 32: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/32.jpg)
be careful!
• people forward email
• don’t let free riders in…
• implement sandbox mode & limit user access
![Page 33: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/33.jpg)
in-place editing
![Page 34: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/34.jpg)
![Page 35: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/35.jpg)
![Page 36: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/36.jpg)
responsive web design
![Page 37: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/37.jpg)
![Page 38: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/38.jpg)
adaptability matters
• cross browser
• cross device
• easier maintenance
![Page 39: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/39.jpg)
flexible images
![Page 40: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/40.jpg)
![Page 41: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/41.jpg)
http://www.slideshare.net/AaronGustafson/intro-to-adaptive-web-design-chadev-lunch
fluid grids everywhere
![Page 42: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/42.jpg)
mobile first breakpoints
![Page 43: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/43.jpg)
![Page 44: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/44.jpg)
wrestling with bootstrap
![Page 45: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/45.jpg)
customizing bootstrap
![Page 46: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/46.jpg)
leverage !default
![Page 47: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/47.jpg)
define your variables first
because some internal variables are dependent on each other. ie. $link-color
![Page 48: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/48.jpg)
disable unused components
![Page 49: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/49.jpg)
maintaining responsive components
• make sure create separate files for your components
• include all the media queries at the end of each file
• all the changes should be tested in different sized devices
![Page 50: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/50.jpg)
![Page 51: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/51.jpg)
readability matters
![Page 52: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/52.jpg)
characters per line• 60-75 characters/line on larger screens
• 35-40 characters/line on mobile
![Page 53: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/53.jpg)
responsive typography
http://ia.net/blog/responsive-typography-the-basics/
![Page 54: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/54.jpg)
http://typecast.com/blog/a-more-modern-scale-for-web-typography
adapt line-height and font-size
![Page 55: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/55.jpg)
no more image icons!
![Page 56: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/56.jpg)
life is happier with font icons
• crisp & clear iconography
• single http request
• easy maintenance
• rescale, recolor or animate with no hassle
![Page 57: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/57.jpg)
![Page 58: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/58.jpg)
![Page 59: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/59.jpg)
Perceived Performance !
vs !
Actual Performance
![Page 60: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/60.jpg)
build single page web apps
![Page 61: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/61.jpg)
make it feel fast
• pre-catch views on the front-end
• cache in memory for fast access
• separate content and chrome
![Page 62: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/62.jpg)
http://www.mobify.com/blog/beginners-guide-to-perceived-performance/
add touch states to your buttons
![Page 63: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/63.jpg)
![Page 64: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/64.jpg)
avoid spinners when possible
• animate on waits shorter than 300ms
• display chrome instead of a spinner
• use short animations to distract the user from the wait — instead of staring at a spinner they’re simply waiting for a short animation to finish.
![Page 65: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/65.jpg)
![Page 66: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/66.jpg)
smooth animations
• 60fps
• bust janky animations with devtools
• pre-load views
• contextual transitions
![Page 67: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/67.jpg)
![Page 68: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/68.jpg)
respond to user interaction in
less than 100 ms
![Page 69: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/69.jpg)
if it absolutely has to take longer than 100ms,it should definitely respond within 1s.
![Page 70: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/70.jpg)
should make you feel bad
anything that takes longer than 1 second
![Page 71: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/71.jpg)
increasing conversion
![Page 72: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/72.jpg)
auto-fill whenever possible
One of the worst things from an experience and conversion stand point is to ask people for data that they have already provided in the past,
repeatedly over and over again.
![Page 73: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/73.jpg)
suggest continuity
![Page 74: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/74.jpg)
don’t ever ask for the information that you don’t really need
![Page 75: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/75.jpg)
building the billion dollar landing page$
![Page 76: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/76.jpg)
![Page 77: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/77.jpg)
focusing on conversion
• first impression ~3 seconds attention span
• responsiveneeds to adapt all devices
• high performancesmall footprint and fast loading time
![Page 78: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/78.jpg)
![Page 79: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/79.jpg)
• width
• height
• pixel density
adapt to viewport
![Page 80: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/80.jpg)
all the roads should lead users to the same goal
![Page 81: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/81.jpg)
![Page 82: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/82.jpg)
what’s next?
![Page 83: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/83.jpg)
`
http://www.slideshare.net/jamesgpearce/html5-and-the-dawn-of-rich-mobile-web-applications-pt-1
![Page 84: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/84.jpg)
![Page 85: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/85.jpg)
![Page 86: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/86.jpg)
![Page 87: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/87.jpg)
![Page 88: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/88.jpg)
thank you!
follow me on twitter: @gercheq
![Page 89: supercharge your front end with the best ux practices](https://reader034.vdocument.in/reader034/viewer/2022042814/54c799044a795950518b467b/html5/thumbnails/89.jpg)