How to Develop a Rich, Native-quality User

Experience for Mobile Using Web Standards

DAVID KANEDA, SENCHA

@davidkaneda@senchainc@jqtouch@webkitbits@9bits

How to Develop a Rich, Native-quality User

Experience for Mobile Using Web Standards

WAP’s dead, baby.WAP’s dead.

2%2% 3%

7%

39%

47%

iOSAndroidRIMWebOSWinmoOther

http://metrics.admob.comJanuary 2010

US Mobile Smartphone Traffic

Did someone say devices?

230,000

230,000iOS activations a day.

60,000Android shipments a day.

SAMSUNG GALAXY TAB

COMING SOON…

BLACKBERRY TORCH

WEBOS 2.0

Let’s talk tech.

HTML5

new elements

new elements

section, article, header, footer, aside

yawn.

new features

new features

web storageweb workers

form validationmicrodata

new input types

TYPE=EMAIL TYPE=URL TYPE=NUMBER

new input types

<video> & <audio>

<video> & <audio>

<video> can be styled like other elements

<video> & <audio>

<video> can be styled like other elementsJavaScript control over playback

<video> & <audio>

<video> can be styled like other elementsJavaScript control over playback

Quick tip: Autoplay can work, even if Apple says otherwise.

cache manifest

cache manifest

Make apps o!ine-accessible

cache manifest

Make apps o!ine-accessibleCache, Network, Fallback

cache manifest

Make apps o!ine-accessibleCache, Network, Fallback

Once you go cache, you never go back

geolocation

geolocation

That’s so <meta>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="/link/to/iOS-114px.png" />

That’s so <meta>

CSS3

CSS3 Basics

CSS3 Basics

border-radiusborder-image

opacitygradient

text-shadow

box-shadow:before & :after

masks@font-face

reflect

Transforms

translaterotatescaleskewscale

Transforms

Transitions & Animations

More than just pretty e"ectsUsually hardware-accelerated

Transitions & Animations

More than just pretty e"ectsUsually hardware-accelerated

Transitions & Animations

WebKit-specific CSS

WebKit-specific CSS

WebKit-specific CSS

-webkit-tap-highlight-color: rgba(0,0,0,0);

WebKit-specific CSS

-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-user-select: none;

WebKit-specific CSS

-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-user-select: none;-webkit-touch-callout: none;

Trouble Spots

350ms to Kill

350ms to Kill

It’s longer than it soundsAvoid with custom touch eventsLazy method: bind to touchend

a fixed game

a fixed game

No position: fixed; in CSSoverflow: auto/scroll; requires two fingers

Hack by manipulating touch objects

Need a hand?

jQTouch JQTOUCH.COM

Sencha Touch SENCHA.COM

“Real artists ship.”Steve Jobs

WEB APPS

NATIVE SHELL

Thanks!I’ll be here all week.

@davidkanedahttp://9-b.it/web20ny