The Many Faces of Mobile

CASE Indiana 2011

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:
    erunyon@nd.edu
    weedygarden.net
    twitter.com/erunyon
    linkedin.com/in/erunyon
    Photos courtesy of Matt Cashore: http://photos.nd.edu
    

    View Slide