InterLab: Mobile

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


WHAT’S YOUR TARGET?

Photo by Katey Nicosiahttp://www.flickr.com/photos/onegoodbumblebee/299174128


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



THINK SIMPLE(AND RETRO)


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


Photo by phoenixdailyphotohttp://www.flickr.com/photos/phoenixdailyphoto/1467681879


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


ResponsiveWebDesign

A single website

CSS media queries to target mobile devices

Requires modern mobile browser

12






<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)">


FancyApplicationWeb Design

HTML5, JavaScript, and CSS3

Can provide a native app-like experience

Requires modern mobile browser

18


<input type="email">

<input type="url"><input type="number"><input type="tel">

Other keyboard types

Little Things Matter


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


Taking It Further

Wrap it in an app

PhoneGap

22

Images courtesy of Apple and Google


Native Applications

Full access to a device’s capabilities

Native look and feel

Take advantage of native libraries

23


Images courtesy of Apple


ToolsMatter

Photo by Meanest Indianhttp://www.flickr.com/photos/meanestindian/2260343214


Architecture Matters

Photo by x-ray delta onehttp://www.flickr.com/photos/x-ray_delta_one/4129207743


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

http://afdc.energy.gov/stations/m

http://afdc.energy.gov/stations/m

http://wurfl.sourceforge.net/

http://code.google.com/mobile/analytics/docs/web/





http://www.alistapart.com/articles/responsive-web-design/

http://www.alistapart.com/articles/responsive-web-design/

http://hicksdesign.co.uk/

http://diveintohtml5.org/

http://www.jqtouch.com/

http://jquerymobile.com/

http://code.google.com/p/iui/

http://www.sencha.com/products/touch/

http://zeptojs.com/

http://building-iphone-apps.labs.oreilly.com/


Photo by Eleafhttp://www.flickr.com/photos/eleaf/2536358399

http://slideshare.net/NickBlah

[email protected]

Technology

InterLab: Mobile