Mobile Design Patterns Eric Neff Harkeerat Toor Malcolm Nguyen Kiefer Consulting, Inc. Mobile Division Bit.ly/z5yjsz

PATTERNS VS. FRAMEWORKS

3 Ways 1.Mobile Web 2.Embedded Web 3.Native Use a mobile web site to track device access and upgrade the busiest platforms

THE MATRIX

MOBILE WEB HARKEERAT TOOR

What is Mobile Web? –Internet browsing on your phone –Mobile Web App An HTML5 application CSS3 to enhance the UI JavaScript to add functionality –637 million compatible devices

Overview of Mobile Web Cross Platform Distribution Frameworks Examples Development Optimization No Native Calls

Cross Platform Develop once, run everywhere...? Progressive Enhancement – Basic content/functionality is accessible to all web browsers – Browser sniffing and unobtrusive JavaScript html5test.com

Distribution App store – Good and bad Host on your own servers – Instant updates Internet Connectivity – Cache URL Discoverability – Social distribution

Frameworks jQuery Mobile - jqTouch - Sencha Touch -

jQuery Mobile jQuery Framework ~20k Themable Markup driven Page Title Page content goes here. Page Footer iOS, Android, Win, Palm, BB, + …

jQTouch jQuery Plugin WebKit Enabled CSS Selectors iOS like formatting Swipe Detection Related to Sencha iOS, Android, Win, BB Page Title Info Back Page Footer

Sencha Touch JavaScript Framework ~ big Script based layout Supports Phone + Tablet new Ext.Application({ launch: function() { new Ext.Panel({ fullscreen: true, html: 'Hello World!' }); } }); iOS, Android, BB

Examples DailymotionIKEABOX

Development Not bound to developer toolkits and platform- specific SDK’s – Free to use any IDE Developer experience – Easier to develop IF targeting multiple devices Availability – More developers available

Optimization Data transfer and browser rendering – Typically slower so keep downloads to a minimum – Externalize JavaScript and CSS Images – Get rid of as many as possible, and keep used ones as lightweight as possible Remove whitespace – jQuery minify

No Native Calls WebKit support for “tel” markup Access to the web -Send s through server side scripts -Access to geolocation through HTML5 Still not native

EMBEDDED WEB MALCOLM NGUYEN

Embedded Web Pros Branch off mobile web 90% Cross Platform App Store Native Access Cons Browser inconsistencies (Windows Phone 7) At JavaScript’s Mercy

Vendors Titanium - PhoneGap -

Appcelerator Titanium Tiered Access, Free Community Edition JavaScript Compiles to Native Code Better Performance Native features (Camera/File/HTTP) var win = Ti.UI.currentWindow; //-- Create the sub windows var crusts = Ti.UI.createWindow(); var toppings = Ti.UI.createWindow(); var details = Ti.UI.createWindow(); //-- We set the background here since this wont change win.backgroundImage = '../images/bg_main.png'; //-- Include our clock Ti.include('../includes/clock.js');

PhoneGap Free to use, Pay for support Xcode and Eclipse integration Huge list of supported devices Acquired by Adobe Uses HTML/CSS and JavaScript Compatible with JQuery Mobile and Sencha Touch

Native Calls phonegap.com

Converting Web App to Embedded Download PhoneGap Reference PhoneGap.Js in HTML markup. Call Native API function capturePhoto() { // Take picture using device camera and retrieve image as base64-encoded string navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 }); }camera.getPicture

Plugins Implement PGPlugin Class Use Phonegap.Exec in JS Allows use of Native Libraries.

NATIVE ERIC NEFF

Native Code iOS – Xcode –Developer.apple.com Android – Eclipse –Developer.android.com Windows Phone – Visual Studio –Create.msdn.com Alternatives: Mono – (Touch, Droid) – Requires Developer Program –C# for both platforms

Mobile Web Example

Embedded Web Example

Native Example

24 Years of Experience State and Local Government Private Sector 700+ IT Success Stories SharePoint ECM Custom.NET Web Solutions Mobile Solutions Dedication to Your Success Mentoring Support Edunars TM Local Conferences Philanthropy Powerhouse Science Center Christmas Promise Collaboration Experience TM Kiefer Consulting, Inc.

QUESTIONS?

To Do Stop by our booth Pick up our “Mobile Fact Sheet” poster Enter to win an Android tablet Talk with us about mobile, code, the weather

Thank You! Eric Neff Harkeerat Toor Malcolm Nguyen