How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards

How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards DAVID KANEDA, SENCHA

@davidkaneda @senchainc @jqtouch @webkitbits @9bits

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

US Mobile Smartphone Traffic 39% iOS Android RIM 47% WebOS Winmo Other 7% 3% 2%2% http://metrics.admob.com January 2010

Did someone say devices?

230,000

230,000 iOS activations a day.

60,000 Android shipments a day.

COMING SOON… SAMSUNG GALAXY TAB

BLACKBERRY TORCH

WEBOS 2.0

Let’s talk tech.

new elements

new elements section, article, header, footer, aside yawn.

new features

new features web storage web workers form validation microdata

new input types

new input types TYPE=EMAIL TYPE=URL TYPE=NUMBER

<video> & <audio> <video> can be styled like other elements

<video> & <audio> <video> can be styled like other elements JavaScript control over playback

<video> & <audio> <video> can be styled like other elements JavaScript 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-accessible Cache, Network, Fallback

cache manifest Make apps o ine-accessible Cache, Network, Fallback Once you go cache, you never go back

geolocation

That’s so <meta>

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

CSS3 Basics

CSS3 Basics border-radius box-shadow border-image :before & :after opacity masks gradient @font-face text-shadow reﬂect

Transforms

Transforms translate rotate scale skew scale

Transitions & Animations

Transitions & Animations More than just pretty e ects Usually hardware-accelerated

WebKit-speciﬁc CSS

WebKit-speciﬁc CSS -webkit-tap-highlight-color: rgba(0,0,0,0);

WebKit-speciﬁc CSS -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none;

WebKit-speciﬁc 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 sounds Avoid with custom touch events Lazy method: bind to touchend

a ﬁxed game

a fixed game No position: fixed; in CSS overflow: 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. @davidkaneda http://9-b.it/web20ny

http://www.web2expo.com	40
http://didacperez.tumblr.com	23
http://jaekook.tumblr.com	11
http://log.quanganhdo.com	8
http://paper.li	7
http://www.linkedin.com	4
http://boutofcontext.com	2
http://codeinfront.com	1
http://blog.kieranajp.co.uk	1

How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards

by David Kaneda

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 97

Statistics

How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards Presentation Transcript