How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards
25 likes2,288 views
This document discusses how to build rich mobile user experiences using web standards like HTML5, CSS3, and JavaScript. It covers various HTML5 features such as new elements, forms, video/audio, geolocation and caching. It also discusses CSS techniques including transforms, transitions, animations and vendor-specific properties. Challenges with fixed positioning, touch events and performance are addressed. The document promotes building web apps that are native-like using frameworks like jQTouch and Sencha Touch.
How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards
- 1. How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards DAVID KANEDA, SENCHA
- 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
- 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
- 58. Transitions & Animations More than just pretty e ects Usually hardware-accelerated
- 59. Transitions & Animations More than just pretty e ects Usually hardware-accelerated
- 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