• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Developing for the mobile web
 

Developing for the mobile web

on

  • 1,028 views

 

Statistics

Views

Total Views
1,028
Views on SlideShare
619
Embed Views
409

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 409

http://geeks.doat.com 409

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Developing for the mobile web Developing for the mobile web Presentation Transcript

  • Developing for the “mobile web” Joey Simhon (@joeysim) CTO and Co-Founder DoAT
  • Hello WorldGrowing Internet & mobile babies since 2000Owned and managed 2 web agencies (UX & Tech)Served as acting CTO for several startup companiesPassionate about engineering and the culture around it
  • DoAT1st search engine born mobileLaunched 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 technologiesFollow us - @doatgeeks | geeks.doat.com
  • There’s no such thing as the “mobile web”
  • From a UX perspectiveicon + full screen = app
  • We’re seeing HUGE progress
  • Mostly publishers adoption and some tech
  • We want you to hack it and innovate on top of it
  • As painlessly as possible :-)
  • Things we wish we had known
  • HTML5 Support
  • Device / Browser Capabilities• Well 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
  • 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
  • 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 100s 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)
  • Network• High latency• When its 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
  • 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
  • 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
  • Android specificsNo CSS fixed positioning on Android 2.1 and belowNo hardware accelerated CSS transitions.No hardware acceleration. Period.No Standalone modeScreen resolutions and ratios vary
  • iOS specificsStandalone 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
  • Windows Phone specificsNothing much to say hereThe v7.0 Browser is like IE ~6.5Just build for Mango (WPhone v7.5)
  • Introducing Touchy Boilerplate
  • TouchyBPYou mobile web app starter kitEncapsulates all of the lessons we’ve discussedSimple page structureCSS normalizationHardware acceleration supportAnd JS goodiesFork it on github
  • Y U No Give Me iPhone 5z?
  • Thank You. Joey Simhon (@joeysim)CTO and Co-Founder DoAT