5 Tips for

HTML5

Mobile Apps

Alicia Liu @aliciatweet

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