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
Transitions
- 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
