This document discusses how to create mobile apps that feel native using only web technologies. It covers supporting features in Mobile Safari like local storage, CSS3 features, and geolocation. It recommends using web technologies over native due to quicker iteration times. Specific techniques covered include detecting browser type, adding home screen icons, startup images, going full screen, and viewport settings. The document also discusses frameworks like jQuery Mobile but notes native DOM APIs may be sufficient. It covers input features, touch vs click, animations, locking orientation, and performance tips. It acknowledges limitations of Android and webOS and recommends testing on actual devices. Finally, it discusses hybrid mobile frameworks like PhoneGap and Titanium that allow developing for multiple platforms using one code
11. Mobile Safari
Local Storage
CSS3 features like transforms, transitions and
animations
12. Mobile Safari
Local Storage
CSS3 features like transforms, transitions and
animations
Geolocation
13. Mobile Safari
Local Storage
CSS3 features like transforms, transitions and
animations
Geolocation
HTML5 forms support for search, number and
email field types.
14. Mobile Safari
Local Storage
CSS3 features like transforms, transitions and
animations
Geolocation
HTML5 forms support for search, number and
email field types.
SVG on the iPhone but not on Android or webOS
15. Mobile Safari
Local Storage
CSS3 features like transforms, transitions and
animations
Geolocation
HTML5 forms support for search, number and
email field types.
SVG on the iPhone but not on Android or webOS
Access to some hardware acceleration
35. Don’t Need a Framework!
DOM APIs in newer browsers quite capable
36. Don’t Need a Framework!
DOM APIs in newer browsers quite capable
ConvertBot demo is 9k
37. Don’t Need a Framework!
DOM APIs in newer browsers quite capable
ConvertBot demo is 9k
uncompressed.
38. Don’t Need a Framework!
DOM APIs in newer browsers quite capable
ConvertBot demo is 9k
uncompressed.
ungzipped.
39. Don’t Need a Framework!
DOM APIs in newer browsers quite capable
ConvertBot demo is 9k
uncompressed.
ungzipped.
including CSS.
40. Don’t Need a Framework!
DOM APIs in newer browsers quite capable
ConvertBot demo is 9k
uncompressed.
ungzipped.
including CSS.
including JavaScript.
57. Performance
Use CSS instead of JavaScript for Animations
use CSS Transitions
use CSS Animations
use 2D and 3D transforms to force hardware
acceleration
58. Hardware Acceleration
2D and 3D transforms may be hardware
accelerated
use translateX/Y instead of top/left
use rotateX(0) to push items with heavy CSS to
use hardware acceleration
(it’s like IE’s zoom:1 to force hasLayout)
65. Testing Environments
Android emulator is slow
webOS runs on Virtual Box
Best to test on device
For multi-touch testing, must do on the device.
66. Testing Environments
Android emulator is slow
webOS runs on Virtual Box
Best to test on device
For multi-touch testing, must do on the device.
pinch/zoom, rotate possible in iOS simulator
67. webOS 2.1
No support for touch events
has “2-finger” gesture support such as pinch/
zoom
rendering issues
75. jQuery Mobile
Designed for iPhone, Android, webOS
plus bada, Meego, Windows Mobile and more
Includes touch and gesture support
http://jquerymobile.com/
76. Sencha Touch
Designed for iPhone and Android
Includes enhanced touch events
Allows for rapid development
http://www.sencha.com/products/touch/
78. Why Native over Web?
Access to native hardware and other applications
Camera, Address Book, Filesystem
Streamlined Revenue Process
79. Meet in the middle
Many apps take advantage of native WebView to
load application components from remote server
allows for iteration of some app components
without requiring complete approval process
from app store
80. PhoneGap and Titanium
Titanium Mobile targets iPhone and Android
PhoneGap targets iPhone, Android, Palm,
Symbian and Blackberry.
http://www.appcelerator.com/
http://www.phonegap.com/