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

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

No content

No content

When “m.” is NOT an Option

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

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

No content

No content

Tablet Smartphone Feature Phone

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

The Homepage Dilemma Your Institutions homepage is NOT your mobile site

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/

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

Analytics Time!

ND.edu Operating Systems

ND.edu Mobile Devices

m.ND.edu Devices

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

Redirecting Mobile Users • Provide links in both directions

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

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

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”)

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

Football vs USC Bowl Game Blizzard

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

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

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

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

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

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