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
2. What we'll be covering • Styling for mobile (when “m.” is not an option) • Institution site • Mobile site • Native apps
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
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