Presentation given at Web 2.0 Expo, NY.

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

2. @davidkaneda
@senchainc
@jqtouch
@webkitbits
@9bits

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

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

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

8. Did someone say devices?

11. 230,000

12. 230,000
iOS activations a day.

16. 60,000
Android shipments a day.

17. COMING SOON…
SAMSUNG GALAXY TAB

18. BLACKBERRY TORCH

19. WEBOS 2.0

20. Let’s talk tech.

24. HTML5

25. new elements

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

27. new features

28. new features
web storage
web workers
form validation
microdata

29. new input types

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

31. <video> & <audio>

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

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

34. <video> & <audio>
<video> can be styled like other elements
JavaScript control over playback
Quick tip: Autoplay can work, even if Apple says otherwise.

37. cache manifest

38. cache manifest
Make apps o ine-accessible

39. cache manifest
Make apps o ine-accessible
Cache, Network, Fallback

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

41. geolocation

42. geolocation

43. That’s so <meta>

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

45. CSS3

46. CSS3 Basics

47. CSS3 Basics
border-radius box-shadow
border-image :before & :after
opacity masks
gradient @font-face
text-shadow reflect

55. Transforms

56. Transforms
translate
rotate
scale
skew
scale

57. Transitions & Animations

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

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

60. WebKit-specific CSS

61. WebKit-specific CSS

62. WebKit-specific CSS
-webkit-tap-highlight-color: rgba(0,0,0,0);

63. WebKit-specific CSS
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;

64. WebKit-specific CSS
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-webkit-touch-callout: none;

65. Trouble Spots

66. 350ms to Kill

67. 350ms to Kill
It’s longer than it sounds
Avoid with custom touch events
Lazy method: bind to touchend

68. a fixed game

69. a fixed game
No position: fixed; in CSS
overflow: auto/scroll; requires two fingers
Hack by manipulating touch objects

70. Need a hand?

71. jQTouch JQTOUCH.COM

72. Sencha Touch SENCHA.COM

73. “Real artists ship.”
Steve Jobs

74. WEB APPS

79. NATIVE SHELL

81. Thanks!
I’ll be here all week.
@davidkaneda
http://9-b.it/web20ny