HTML5 for Mobile Apps, Ido Green

Get Started. It's Free
or sign up with your email address
HTML5 for Mobile Apps, Ido Green by Mind Map: HTML5 for Mobile Apps, Ido Green

1. Touch

1.1. Fingers != mouse

1.1.1. design for multi-touch

1.2. touchstart, touchend

1.3. Chrome debugger have option to emulate touch

1.3.1. in Settings

2. See slides in


3. Don't reinvent the wheel



4. Plan/think about it up-front

4.1. don't let web & enterprise be excuses for poor UX

4.2. be inspired by mobile patterns

4.2.1. eg Path no header & footer most of the UI innovations (widgets) are now available as open-source in GitHub Flipboard ui based on Web technology Twitter

5. Adaptive apps - custom views & templates for each form factor, with shared model

6. CSS frameworks

6.1. Augmented CSS-style languages

6.1.1. provide variables nesting

6.2. Ido's preference

6.2.1. SASS

6.3. Html5Boilerplate

6.3.1. template

7. State of the mobile wen

7.1. 1

7.1.1. Wind_ Thin White, frothy with wind symptoms

7.2. 2

7.2.1. mian missing features WebGL Camera API Web RTC IndexedDB Web Audio

7.3. 3

7.3.1. Web as a unified platform

7.3.2. Native is a moving target iOS, Android, WP7, &c

7.3.3. some surveys report users prefer web apps over native

7.3.4. Native pushes the boundary - encouraging using API's closer to the metal HTML5 API gradually exposing more PhoneGap &c exposes these API's too

7.3.5. Standardized web moves more slowly, but catching up

7.4. 4

7.4.1. Largly data-driven apps the mobile web version is always few stops more powerful, native takes more time to catch up with API's

7.4.2. mobile web is ready for apps

7.4.3. with mobile apps, you have app per location, which is appropriate for web

7.5. 5

7.5.1. mobile twitter

7.5.2. foodspotting

8. Design philosophy

8.1. Tips

8.2. Design - low fidelity

8.2.1. start with the UX, from 20K feet high

8.2.2. or Balsamiq

8.3. Design per device

8.3.1. Tablet != Phone != ..

8.3.2. best experience per device on back of the envelope

8.4. Philosophy: Adaptive apps

8.4.1. Too hard to use one DOM tree for all form factors jQuery tries to abstract it but it grew to be very large zepto is more minimal prefereable for mobile apps

8.4.2. Use responsive design same layout for iPad & galaxy tablets 4:3, 16:9

9. How to build mobile web app

9.1. MVC frameworks

9.1.1. pattern for separating concerns

9.1.2. most popular frameworks Ember many battaries opinionated, but by great minds Backbone thin & simple extend with whatever batteries

9.2. Templating engines

9.2.1. Complex apps require complex DOM

9.2.2. DOM manipilation is relatively slow

9.2.3. Which is why you should Templating engine

9.2.4. Embed

9.2.5. Ido used Moustache, but there are many more, also one in jQuery

10. Tips & best practices

10.1. Layout-1

10.1.1. Avoid: tables absolute positioning Untitled

10.1.2. Use flex-box like grid layout will work great in mobile apps, with multiple orientation caveat: new API just landed, but relatively few changes

10.2. Layout-2

10.2.1. headers/footers Use position: fixed

10.2.2. scroll Use overflow: scroll

10.2.3. Inertial scrolling webkit-overflow...

10.3. Chrome debugger settings

10.3.1. Disable cache

10.3.2. Override User-agent

10.3.3. Click delayed 360ms in touch (!), use fastclick

10.3.4. See also

10.4. Offline first

10.4.1. localStorage is most common

10.4.2. Can get the online/offline events Modernizr has a polyfill

10.5. Testing

10.5.1. MVC provides sepation of concerns, easy to test models & biz logic

10.5.2. Qunit

10.5.3. Selenium

10.6. Tips

10.6.1. Thorax.js Stack using Backbone Zepto Handlebars Stylus Lumber

10.6.2. Targeting iOS - Enable Safari console in mobile safari

10.6.3. MagicTouch.js Simulate touch events

10.6.4. Remote debugging hack debug remotely 95% of devices

10.7. It's all about speed

10.7.1. you will loose x% ose users every second

10.7.2. you got more than 2 connections in modern mobile browsers

10.7.3. load progressively

10.7.4. Use Html5Boilerplate for best-practices on page loading & performance or Initializr Bootstrap

10.7.5. More: Steven Saunders

10.8. Subscribe to


11. Resources

12. New node

12.1. inheritance/mixins

12.1.1. lets you start with much faster page speed

13. New node

14. chiwi

15. fdf

15.1. ijdf

15.1.1. sdngkns

16. alsdfjflbjlbjgblgjb