1. NREL is a national laboratory of the U.S. Department of Energy, Office of Energy Efficiency and Renewable Energy, operated bythe Alliance for Sustainable Energy, LLC.
Tips For The Quickly Changing
Mobile Landscape
InterLab 2010
Nick Muerdter
November 4, 2010
4. NATIONAL RENEWABLE ENERGY LABORATORY 4
W H AT ’ S Y O U R TA R G E T ?
Photo by Katey Nicosia
http://www.flickr.com/photos/onegoodbumblebee/299174128
9. NATIONAL RENEWABLE ENERGY LABORATORY
Make sense of phones Make sense of visitors
9
Google Analytics for Mobile
Websites
AWStats
WURFL
Photo by Peter Morville
http://www.flickr.com/photos/morville/3220105925
Photo by .m for matthijs
http://www.flickr.com/photos/matthijs/3514892055
10. NATIONAL RENEWABLE ENERGY LABORATORY 10
Photo by phoenixdailyphoto
http://www.flickr.com/photos/phoenixdailyphoto/1467681879
11. NATIONAL RENEWABLE ENERGY LABORATORY
44%
19%
15%
7%
10%
5%
24%
6%
40%
2%
26%
2%
0%
10%
20%
30%
40%
50%
Symbian BlackBerry Apple Microsoft Android Other
Market
Share
Worldwide
Handset Market Share vs. Web and App Usage
Handset Share
11
Handset Share: Gartner Q1 2010: Market Share
Web/App Usage: AdMob Operating System Share, May 2010
12. NATIONAL RENEWABLE ENERGY LABORATORY
Responsive
Web
Design
A single website
CSS media queries to target
mobile devices
Requires modern mobile browser
12
17. NATIONAL RENEWABLE ENERGY LABORATORY
<link rel="stylesheet" type="text/css"
href="common.css" media="all">
<link rel="stylesheet" type="text/css"
href="print.css" media="print">
17
<link rel="stylesheet" type="text/css"
href="mobile.css"
media="screen and (max-device-width: 480px)">
<link rel="stylesheet" type="text/css"
href="mobile_landscape.css"
media="screen and (max-device-width: 480px) and
(orientation: landscape)">
18. NATIONAL RENEWABLE ENERGY LABORATORY
Fancy
Application
Web Design
HTML5, JavaScript, and CSS3
Can provide a native app-like
experience
Requires modern mobile browser
18
19. NATIONAL RENEWABLE ENERGY LABORATORY 19
<input type="email">
<input type="url">
<input type="number">
<input type="tel">
Other keyboard types
Little Things Matter
20. NATIONAL RENEWABLE ENERGY LABORATORY
Stand On The Shoulders of Giants
jQTouch
jQuery Mobile
iUI
Sencha Touch
Zepto.js
20
21. NATIONAL RENEWABLE ENERGY LABORATORY 21
Photo by Dru!
http://www.flickr.com/photos/druclimb/480108350
Going Offline
Cache Manifest File
localStorage
Web SQL
22. NATIONAL RENEWABLE ENERGY LABORATORY
Taking It Further
Wrap it in an app
PhoneGap
22
Images courtesy of Apple and Google
23. NATIONAL RENEWABLE ENERGY LABORATORY
Native
Applications
Full access to a device’s capabilities
Native look and feel
Take advantage of native libraries
23
25. NATIONAL RENEWABLE ENERGY LABORATORY 25
Tools
Matter
Photo by Meanest Indian
http://www.flickr.com/photos/meanestindian/2260343214
26. NATIONAL RENEWABLE ENERGY LABORATORY 26
Architecture Matters
Photo by x-ray delta one
http://www.flickr.com/photos/x-ray_delta_one/4129207743
27. NATIONAL RENEWABLE ENERGY LABORATORY
Resources
Our simple mobile tool:
http://afdc.energy.gov/stations/m
WURFL:
http://wurfl.sourceforge.net/
Analytics:
http://code.google.com/mobile/analytics/docs/we
b/
http://awstats.sourceforge.net/
Responsive Web Design:
http://www.alistapart.com/articles/responsive-
web-design/
http://hicksdesign.co.uk/
HTML5:
http://diveintohtml5.org/
JavaScript Libraries:
http://www.jqtouch.com/
http://jquerymobile.com/
http://code.google.com/p/iui/
http://www.sencha.com/products/touch/
http://zeptojs.com/
The Gamut:
http://building-iphone-apps.labs.oreilly.com/
27
28. NATIONAL RENEWABLE ENERGY LABORATORY 28
Photo by Eleaf
http://www.flickr.com/photos/eleaf/2536358399
Notas do Editor
First released 2007
App store launched in 2008
The devices you’re targeting can dramatically change your options.
Simple HTML.
You can try to use simple CSS and simple JavaScript, but try to make things look and perform correctly with those disabled.
BlackBerries can come with CSS and JavaScript disabled by default.
WURFL
Mobile detection, details on phone capabilities.
Analytics
Google Anlytics: Mobile version image based.
AWStats: Server side. Accurate even for phones with images disabled.
But designing for the lowest common denominator is boring.
Mobile is quickly changing: People more likely to get new phones every couple years.
Also, phones with nice browsers make up the majority of actual mobile web traffic.
BUT: Still a lot of not-so-smart BlackBerries in DOE. Depending on your client, this may affect your decisions.
Maintaining a separate iPhone version of your website is no fun. What about other devices? iPad? New 7” tablets?
Works with modern mobile browsers (Webkit, Opera). Not with BlackBerries until OS 6.
But you could use WURFL to deliver specific stylesheets to mobile devices with certain screen sizes.
Great for content heavy sites.
Controls styles only. Might be trickier for more complicated tools wanting to present a fundamentally different tool to mobile users.
Navigation in separate right-hand column. Decorative arrow for current navigation.
About/Our Clients in two columns.
Navigation moved up. Decorative arrow gone.
About/Our Clients now 1 column.
Navigation has changed from vertical to horizontal.
About/Our Clients details now at bottom of page.
Images have shrunk to fit page width.
Header text size is also smaller.
Add additional stylesheets for different sized devices (iPad).
You can make more complex media queries to add stylesheets for things like screen orientation, pixel density (iPhone 4 retina display), and more.
Write a tool once, run on iPhone, Android, Palm Pre, BlackBerry OS 6, etc.
Windows Phone 7 still lacking (based on IE7). Don’t worry until and if Windows Phone 7 takes off.
Simple things help.
Backwards-compatible HTML5 feature to bring up specific keyboards.
In all other browsers falls back to type=“text”
type=“url” has keyboard with “.com” and “/” buttons.
type=“number” brings up number keyboard.
Showtime example uses jQTouch
Libraries add a lot of polish to make things feel more native.
Transitions, animations, touch swiping, themes.
jQTouch, iUI
Layer on top of HTML.
Targets iPhones and Android phones.
jQuery Mobile: New alpha available. Official jQuery mobile.
Sencha Touch
Build your app in JavaScript.
Like ExtJS.
Targets phones and iPads.
Commercial product.
Zepto.js
Minimal alternative to jQuery, targeting only Webkit.
DIY, target whatever.
Most libraries have focused on providing an iPhone like interface and experience.
Be careful about interface expectation differences across platforms.
Cache Manfiest File: Define all the file dependencies for offline.
When the manfiest file changes, new files are cached.
localStorage: Persistent storage for key/value pairs.
Web SQL: Full, client-side SQL database.
The app store model has changed how apps are found and distributed.
Build a simple app web wrapper around your HTML site.
PhoneGap does this and more.
Provides JavaScript access to additional native phone features (accelerometer, camera, contacts)
Covers iPhone, Android, Blackberry, Windows Mobile, Palm.
Still doesn’t cover all native APIs.
Some things will still be difficult or impossible to do without native APIs right now.
OpenGL Games (WebGL in the future?)
Augmented reality apps
Some tools for cross platform native app development.
Flash Packager for iPhone
Be very aware of limitations
Using native tools (xCode) can have benefits.
Interface is harder to mess up (native look and feel, interface guidelines)
You can get a lot of functionality for free.
DRY: Don’t repeat yourself (or at least try). Try to share logic between applications and platforms when possible.
Use web services to your advantage.
