NREL is a national laboratory of the U.S. Department of Energy, Office of Energy Efficiency and Renewable Energy, operated by the Alliance for Sustainable Energy, LLC.
Tips For The Quickly ChangingMobile Landscape
InterLab 2010
Nick Muerdter
November 4, 2010
NATIONAL RENEWABLE ENERGY LABORATORY 2
NATIONAL RENEWABLE ENERGY LABORATORY Image courtesy of Apple
NATIONAL RENEWABLE ENERGY LABORATORY 4
WHAT’S YOUR TARGET?
Photo by Katey Nicosiahttp://www.flickr.com/photos/onegoodbumblebee/299174128
NATIONAL RENEWABLE ENERGY LABORATORY 5
OR
Photo by gntahttp://www.flickr.com/photos/gnt/3518267115© Twentieth Century Fox
NATIONAL RENEWABLE ENERGY LABORATORY
LowestCommonDenominator Web Design
A separate, simplified website
Target smart and not-so-smart phones
6
NATIONAL RENEWABLE ENERGY LABORATORY 7
NATIONAL RENEWABLE ENERGY LABORATORY 8
THINK SIMPLE(AND RETRO)
NATIONAL RENEWABLE ENERGY LABORATORY 9
Make sense of phones Make sense of visitors
Google Analytics for Mobile Websites
AWStats
WURFL
Photo by Peter Morvillehttp://www.flickr.com/photos/morville/3220105925
Photo by .m for matthijshttp://www.flickr.com/photos/matthijs/3514892055
NATIONAL RENEWABLE ENERGY LABORATORY 10
Photo by phoenixdailyphotohttp://www.flickr.com/photos/phoenixdailyphoto/1467681879
NATIONAL RENEWABLE ENERGY LABORATORY 11
Symbian BlackBerry Apple Microsoft Android Other0%
10%
20%
30%
40%
50%44%
19%15%
7%10%
5%
24%
6%
40%
2%
26%
2%
WorldwideHandset Market Share vs. Web and App
Usage
Handset Share
MarketShare
Handset Share: Gartner Q1 2010: Market ShareWeb/App Usage: AdMob Operating System Share, May 2010
NATIONAL RENEWABLE ENERGY LABORATORY
ResponsiveWebDesign
A single website
CSS media queries to target mobile devices
Requires modern mobile browser
12
NATIONAL RENEWABLE ENERGY LABORATORY 13
NATIONAL RENEWABLE ENERGY LABORATORY 14
NATIONAL RENEWABLE ENERGY LABORATORY 15
NATIONAL RENEWABLE ENERGY LABORATORY 16
NATIONAL RENEWABLE ENERGY LABORATORY 17
<link rel="stylesheet" type="text/css" href="common.css" media="all"><link rel="stylesheet" type="text/css" href="print.css" media="print">
<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)">
NATIONAL RENEWABLE ENERGY LABORATORY
FancyApplicationWeb Design
HTML5, JavaScript, and CSS3
Can provide a native app-like experience
Requires modern mobile browser
18
NATIONAL RENEWABLE ENERGY LABORATORY 19
<input type="email">
<input type="url"><input type="number"><input type="tel">
Other keyboard types
Little Things Matter
NATIONAL RENEWABLE ENERGY LABORATORY
Stand On The Shoulders of Giants
jQTouch
jQuery Mobile
iUI
Sencha Touch
Zepto.js
20
NATIONAL RENEWABLE ENERGY LABORATORY 21Photo by Dru!http://www.flickr.com/photos/druclimb/480108350
Going Offline
Cache Manifest File
localStorage
Web SQL
NATIONAL RENEWABLE ENERGY LABORATORY
Taking It Further
Wrap it in an app
PhoneGap
22
Images courtesy of Apple and Google
NATIONAL RENEWABLE ENERGY LABORATORY
Native Applications
Full access to a device’s capabilities
Native look and feel
Take advantage of native libraries
23
NATIONAL RENEWABLE ENERGY LABORATORY 24
Images courtesy of Apple
NATIONAL RENEWABLE ENERGY LABORATORY 25
ToolsMatter
Photo by Meanest Indianhttp://www.flickr.com/photos/meanestindian/2260343214
NATIONAL RENEWABLE ENERGY LABORATORY 26
Architecture Matters
Photo by x-ray delta onehttp://www.flickr.com/photos/x-ray_delta_one/4129207743
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/web/
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
NATIONAL RENEWABLE ENERGY LABORATORY 28
Photo by Eleafhttp://www.flickr.com/photos/eleaf/2536358399
http://slideshare.net/NickBlah