Post on 20-Dec-2014
description
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