HTML5 for Mobile Apps, Ido Green

Get Started. It's Free
or sign up with your email address
Rocket clouds
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

2.1. http://ido-green.appspot.com/html5-training-day/mobile-web-app/index.html#30

3. Don't reinvent the wheel

3.1. pttrns.com

3.2. mobile-patterns.com

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

4.2.1.1. Path

4.2.1.1.1. no header & footer

4.2.1.1.2. most of the UI innovations (widgets) are now available as open-source in GitHub

4.2.1.2. Flipboard

4.2.1.2.1. ui based on Web technology

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

6.1.1.1. variables

6.1.1.2. 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_

7.1.1.1. Thin White, frothy with wind symptoms

7.2. 2

7.2.1. mian missing features

7.2.1.1. WebGL

7.2.1.2. Camera API

7.2.1.2.1. Web RTC

7.2.1.3. IndexedDB

7.2.1.4. Web Audio

7.3. 3

7.3.1. Web as a unified platform

7.3.2. Native is a moving target

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

7.3.4.1. HTML5 API gradually exposing more

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

7.4.1.1. app.ft.com

7.4.1.2. workflowy.com

7.4.1.3. mobile.twitter.com

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

8.3.2.1. on back of the envelope

8.4. Philosophy: Adaptive apps

8.4.1. Too hard to use one DOM tree for all form factors

8.4.1.1. jQuery tries to abstract it

8.4.1.1.1. but it grew to be very large

8.4.1.2. zepto is more minimal

8.4.1.2.1. prefereable for mobile apps

8.4.2. Use responsive design

8.4.2.1. same layout for iPad & galaxy tablets

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

9.1.2.1. Ember

9.1.2.1.1. many battaries

9.1.2.1.2. opinionated, but by great minds

9.1.2.2. Backbone

9.1.2.2.1. thin & simple

9.1.2.2.2. 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:

10.1.1.1. tables

10.1.1.2. absolute positioning

10.1.1.3. Untitled

10.1.2. Use flex-box

10.1.2.1. like grid layout

10.1.2.2. will work great in mobile apps, with multiple orientation

10.1.2.3. caveat: new API just landed, but relatively few changes

10.2. Layout-2

10.2.1. headers/footers

10.2.1.1. Use position: fixed

10.2.2. scroll

10.2.2.1. Use overflow: scroll

10.2.3. Inertial scrolling

10.2.3.1. 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.3.4.1. http://www.html5rocks.com/en/mobile/touch/

10.4. Offline first

10.4.1. localStorage is most common

10.4.2. Can get the online/offline events

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

10.6.1.1. Stack using

10.6.1.1.1. Backbone

10.6.1.1.2. Zepto

10.6.1.1.3. Handlebars

10.6.1.1.4. Stylus

10.6.1.1.5. Lumber

10.6.2. Targeting iOS - Enable Safari console in mobile safari

10.6.3. MagicTouch.js

10.6.3.1. Simulate touch events

10.6.4. Remote debugging hack

10.6.4.1. jsconsole.com

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

10.7.4.1. or

10.7.4.1.1. Initializr

10.7.4.1.2. Bootstrap

10.7.5. More:

10.7.5.1. http://greenido.wordpress.com/2012/01/01/mobile-web-performance/

10.7.5.1.1. Steven Saunders

10.8. Subscribe to

10.8.1. updates.html5rocks.com

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