Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Many Faces of Mobile

The Many Faces of Mobile

CASE Indiana 2011

Erik Runyon
PRO

April 16, 2011
Tweet

More Decks by Erik Runyon

Other Decks in Technology

Transcript

  1. The Many Faces of Mobile
    Erik Runyon
    Web Developer
    University of Notre Dame
    CASE Indiana, April 15, 2011

    View Slide

  2. What we'll be covering
    • Styling for mobile
    (when “m.” is not an option)
    • Institution site
    • Mobile site
    • Native apps

    View Slide

  3. View Slide

  4. View Slide

  5. When “m.” is NOT an Option

    View Slide

  6. Keep Your Site small
    • Once upon a time we cared about download size
    • Mobile users will probably be downloading over a
    cellular network
    • Large images can scale down, but your users will
    pay for it

    View Slide

  7. Re-think Screen Size
    • Screens have been getting larger… until now
    • Mobile is more than just phones
    • Since the release of the iPad, tablets are a big deal

    View Slide

  8. View Slide

  9. View Slide

  10. Tablet Smartphone Feature Phone

    View Slide

  11. Build a Strategy
    • Decide what you’re supporting,
    and to what extent
    • Gather a suite of test devices,
    emulators and users
    • Understand your sites won’t look
    perfect on every device. Focus
    instead on usability.
    • Continually adjust your strategy

    View Slide

  12. The Homepage Dilemma
    Your Institutions homepage is NOT your mobile site

    View Slide

  13. They serve different purposes
    People go to the website because they can't wait for the next alumni magazine, right? What
    do you mean, you want a campus map? One of our students made one as a CS class project
    back in '01! You can click to zoom and everything!
    Source: http://xkcd.com/773/

    View Slide

  14. They Serve
    Different Purposes
    • Information gatherers
    • Casual browsers
    • This is where the
    letter from the
    President belongs
    (if you must)
    Main Site Mobile Site
    • Looking for something
    specific
    • Task oriented
    • Keep content short

    View Slide

  15. Analytics Time!

    View Slide

  16. ND.edu Operating Systems

    View Slide

  17. ND.edu Mobile Devices

    View Slide

  18. m.ND.edu Devices

    View Slide

  19. The State of the
    Mobile Web in Higher Ed
    (April 2011)
    • 37% of the survey respondents provide a solution (mobile
    website, accessible website, native mobile device
    applications etc.) targeting and serving owners of mobile
    devices.
    • 58% of the survey respondents with an existing solution
    have chosen to serve their mobile web users through a
    dedicated mobile website and only 22% with native
    applications for specific devices.
    http://media.higheredexperts.com.s3.amazonaws.com/hee_mobsurvey2011.pdf

    View Slide

  20. Redirecting Mobile Users
    • Provide links in both directions

    View Slide

  21. Redirecting Mobile Users
    • Provide links in both directions
    • Automatically redirect
    Homepage ONLY
    • Mobile user is most likely
    clicking a deep link for a reason

    View Slide

  22. Getting Started
    • MIT Mobile Web v0.9 (May 2009)
    • m.ND.edu (Sept 2009)

    View Slide

  23. Feeding the Beast
    • Data portability is your friend
    • Use feeds and APIs whenever possible
    • Don’t take over maintenance of something
    you can’t afford to maintain (aka “You touch
    it, you own it”)

    View Slide

  24. The Top Five
    1. Athletics
    2. Map
    3. Food
    4. Academics
    5. Directory

    View Slide

  25. Football vs USC Bowl Game Blizzard

    View Slide

  26. Mobile Web
    and
    Native Apps
    The decision between
    one, or which ones

    View Slide

  27. Mobile Web
    • No install required
    • Easy for users to find
    • Easier to support
    multiple platforms
    with a single code-
    base
    • Subject to connectivity
    issues
    • Not as responsive as
    native apps
    • Most users don’t
    understand they can
    “save” the site to their
    home-screen
    Pros Cons

    View Slide

  28. Native Apps
    • Can be more
    immersive (at the
    moment)
    • More responsive
    interface
    • Access to hardware
    • Requires install
    • Multiple apps for
    various platforms
    • Takes longer to deploy
    changes/updates
    Pros Cons

    View Slide

  29. “Native Web”
    • PhoneGap
    http://www.phonegap.com/
    • Titanium
    http://www.appcelerator.com/products/native-iphone-
    android-development/
    • Rhomobile
    http://rhomobile.com/products/rhodes/

    View Slide

  30. Resources
    • My blog
    http://weedygarden.net
    • Dave Olsen - Mobile in Higher Ed Blog
    http://www.dmolsen.com/mobile-in-higher-ed/
    • MIT Mobile Web
    https://github.com/MIT-Mobile/MIT-Mobile-Web
    • Mobile Web OSP
    http://mobilewebosp.pbworks.com/w/page/27923975/FrontPage
    • Modo Labs
    http://modolabs.com

    View Slide

  31. Erik Runyon
    email:
    blog:
    twitter:
    linkedin:
    [email protected]
    weedygarden.net
    twitter.com/erunyon
    linkedin.com/in/erunyon
    Photos courtesy of Matt Cashore: http://photos.nd.edu

    View Slide