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. State of the mobile wen

2.1. 1

2.1.1. Wind_ Thin White, frothy with wind symptoms

2.2. 2

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

2.3. 3

2.3.1. Web as a unified platform

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

2.3.3. some surveys report users prefer web apps over native

2.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

2.3.5. Standardized web moves more slowly, but catching up

2.4. 4

2.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

2.4.2. mobile web is ready for apps

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

2.5. 5

2.5.1. mobile twitter

2.5.2. foodspotting

3. Tips & best practices

3.1. Layout-1

3.1.1. Avoid: tables absolute positioning Untitled

3.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

3.2. Layout-2

3.2.1. headers/footers Use position: fixed

3.2.2. scroll Use overflow: scroll

3.2.3. Inertial scrolling webkit-overflow...

3.3. Chrome debugger settings

3.3.1. Disable cache

3.3.2. Override User-agent

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

3.3.4. See also

3.4. Offline first

3.4.1. localStorage is most common

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

3.5. Testing

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

3.5.2. Qunit

3.5.3. Selenium

3.6. Tips

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

3.6.2. Targeting iOS - Enable Safari console in mobile safari

3.6.3. MagicTouch.js Simulate touch events

3.6.4. Remote debugging hack debug remotely 95% of devices

3.7. It's all about speed

3.7.1. you will loose x% ose users every second

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

3.7.3. load progressively

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

3.7.5. More: Steven Saunders

3.8. Subscribe to


4. Resources

5. alsdfjflbjlbjgblgjb

6. See slides in


7. Don't reinvent the wheel



8. Plan/think about it up-front

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

8.2. be inspired by mobile patterns

8.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

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

10. CSS frameworks

10.1. Augmented CSS-style languages

10.1.1. provide variables nesting

10.2. Ido's preference

10.2.1. SASS

10.3. Html5Boilerplate

10.3.1. template

11. Design philosophy

11.1. Tips

11.2. Design - low fidelity

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

11.2.2. or Balsamiq

11.3. Design per device

11.3.1. Tablet != Phone != ..

11.3.2. best experience per device on back of the envelope

11.4. Philosophy: Adaptive apps

11.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

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

12. How to build mobile web app

12.1. MVC frameworks

12.1.1. pattern for separating concerns

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

12.2. Templating engines

12.2.1. Complex apps require complex DOM

12.2.2. DOM manipilation is relatively slow

12.2.3. Which is why you should Templating engine

12.2.4. Embed

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

13. New node

13.1. inheritance/mixins

13.1.1. lets you start with much faster page speed

14. New node

15. chiwi

16. fdf

16.1. ijdf

16.1.1. sdngkns