Fake it 'til you make it

Fake It ‘tilYou Make Itcreating mobile apps thatfeel like native apps

What I won’t betalking about.

Who cares aboutfeature phones?

75% developing for iOS and Android

Mobile Safari

Mobile Safari Local Storage

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

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

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

Mobile Safari Local Storage CSS3 features like transforms, transitions and animations Geolocation HTML5 forms support for search, number and email ﬁeld types. SVG on the iPhone but not on Android or webOS

Mobile Safari Local Storage CSS3 features like transforms, transitions and animations Geolocation HTML5 forms support for search, number and email ﬁeld types. SVG on the iPhone but not on Android or webOS Access to some hardware acceleration

Why Web over Native?

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

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

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

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

37Signals: Chalk

http://chalk.37signals.com/

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

ConvertBot

Demo athttp://snook.ca/testing/convertbot/

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

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"

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

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.

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

Status Bar<meta name="apple‐mobile‐web‐app‐status‐bar‐style" content="black">defaultblack‐translucent

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">

Don’t Need a Framework!

Don’t Need a Framework! DOM APIs in newer browsers quite capable

Don’t Need a Framework! DOM APIs in newer browsers quite capable ConvertBot demo is 9k

Don’t Need a Framework! DOM APIs in newer browsers quite capable ConvertBot demo is 9k uncompressed.

Don’t Need a Framework! DOM APIs in newer browsers quite capable ConvertBot demo is 9k uncompressed. ungzipped.

Don’t Need a Framework! DOM APIs in newer browsers quite capable ConvertBot demo is 9k uncompressed. ungzipped. including CSS.

Don’t Need a Framework! DOM APIs in newer browsers quite capable ConvertBot demo is 9k uncompressed. ungzipped. including CSS. including JavaScript.

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

HTML PrototypesHTMLElement.prototype.switchClass = function(fromClass, toClass){  if(this.className == fromClass) {      this.className = toClass;  } else {      this.className = fromClass;  }   }document.getElementById(spinner‐shell).switchClass(collapsed, expanded);

querySelector(All)document.querySelector(.active); // one eldocument.querySelectorAll(.active); // all

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

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

Demo athttp://snook.ca/testing/convertbot/demo/

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

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

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

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

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

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

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

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

Locking Orientation

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

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)

Wait, what about Android and webOS?

Testing Environments

Testing Environments Android emulator is slow

Testing Environments Android emulator is slow webOS runs on Virtual Box

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

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.

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

webOS 2.1 No support for touch events has “2-ﬁnger” gesture support such as pinch/ zoom rendering issues

Mobile Web Frameworks

Mobile Web Frameworks jQTouch jQuery Mobile Sencha Touch

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

The Two Hour App Frameworks allow for rapid development

Demo athttp://pushups.snook.ca/

Local StorageJSON.parse(localStorage.getItem(pdata));localStorage.setItem(pdata, JSON.stringify(items));

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

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

Going Native

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

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

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/

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

@snookcahttp://snook.ca

http://blog.baekjoon.com	86
http://lanyrd.com	66
http://paper.li	24
http://twitter.com	13
https://twitter.com	6
http://zootool.com	6
http://cafe.naver.com	6
http://minhyungko.blogspot.com	6
http://a0.twimg.com	5
http://a0.twimg.com	5
http://mdnd.tistory.com	3
http://seesaw.co.kr	1
http://minhyungko.blogspot.kr	1
http://webcache.googleusercontent.com	1
https://si0.twimg.com	1
http://tweetedtimes.com	1
http://www.zoes.dev.softecspa.it	1
http://www.twylah.com	1
url_unknown	1
http://translate.googleusercontent.com	1

Fake it 'til you make it

by Jonathan Snook on Apr 12, 2011

Accessibility

Categories

Upload Details

Usage Rights

20 Embeds 235

Statistics

Fake it ’til you make it Presentation Transcript