Online Mind Mapping and Brainstorming

Create your own awesome maps

Online Mind Mapping and Brainstorming

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account? Log In

HTML5 for Mobile Apps, Ido Green by Mind Map: HTML5 for Mobile Apps, Ido
0.0 stars - reviews range from 0 to 5

HTML5 for Mobile Apps, Ido Green


Fingers != mouse

design for multi-touch

touchstart, touchend

Chrome debugger have option to emulate touch

in Settings

See slides in

Don't reinvent the wheel

Plan/think about it up-front

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

be inspired by mobile patterns

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

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

CSS frameworks

Augmented CSS-style languages

provide, variables, nesting

Ido's preference




State of the mobile wen


Wind_, Thin White, frothy with wind symptoms


mian missing features, WebGL, Camera API, Web RTC, IndexedDB, Web Audio


Web as a unified platform

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

some surveys report users prefer web apps over native

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

Standardized web moves more slowly, but catching up


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

mobile web is ready for apps

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


mobile twitter


Design philosophy


Design - low fidelity

start with the UX, from 20K feet high

or Balsamiq

Design per device

Tablet != Phone != ..

best experience per device, on back of the envelope

Philosophy: Adaptive apps

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

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

How to build mobile web app

MVC frameworks

pattern for separating concerns

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

Templating engines

Complex apps require complex DOM

DOM manipilation is relatively slow

Which is why you should Templating engine


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

Tips & best practices


Avoid:, tables, absolute positioning, Untitled

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


headers/footers, Use position: fixed

scroll, Use overflow: scroll

Inertial scrolling, webkit-overflow...

Chrome debugger settings

Disable cache

Override User-agent

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

See also,

Offline first

localStorage is most common

Can get the online/offline events, Modernizr has a polyfill


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




Thorax.js, Stack using, Backbone, Zepto, Handlebars, Stylus, Lumber, their own

Targeting iOS - Enable Safari console in mobile safari

MagicTouch.js, Simulate touch events

Remote debugging hack,, debug remotely 95% of devices

It's all about speed

you will loose x% ose users every second

you got more than 2 connections in modern mobile browsers

load progressively

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

More:,, Steven Saunders

Subscribe to


New node


lets you start with much faster page speed

New node