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

1. Fake It ‘til
You Make It
creating mobile apps that
feel like native apps

2. Fake It ‘til
You Make It
creating mobile apps that
feel like native apps

3. What I won’t be
talking about.

4. Who cares about
feature phones?

7. 75% developing for
iOS and Android

9. Mobile Safari

10. Mobile Safari
Local Storage

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

16. Why Web over Native?

17. Why Web over Native?
don’t need access to device APIs

18. Why Web over Native?
don’t need access to device APIs
most apps don’t

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

20. Could be a Web App
Calculators (CalcBot)
Twitter
Things.app
Epicurious
Weather Apps
UI Sketcher

21. 37Signals: Chalk

22. 37Signals: Chalk

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

24. Could be a Web App
Words With Friends/Scrabble
Angry Birds
Canabalt
Bejeweled
Ramp Champ

25. ConvertBot

26. Demo at
http://snook.ca/testing/convertbot/

27. Detecting within Browser
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. Don’t Need a Framework!

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.

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

42. 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');

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

44. But I WANT jQUERY!
function $(selector){
return document.querySelector(selector);
}

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

46. Demo at
http://snook.ca/testing/convertbot/demo/

47. 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); }

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

49. 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;
}

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

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

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

54. Locking Orientation
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);

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

56. Locking Orientation

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)

59. Wait, what about Android
and webOS?

60. Testing Environments

61. Testing Environments
Android emulator is slow

62. Testing Environments
Android emulator is slow
webOS runs on Virtual Box

63. Testing Environments
Android emulator is slow
webOS runs on Virtual Box

64. Testing Environments
Android emulator is slow
webOS runs on Virtual Box
Best to test on device

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

69. Mobile Web Frameworks

70. Mobile Web Frameworks
jQTouch
jQuery Mobile
Sencha Touch

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

72. The Two Hour App
Frameworks allow for rapid development

73. Demo at
http://pushups.snook.ca/

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

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/

77. Going Native

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/

81. “I really like my work and
I try really hard.”

82. @snookca
http://snook.ca