InterLab: Mobile

1,113 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,113
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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.
  • InterLab: Mobile

    1. 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
    2. 2. NATIONAL RENEWABLE ENERGY LABORATORY 2
    3. 3. NATIONAL RENEWABLE ENERGY LABORATORY Image courtesy of Apple
    4. 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
    5. 5. NATIONAL RENEWABLE ENERGY LABORATORY 5 OR Photo by gnta http://www.flickr.com/photos/gnt/3518267115© Twentieth Century Fox
    6. 6. NATIONAL RENEWABLE ENERGY LABORATORY Lowest Common Denominator Web Design A separate, simplified website Target smart and not-so-smart phones 6
    7. 7. NATIONAL RENEWABLE ENERGY LABORATORY 7
    8. 8. NATIONAL RENEWABLE ENERGY LABORATORY 8 THINK SIMPLE (AND RETRO)
    9. 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. 10. NATIONAL RENEWABLE ENERGY LABORATORY 10 Photo by phoenixdailyphoto http://www.flickr.com/photos/phoenixdailyphoto/1467681879
    11. 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. 12. NATIONAL RENEWABLE ENERGY LABORATORY Responsive Web Design A single website CSS media queries to target mobile devices Requires modern mobile browser 12
    13. 13. NATIONAL RENEWABLE ENERGY LABORATORY 13
    14. 14. NATIONAL RENEWABLE ENERGY LABORATORY 14
    15. 15. NATIONAL RENEWABLE ENERGY LABORATORY 15
    16. 16. NATIONAL RENEWABLE ENERGY LABORATORY 16
    17. 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. 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. 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. 20. NATIONAL RENEWABLE ENERGY LABORATORY Stand On The Shoulders of Giants jQTouch jQuery Mobile iUI Sencha Touch Zepto.js 20
    21. 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. 22. NATIONAL RENEWABLE ENERGY LABORATORY Taking It Further Wrap it in an app PhoneGap 22 Images courtesy of Apple and Google
    23. 23. NATIONAL RENEWABLE ENERGY LABORATORY Native Applications Full access to a device’s capabilities Native look and feel Take advantage of native libraries 23
    24. 24. NATIONAL RENEWABLE ENERGY LABORATORY 24 Images courtesy of Apple
    25. 25. NATIONAL RENEWABLE ENERGY LABORATORY 25 Tools Matter Photo by Meanest Indian http://www.flickr.com/photos/meanestindian/2260343214
    26. 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. 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. 28. NATIONAL RENEWABLE ENERGY LABORATORY 28 Photo by Eleaf http://www.flickr.com/photos/eleaf/2536358399

    ×