5 Tips for

HTML5

Mobile Apps

1. Mobile First

  • Rethink
  • Content, Navigation
  • 80 / 20

2. Responsive

  • Responsive CSS grid, e.g. Bootstrap
  • Phone, Tablet, Desktop, Cinema Display
  • Test it

3. Finger > Mouse

  • Tap targets
  • Position
  • Hover and active states

4. Rendering

  • JS animations → CSS transitions
  • Images → CSS gradients and shapes
  • Images → Icon fonts

5. Speed is a Feature

  • Fake it 'til you make it
  • Minify, compress, optimize
  • Caching

Thanks!

Talks: http://alicialiu.net/talks

Feedback: @aliciatweet