mobile web
TRANSCRIPT
Exploring the Mobile Web
Nataliya Ryzhkina , Mobile Web Team Lead
• Fragmentationo Mobile Device Categorieso Mobile Knowlegeo Mobile Browsing Experience
Mobile Development Challanges
Exploring the Mobile Web
Mobile Development ChallangesMobile Device Categories
Mobile Device Categories
• Low-end mobile devices• Mid-end mobile devices• High-end mobile devices• Smartphones• Non-phone devices• Small Personal Object Technology (SPOTs)• Tablets
Mobile Development ChallangesMobile Knowlege
Mobile Knowlege
• Display• Resolution• Physical dimensions• Aspect ratio• Input methods• Other features
Mobile Development ChallangesMobile Browsing Experience
Mobile Browsing Experience
• Browsing Types (Focus navigation , Cursor navigation, Touch navigation, Multitouch navigation)
• Zoom Experience• Reflow Engines• Direct Versus Proxied Browsers• Multipage Experience• The WebKit Engine• Preinstalled Browsers and User-Installable Browsers• Browser Overview
Browser OverviewBrowser/platform WebKit engine Smart zoomProxied NavigationSafari Yes Yes No Multitouch
Android browser Yes Yes No Multiple(a)
Symbian/S60 Yes Yes No Cursor(a) Touch(a)
BlackBerry No <= 5.0 Yes >= 6.0 Yes(a) Yes/No(b) Cursor Touch(a)
Opera Mobile No Yes Yes/No(c) Focus
Opera Mini No Yes Yes Focus Touch(a)
Internet Explorer No No < 6.5 Yes >= 6.5
No Focus Touch(a)
Nokia Series 40 No <= 5th ed. Yes >= 6th ed. No No (expected in the future) Focus
WebOS Yes Yes No Touch
NetFront No No No Focus(a) Cursor(a)
Openwave (Myriad) No (yes in the future) No No Focus
Obigo/Teleca No Yes >= Q7 No Multiple(a)
Motorola Internet Browser No No No Focus
Bada browser Yes Yes No Touch
MicroB for Maemo No (Gecko) Yes No Multiple
Firefox No (Gecko) Yes No Multiple
UC browser No Yes Yes Multiple
Exploring the Mobile Web
Benefits
• Mobile Web Site, Hybrid Application, Native Application• Cross-platform/Cross-device compatability• Development tools• Graphic toolkits• Debuggers and Emulators
BenefitsMobile Web Site, Hybrid Application, Native Application
Mobile Web Site Hybrid Application Native Application
App store presence Only in web app stores In leading app stores In leading app stores
App store approval None Required Required
Upgrade flexibility High Direct update requiresproprietary mechanism
Direct update requiresproprietary mechanism
Installation userexperience
Via mobile browser,QR code
Downloaded from appstore
Downloaded from appstore
Branded on-devicepresence
Yes Yes Yes
Offline availability Yes Yes Yes
Monetization No app store fees App store fees apply App store fees apply
Crawl-ability Possible Not possible Not possible
BenefitsHybrid Application
BenefitsCross-platform/Cross-device compatability
BenefitsDevelopment tools
var listStore = { data: [ {firstName: 'Alana', lastName: 'Wiersma'}, … ]}var myList = new Ext.Container({ items: [{ height: 500, xtype: 'list', store: listStore, itemTpl: '<div class="contact"> {firstName} {lastName} </div>', grouped: true, indexBar: true }]});
<ul data-role="listview"><li><img src="images/gf.png" alt="France" class="ui-li-icon"><ahref="index.html">France</a> <span class="ui-li-count">4</span></li><li><img src="images/de.png" alt="Germany" class="ui-li-icon"><ahref="index.html">Germany</a> <span class="ui-li-count">4</span></li>…</ul>
BenefitsGraphic toolkits
Touch Charts and Animator
BenefitsDebuggers and Emulators
Remote Device Access \ Remote Test Lab \ Virtual Developer Lab
