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

2. PATTERNS VS. FRAMEWORKS

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

4. THE MATRIX

5. MOBILE WEB HARKEERAT TOOR

6. 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

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

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

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

10. Frameworks jQuery Mobile - http://jquerymobile.com/http://jquerymobile.com/ jqTouch - http://jqtouch.com/http://jqtouch.com/ Sencha Touch - http://www.sencha.com/http://www.sencha.com/

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

12. 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

13. 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

14. Examples DailymotionIKEABOX

15. 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

16. 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

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

18. EMBEDDED WEB MALCOLM NGUYEN

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

20. Vendors Titanium - http://www.appcelerator.com/http://www.appcelerator.com/ PhoneGap - http://www.phonegap.com/http://www.phonegap.com/

21. 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');

22. 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

23. Native Calls phonegap.com

24. 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

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

26. NATIVE ERIC NEFF

27. 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

28. Mobile Web Example

29. Embedded Web Example

30. Native Example

31. 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.

32. QUESTIONS?

33. 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

34. Thank You! Eric Neff eneff@kieferconsulting.com Harkeerat Toor htoor@kieferconsulting.com Malcolm Nguyen mnguyen@kieferconsulting.com www.kieferconsulting.com