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)

21. Introducing Touchy Boilerplate

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