Developing for the mobile web
- 1. Developing for the “mobile web” Joey Simhon (@joeysim) CTO and Co-Founder DoAT
- 2. Hello World Growing Internet & mobile babies since 2000 Owned and managed 2 web agencies (UX & Tech) Served as acting CTO for several startup companies Passionate about engineering and the culture around it
- 3. DoAT 1st search engine born mobile Launched at TCD NYC in May 2011 (winner of the Bing choice award) iPhone / US availability at first, expanded to Canada. We’ve built and deployed over 50 mobile web apps in the past year+. @DoATGeeks - a multidisciplinary team - Web, iOS / Android / WPhone, Algorithms and all sorts of backend technologies Follow us - @doatgeeks | geeks.doat.com
- 4. There’s no such thing as the “mobile web”
- 5. From a UX perspective icon + full screen = app
- 6. We’re seeing HUGE progress
- 7. Mostly publishers adoption and some tech
- 8. We want you to hack it and innovate on top of it
- 9. As painlessly as possible :-)
- 10. Things we wish we had known
- 11. HTML5 Support
- 12. Device / Browser Capabilities • We'll focus on 2 browser engines - webkit (iOS/Android) and trident (Windows Phone) • Stuff you’d want to use • Application Cache (cache.manifest) • Local storage • History - pushState() • CSS3 • Geo Location
- 13. CSS • No fixed positioning. Use JS libraries to imitate behavior - iScroll, Scrollability, TouchScroll • CSS animations - some use hardware acceleration (iOS only). Offload to GPU. It’s limited to scale, rotation and translate (position), plan your layout accordingly. Different syntax for different browsers (-webkit / -moz- / -o) • Pixel ratios to support Retina. • Use spin.js to create great indicators at low cost
- 14. Javascript • Slow - little resources (CPU/Interpreter) • Prefer native (aka “vanilla”) code (e.g. $(".classname") vs. document.querySelector(".className")) • Parsing can be slow too (jQuery takes several 100's ms to parse, blocky) • Use mobile only libraries (zepto.js, xui.js, etc) • Visible first strategy, load and render the rest on-demand • Android vs iOS - can be up to x2-x10 faster in raw speed (eg LZW compression)
- 15. Network • High latency • When it's there (AT&T) • 6 concurrent HTTP reqs (sometimes 4) • Global (verified on iOS). Splitting hosts will be slower (DNS) • A request is an order of a magnitude more expensive than desktop • Inlining vs requesting (embed base64 images, scripts/styles) • Unifying / Minifying (minify library for PHP can be useful) • Image dimensions and compression level (proxy images, Cotendo AIC) • Offload cookies to local storage when not needed on server
- 16. WebSocket • Reduces round trips dramatically • Supported on iOS only • Important gotcha - doesn’t support gzip compression • Still evolving (was removed when there was a security issue) so always have a fallback ready (there are libraries that handle this for you) • Keeping it open and re-opening is your responsibility
- 17. HTTP caching • Limited storage (RAM/Disk) • Not persistent in some cases (iOS standalone / UIWebView / power cycles) • Internally in iOS still occupies the HTTP pipe (response is faster around ~10ms) • Application Cache can help persist your assets
- 18. Android specifics No CSS fixed positioning on Android 2.1 and below No hardware accelerated CSS transitions. No hardware acceleration. Period. No Standalone mode Screen resolutions and ratios vary
- 19. iOS specifics Standalone mode has some caveats No cache.manifest No HTTP caching No Nitro Splash is shown until load event is fired (looooong) UIWebViews No Nitro (JIT JS) on UIWebView Sometimes only 4 concurrent HTTP reqs
- 20. Windows Phone specifics Nothing much to say here The v7.0 Browser is like IE ~6.5 Just build for Mango (WPhone v7.5)
- 22. TouchyBP You mobile web app starter kit Encapsulates all of the lessons we’ve discussed Simple page structure CSS normalization Hardware acceleration support And JS goodies Fork it on github
- 23. Y U No Give Me iPhone 5z?
- 24. Thank You. Joey Simhon (@joeysim) CTO and Co-Founder DoAT