Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

InterLab: Mobile

on

  • 717 views

 

Statistics

Views

Total Views
717
Views on SlideShare
717
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • First released 2007App 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.
  • WURFLMobile detection, details on phone capabilities.AnalyticsGoogle 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 usesjQTouchLibraries add a lot of polish to make things feel more native.Transitions, animations, touch swiping, themes.jQTouch,iUILayer on top of HTML.Targets iPhones and Android phones.jQuery Mobile: New alpha available. Official jQuery mobile.Sencha TouchBuild your app in JavaScript.Like ExtJS.Targets phones and iPads.Commercial product.Zepto.jsMinimal 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
  • 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.
  • Some tools for cross platform native app development.Flash Packager for iPhoneBe very aware of limitationsUsing 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.

InterLab: Mobile InterLab: Mobile Presentation Transcript

  • Tips For The Quickly ChangingMobile Landscape
    InterLab 2010
    Nick Muerdter
    November 4, 2010
  • 2
  • Image courtesy of Apple
  • 4
    WHAT’S YOUR TARGET?
    Photo by Katey Nicosia
    http://www.flickr.com/photos/onegoodbumblebee/299174128
  • OR
    Photo by gnta
    http://www.flickr.com/photos/gnt/3518267115
    © Twentieth Century Fox
    5
  • LowestCommonDenominator Web Design
    A separate, simplified website
    Target smart and not-so-smart phones
    6
  • 7
  • 8
    THINK SIMPLE(AND RETRO)
  • Make sense of phones
    Make sense of visitors
    9
    Google Analytics for Mobile Websites
    AWStats
    WURFL
    Photo by Peter Morvillehttp://www.flickr.com/photos/morville/3220105925
    Photo by .m for matthijs
    http://www.flickr.com/photos/matthijs/3514892055
  • 10
    Photo by phoenixdailyphoto
    http://www.flickr.com/photos/phoenixdailyphoto/1467681879
  • 11
    Handset Share: Gartner Q1 2010: Market Share
    Web/App Usage:AdMob Operating System Share, May 2010
  • ResponsiveWebDesign
    A single website
    CSS media queries to target mobile devices
    Requires modern mobile browser
    12
  • 13
  • 14
  • 15
  • 16
  • <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)">
  • FancyApplicationWeb Design
    HTML5, JavaScript, and CSS3
    Can provide a native app-like experience
    Requires modern mobile browser
    18
  • 19
    Little Things Matter
    <input type="email">
    Other keyboard types
    <input type="url">
    <input type="number">
    <input type="tel">
  • Stand On The Shoulders of Giants
    jQTouch
    jQuery Mobile
    iUI
    Sencha Touch
    Zepto.js
    20
  • 21
    Going Offline
    Cache Manifest File
    localStorage
    Web SQL
    Photo by Dru!
    http://www.flickr.com/photos/druclimb/480108350
  • 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
  • 24
    Images courtesy of Apple
  • 25
    Architecture
    Matters
    Photo by x-ray delta one
    http://www.flickr.com/photos/x-ray_delta_one/4129207743
  • 26
    Tools
    Matter
    Photo by Meanest Indian
    http://www.flickr.com/photos/meanestindian/2260343214
  • 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
  • 28
    http://slideshare.net/NickBlah
    nick.muerdter@nrel.gov
    Photo by Eleaf
    http://www.flickr.com/photos/eleaf/2536358399