Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Web Rising

Mobile Web Rising

Presentation shown in the Mobile Developer Summit 2011 in Bangalore, India, in November 2011.

Adrian Kosmaczewski

December 27, 2011
Tweet

More Decks by Adrian Kosmaczewski

Other Decks in Programming

Transcript

  1. Web

  2. update frequency usage frequency UI complexity native apps web apps

    games calculator business apps reports compatibility with other mobile platforms
  3. Web Application Native Application Pros Cons Simpler deployment and updates;

    known technologies, cheaper to maintain; access to GPS information; basic offline support; cross-platform Faster execution; access to address book, accelerometer, audio and camera; App Store; 3D games and animations; push notifications; Bonjour networking support. Slower to execute; more difficult to debug on the client side; limited access to hardware; no official app store; harder to monetize App Store review process; longer update times; relative complexity and higher cost of dev process
  4. Browsers Browser Share Notes Safari 24% iPad not included Opera

    21% Mini & Mobile Nokia 16% Android 15% Includes tablets BlackBerry 14% Marginal WebKit http://www.quirksmode.org/blog/archives/2011/03/mobile_browser_6.html
  5. Engines Engine Share Notes WebKit 57% Safari, Nokia, Android, Samsung,

    BlackBerry, MeeGo, Symbian... Presto 21% Opera Mini and Opera Mobile Gecko, Trident, Mango, UC, Obigo... 22% http://www.quirksmode.org/mobile/mobilemarket.html
  6. http://www.w3.org/2011/02/mobile-web-app-state.html SVG CSS3 WOFF Canvas CSS 3D CSS Animations <video>

    <audio> <input type="email"> Touch events in DOM HTML Speech Web Storage Contacts API Calendar API File Writer API Geolocation API XMLHttpRequest Websockets Messaging API Application Cache HTML5 Web Workers
  7. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iUI Demo</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;

    user- scalable=0;"/> <link rel="apple-touch-icon" href="iui-logo-touch- icon.png" /> <meta name="apple-touch-fullscreen" content="YES" /> <style type="text/css" media="screen"> @import "iui.css"; </style> <script type="application/x-javascript" src="iui.js"></script> </head>
  8. <body> <div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> <a

    class="button" href="#searchForm">Search</a> </div> <ul id="home" title="Music" selected="true"> <li><a href="#artists">Artists</a></li> <li><a href="#settings">Settings</a></li> <li><a href="stats.php">Stats</a></li> <li><a href="http://code.google.com/p/iui/" target="_self">About</a></li> <li>Nothing</li> </ul> <ul id="artists" title="Artists"> <li class="group">B</li> <li><a href="#TheBeatles">The Beatles</a></li> <li><a href="#BelleSebastian">Belle &amp; Sebastian</a></li> <li class="group">C</li> <li><a href="#CrowdedHouse">Crowded House</a></li> <li class="group">J</li> <li><a href="#JennyLewis">Jenny Lewis</a></li> <li><a href="#JohnMayer">John Mayer</a></li> <li class="group">Z</li> <li><a href="#Zero7">Zero 7</a></li> </ul>
  9. <?xml version="1.0" encoding="UTF-8"?> <page style="collection"> <content> <module> <header layout="simple"> <layout-items>

    <block>Blueprint 1.1 static example pages</block> </layout-items> </header> <module> <header layout="simple"> <layout-items> <block>List content</block> </layout-items> </header> <placard class="link" layout="card"> <layout-items> <block class="link"><strong>Restaurant Listings</strong></block> <block class="subtext">Organized by cuisine, with brief reviews, ratings, and thumbnails, with custom page header and footer</block> </layout-items> <load-page event="activate" page="restaurants.bp"/> </placard>
  10. <!DOCTYPE html> <html manifest="dws.manifest"> <meta name="robots" content="noindex, nofollow" /> <meta

    name="viewport" content="width=device-width; initial-scale=1.0; maximum- scale=1.0; user-scalable=0;"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="default" /> <link rel="apple-touch-icon" href="icon.png" /> <link rel="apple-touch-startup-image" href="startup.png" /> <title>Dezeen Watch Store</title>
  11. CACHE MANIFEST CACHE: clock.js index.html raphael-min.js jquery.js iphone_320.css iphone_480.css ipadlandscape.css

    ipadportrait.css dws.png dws_lscape_iphone.png dws_portrait_ipad.png dws_landscape_ipad.png startup.png bg.png iphone_lscape_bg.png ipad_pt_bg.png ipad_ls_bg.png install.png ipad_prompt.png #11210
  12. • Have a specification; • Have a schedule / Scrum

    burn chart; • Have an architecture; • Make a prototype; • Have (human) testers;
  13. • Automate your tests and builds; • Use a bug

    database; • Use version control; • Be agile; • Know your audience; • Scope your target.
  14. • Standards for Web Applications on Mobile http://www.w3.org/2011/02/mobile-web-app-state.html • QuirksMode

    http://www.quirksmode.org/mobile/ • State of the Mobile Web http://www.opera.com/smw/