This document provides information about developing mobile web applications that mimic native apps. It discusses techniques like using CSS for animations and transitions to improve performance, detecting standalone mode, adding home screen icons and startup images, and various HTML5 features supported in Mobile Safari like geolocation. It also covers frameworks like jQTouch, jQuery Mobile and Sencha Touch that make the mobile web feel more like native apps. Testing strategies are discussed, noting emulators are good for version testing but actual devices are best. Potential app ideas that could work as mobile web apps are listed, like games, calculators and productivity apps. Examples of successful mobile web apps developed with frameworks in just a few hours are highlighted.

1. Fake It ‘ti
You Make
creating mobile apps th
feel like native apps

2. Fake It ‘ti
You Make
creating mobile apps th
feel like native apps

3. @snookca
“increíble”

4. What I won’t be
talking about.

5. Q3 Smartphone
Smartphone Featurephone
43%
57%
Q3 2011 Source: Nielsen

6. Q3 OS Market
iOS Android BlackBerry Windows Other
7% 4%
28%
18%
43%
Source: Nielsen

7. US Mobile Browser
iOS Android Opera BlackBerry Other
5%
26%
39%
2%
28%
Q3 2011 Mobile Browser Stats http://www.quirksmode.org/blog/archives/2011/10/q3_2011_mobile_1.html

8. Brazil Mobile
iOS Opera Nokia Android BlackBerry Other
3%
34% 25%
1%
29%
8%
Q3 2011 Mobile Browser Stats http://www.quirksmode.org/blog/archives/2011/10/q3_2011_mobile_1.html

9. What are people
iPhone iPad Android
RIM Other
14%
30%
12%
23%
21%
State of the Apps Industry 2010 and 2009 Surveys; DIGIDAY, Stifel Nicolaus, Millenial Media

10. 75% developing for
iOS and Android

11. Mobile Safari

12. Mobile Safari
Local Storage

13. Mobile Safari
Local Storage
CSS3 features like transforms, transitions and
animations

14. Mobile Safari
Local Storage
CSS3 features like transforms, transitions and
animations
Geolocation

15. Mobile Safari
Local Storage
CSS3 features like transforms, transitions and
animations
Geolocation
HTML5 forms support for search, number and
email field types.

16. Mobile Safari
Local Storage
CSS3 features like transforms, transitions and
animations
Geolocation
HTML5 forms support for search, number and
email field types.
Access to some hardware acceleration

17. Mobile Safari
Local Storage
CSS3 features like transforms, transitions and
animations
Geolocation
HTML5 forms support for search, number and
email field types.
Access to some hardware acceleration
SVG

18. Mobile Safari
Local Storage
CSS3 features like transforms, transitions and
animations
Geolocation
HTML5 forms support for search, number and
email field types.
Access to some hardware acceleration
SVG
older versions of Android don’t support it

21. http://snk.ms/1o

22. Why Web over

23. Why Web over
don’t need access to device APIs

24. Why Web over
don’t need access to device APIs
most apps don’t

25. Why Web over
don’t need access to device APIs
most apps don’t
need quick iteration without app store approval
process

26. Code
http://www.flickr.com/photos/bike/4299152140/

27. Detecting within
if(window.navigator.standalone) {
// run code in “app” mode
} else {
// run code in mobile safari mode
}

28. Home Screen Icon
<link rel="apple-touch-icon" href="images/icon.png">
<link rel="apple-touch-icon" sizes="72x72"
href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="114x114"
href="touch-icon-iphone4.png">
rel="apple-touch-icon-precomposed"

29. Start-up Image
<link rel="apple-touch-startup-image" href="/
startup.png">

30. Start-up Image
No apparent support for horizontal image
When loading in landscape, the status bar
creates a gap to one edge of the loading screen.

31. Going “Full screen”
<meta name="apple-mobile-web-app-capable"
content="yes">

32. Status Bar
<meta name="apple-mobile-web-app-status-
bar-style" content="black">
default
black-translucent

33. Viewport
<meta name="viewport" content="width=device-
width">
<meta name="viewport" content="width=590">
<meta name="viewport" content="initial-scale=
1.0">
<meta name="viewport" content="initial-scale=
2.3, user-scalable=no">

34. You don’t need a
framework!

35. HTML Prototypes
HTMLElement.prototype.__defineSetter__("ontap",
function(func){ });
document.getElementById('keypad').ontap =
function(){
alert('just the keypad');
};

36. HTML Prototypes
HTMLElement.prototype.switchClass =
function(fromClass, toClass){
if(this.className == fromClass) {
this.className = toClass;
} else {
this.className = fromClass;
}
}
document.getElementById('spinner-
shell').switchClass('collapsed', 'expanded');

37. querySelector(All)
document.querySelector('.active'); // one el
document.querySelectorAll('.active'); // all

38. BUT I WANT
function $(selector){
return document.querySelectorAll(selector);
}
$('#myelement p');

39. Looping
[3,2,1].forEach(function(itm, idx){
console.log(itm, idx); // 3,0 | 2,1 | 1,2
})

40. Local Storage
JSON.parse(localStorage.getItem('pdata'));
localStorage.setItem('pdata', JSON.stringify(items));

41. Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('not supported');
}
function success(pos) {
console.log( pos.coords.longitude, pos.coords.latitude );
}

42. Use CSS for UI
#units div:nth-child(2) { -webkit-transform:rotate(45deg); }
#units div:nth-child(3) { -webkit-transform:rotate(90deg); }
#units div:nth-child(4) { -webkit-transform:rotate(135deg); }
#units div:nth-child(5) { -webkit-transform:rotate(180deg); }
#units div:nth-child(6) { -webkit-transform:rotate(225deg); }
#units div:nth-child(7) { -webkit-transform:rotate(270deg); }
#units div:nth-child(8) { -webkit-transform:rotate(315deg); }

43. Use Transitions
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: .5s;
el.style.webkitTransform = 'rotate('+pos+'deg)';

44. Webkit Animations
@-webkit-keyframes {
0% { background-position-y: 0; }
100% { background-position-y: -100%; }
}
body {
background-image:url("canvas-crumpled.jpeg");
-webkit-animation: bg 3s linear infinite;
}

45. Touch vs Click
Using touch events can make the app feel faster
than click events.
You can customize tap hightlight colour

46. Touch vs Click
-webkit-tap-highlight-color:rgba(200,0,0,0.4);

47. Input Features
<input autocorrect="on"> <!-- or “off” -->
<input placeholder="Example Text">
<input type="email">
<input type="url">
<input type="number">
<input type="search">

49. Locking
window.addEventListener('orientationchange', function(){
if(window.orientation == -90) {
document.getElementById('orient').className = 'orientright';
}
if(window.orientation == 90) {
document.getElementById('orient').className = 'orientleft';
}
if(window.orientation == 0) {
document.getElementById('orient').className = '';
}
}, true);

50. Locking
.orientleft #shell {
-webkit-transform: rotate(-90deg);
-webkit-transform-origin:160px 160px;
}
.orientright #shell {
-webkit-transform: rotate(90deg);
-webkit-transform-origin:230px 230px;
}

51. Locking

52. Performance
Use CSS instead of JavaScript for Animations
use CSS Transitions
use CSS Animations
use 2D and 3D transforms to force hardware
acceleration

53. Hardware
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)

54. Testing

55. Testing
iOS Simulator is fast but not entirely accurate

56. Testing
iOS Simulator is fast but not entirely accurate
Android emulator is slow but accurate

57. Testing
iOS Simulator is fast but not entirely accurate
Android emulator is slow but accurate
Emulators handy for testing multiple OS versions

58. Testing
iOS Simulator is fast but not entirely accurate
Android emulator is slow but accurate
Emulators handy for testing multiple OS versions
Best to test on device

59. Testing
iOS Simulator is fast but not entirely accurate
Android emulator is slow but accurate
Emulators handy for testing multiple OS versions
Best to test on device
For multi-touch testing, must do on the device.

60. Testing
iOS Simulator is fast but not entirely accurate
Android emulator is slow but accurate
Emulators handy for testing multiple OS versions
Best to test on device
For multi-touch testing, must do on the device.
pinch/zoom, rotate possible in iOS simulator

61. Framew
http://www.flickr.com/photos/nocallerid_man/3638360458/

62. Mobile Web
jQTouch
XUI.js
jQuery Mobile
Dojo Mobile
Sencha Touch

63. jQTouch
Targetted for iOS
Makes web app feel like native app with controls
and list views
http://jqtouch.com/

64. XUI.JS
x$('#btn').click( function (e) {
x$('#msg').html('¡Hola!');
})

65. XUI.JS
clean, familiar, chaining syntax.
super tiny 10.4kb footprint (4.2kb gzipped).
targeted builds for webkit, ie mobile, and
blackberry

66. Dojo Mobile
Designed for iPhone, Android
Includes touch and gesture support
Support for native-style widgets
Can create webkit-only builds
http://dojotoolkit.org/features/mobile

67. jQuery Mobile
Designed for iPhone, Android, webOS
plus bada, Meego, Windows Mobile and more
Includes touch and gesture support
http://jquerymobile.com/

68. Sencha Touch
Designed for iPhone and Android
Includes enhanced touch events
Allows for rapid development
http://www.sencha.com/products/touch/

69. Exampl
http://www.flickr.com/photos/mollymazilu/5827249387/

70. Could be a Web
Calculators (e.g. CalcBot)
Twitter
Productivity Apps (e.g. Things.app)
Recipe Databases (e.g. Epicurious)
Weather Apps
UI Sketcher

71. Could be a Web
Words With Friends/Scrabble
Angry Birds
http://chrome.angrybirds.com/
Canabalt
Bejeweled
Ramp Champ

72. 37Signals: Chalk

73. 37Signals: Chalk

74. http://chalk.37signals.com/

75. Shkrubbel

76. https://github.com/kitt/shkrubbel

77. The Two Hour App
Frameworks allow for rapid development
Used jQTouch
Used localStorage

79. http://pushups.snook.ca/

80. ConvertBot

82. http://snook.ca/testing/convertbot/

83. Going

84. Why Native over
Access to native hardware and other applications
Camera, Address Book, Filesystem
Streamlined Revenue Process

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

86. PhoneGap and
Titanium Mobile targets iPhone and Android
PhoneGap targets iPhone, Android, Palm,
Symbian and Blackberry.
http://www.appcelerator.com/
http://www.phonegap.com/

87. Have fun! /
http://www.flickr.com/photos/sbluerock/364123380/

88. @snookca
http://snook.ca