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

April 16, 2011

More Decks by Erik Runyon

Other Decks in Technology


  1. The Many Faces of Mobile Erik Runyon Web Developer University

    of Notre Dame CASE Indiana, April 15, 2011
  2. What we'll be covering • Styling for mobile (when “m.”

    is not an option) • Institution site • Mobile site • Native apps
  3. None
  4. None
  5. When “m.” is NOT an Option

  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
  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
  8. None
  9. None
  10. Tablet Smartphone Feature Phone

  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
  12. The Homepage Dilemma Your Institutions homepage is NOT your mobile

  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/
  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
  15. Analytics Time!

  16. ND.edu Operating Systems

  17. ND.edu Mobile Devices

  18. m.ND.edu Devices

  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
  20. Redirecting Mobile Users • Provide links in both directions

  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
  22. Getting Started • MIT Mobile Web v0.9 (May 2009) •

    m.ND.edu (Sept 2009)
  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”)
  24. The Top Five 1. Athletics 2. Map 3. Food 4.

    Academics 5. Directory
  25. Football vs USC Bowl Game Blizzard

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

    which ones
  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
  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
  29. “Native Web” • PhoneGap http://www.phonegap.com/ • Titanium http://www.appcelerator.com/products/native-iphone- android-development/ •

    Rhomobile http://rhomobile.com/products/rhodes/
  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
  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