The Many Faces of Mobile

Transcript

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

    site

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: erunyon@nd.edu weedygarden.net twitter.com/erunyon linkedin.com/in/erunyon

    Photos courtesy of Matt Cashore: http://photos.nd.edu