Download It’s All Too Much

Bit.ly/z5yjsz
Mobile Design Patterns
Eric Neff
Harkeerat Toor
Malcolm Nguyen
Kiefer Consulting, Inc. Mobile Division
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 - http://jquerymobile.com/
• jqTouch - http://jqtouch.com/
• Sencha Touch - http://www.sencha.com/
jQuery Mobile
<div data-role="page”>
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
• jQuery Framework ~20k
• Themable
• Markup driven
</div>
iOS, Android, Win, Palm, BB, + …
jQTouch
<div id="home”>
<div class="toolbar">
• jQuery Plugin
• WebKit Enabled
<h1>Page Title</h1>
</div>
</div>
• CSS Selectors
<div id="info">
• iOS like formatting
<div>
<h1>Info</h1> <a href="#home"
class="button back">Back</a>
</div>
<div class="info">
• Swipe Detection
• Related to Sencha
<p>Page Footer</p>
</div>
</div>
iOS, Android, Win, BB
Sencha Touch
new Ext.Application({
launch: function() {
new Ext.Panel({
fullscreen: true,
html: 'Hello World!'
});
}
});
iOS, Android, BB
• JavaScript Framework ~ big
• Script based layout
• Supports Phone + Tablet
Examples
Dailymotion
IKEA
BOX
Development
• Not bound to developer toolkits and platformspecific 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
<a href=”tel://444-4444”>
<img src=”phone.png” alt = “Call Me” />
</a>
• Access to the web
- Send e-mails 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 - http://www.appcelerator.com/
• PhoneGap - http://www.phonegap.com/
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 });
}
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
Kiefer Consulting, Inc.
24 Years of
Experience
700+ IT Success
Stories
Dedication to
Your Success
State and Local
Government
Private Sector
SharePoint ECM
Custom .NET
Web Solutions
Mobile Solutions
Mentoring
Support
Edunars TM
Local Conferences
Philanthropy
Powerhouse Science
Center
Christmas Promise
Collaboration
ExperienceTM
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 [email protected]
Harkeerat Toor [email protected]
Malcolm Nguyen [email protected]
www.kieferconsulting.com