lca2013 – Day 3 – Session 3

users: delighted; (better UX using CSS 3 in particular and “HTML5” in general) by Adam Harvey

User Experience

  • “Used by meatbags sitting in keyboards”
  • UI & UX
  • ” The only thing that numbs the pain of dealing with IE6 “
  • How to put yourself in the user’s shoes? Personas
  • Simplify Interface
    •  Three Click rule
    • 4 Clicks to get to most wanted page of sample website
    • Other study says people keep clicking until they get the page they want
  • Have to find balancer between what you want and what you can do

Example: PHP website, new version

  • No real metrics
  • Dropdown menus, hard to decide what to put on the documentation menu, guessed what people might want

People expect web interfaces to be smooth these days

Example @font-face

  • Icon fonts
    • Put things that were in sprites into icon-fonts
    • Positives – scalable, bandwidth efficient, text effects are available eg blink
    • Negatives – Lack of Accessibility, No colours
    • Very compatible with browsers
  • Alternative SVG
    • Positives – colour, scriptibility
    • Negatives – Accessibility, slower, IE 9+ only, Andriod 3+ only
  • Consider sprites, Use icon fonts most of the time, SVG for specific needs


  • Smoothly make a change in an attribute
  • Gotchas
    • Image transition support variable in browsers
    • Still vendor prefix
    • But effect does degrade well
  • Good browser support except IE
  • Use when you can, especially if you don’t care about IE

Keyframe Animation

  • Can do simple animations of objects of CSS