This document discusses mobile strategies and developments, including: - Growth in mobile usage, with 40% of tweets sent via mobile and 16% of new users starting on mobile. - Differences between native apps and mobile web, with native providing commerce, OS integration and speed advantages. - Approaches to mobile web, including media queries to adapt existing sites or building separate mobile sites, with advantages in speed and implementation. - Examples of mobile strategies at universities, including Northwestern's native and mobile web applications.

1. Here today, still here tomorrow – mobile strategy and developments A presentation to the Web Steering Committee May 11, 2011

2. Growth How are devices being used?

3. Growth “In 2009, an item sold every 2 seconds via eBay mobile applications worldwide” -- $600M total mobile transactions 347% increase in mobile browser users Jan 2010 40% of tweets sent via mobile 16% of new users start on mobile What are the top two Twitter mobile clients?

4. Growth 347% increase in mobile browser users Jan 2010 40% of tweets sent via mobile 16% of new users start on mobile What are the top two Twitter mobile clients? Web Text Messaging

5. Native “vs” Web Who installs a University’s application? Do prospective students install the app? Do their parents install the app? Do they install any apps!? Who installs applications and why?

6. Use Cases You’re a visitor in Durham, NC for a campus event at Duke, but you forgot where or when exactly it is.

7. Use Cases You’re a visitor in Durham, NC for a campus event at Duke, but you forgot where or when exactly it is. DO YOU OR /

8. Use Cases Other scenarios: "I wonder if they provide tours on campus?", "I want to know what kind of cutting-edge research is going on", "I'm looking for a good University, where campus life is vibrant, student achievement is great, and academics are top-notch." OR

9. Use Cases To the App Store, Android Market, BlackBerry App World, HP App Catalog…! Show of hands?

10. Use Cases Everybody dig! © State of California Department of Conservation

11. Use Cases Times Change Flickr/major_clanger Flickr/ferranrodenas

12. Times REALLY change 1280×800 1024 × 768 1024 × 768 1024x600

15. http://www.davis.k12.ut.us/ssjh/Clubs/clubweb/AR/ComposerPages/index.htm

16. http://www.davis.k12.ut.us/ssjh/Clubs/clubweb/AR/ComposerPages/index.htm

17. Signal Hill, 2008 Flickr/bigmikelakers

18. Why “Native”? Commerce OS Integration Speed

19. Why “Native”? You can’t find money with it

21. Why “Native”?

22. Why “Native”? Handset Manufacturer Market Share – World – April 29, 2011 Source: http://www.appleinsider.com/articles/11/04/29/115_growth_propels_apple_to_5_share_of_global_phone_shipments.html Does your work have global reach? Is Apple/5% market share a priority target?

23. Why “Native”? Testing. The truest way of testing a native application is to have the devices in your hand.

24. Why “Native”? Testing. For SOME platforms, you need more than just the target device. iOS developer tools only work on Mac OS.

25. Why “Native”? Source: http://us.blackberry.com/developers/choosingtargetos.jsp

26. Why “Native”? This pie looks much more tasty Source: http://developer.android.com/resources/dashboard/platform-versions.html

27. Chasing Platforms Facebook: http://iphone.facebook.com/ http://x.facebook.com/ (?) http://touch.facebook.com/ http://m.facebook.com/

28. Why “Mobile Web”? Going back to mobile web… Where will the maximum benefit be achieved? Probably where most of the eyeballs are. And, in my opinion, that’s not the app stores.

29. Why “Mobile Web”?

30. Approaches to Mobile Web Implement Deploy Advertise One way: build a completely new site. Create new graphics, create new layout HTML, create new CSS, find a way to get your content management system to re-publish all of the content into this layout with these components to a new server.

31. Approaches to Mobile Web Implement Deploy Advertise Another way: build a completely new site. a mobile version. Create new graphics, create new layout HTML, create new CSS, find a way to get your content management system to re-publish all of the content into this layout with these components to a new server.

32. Approaches to Mobile Web Implement Deploy Advertise Media Queries! A feature of CSS. http://mediaqueri.es/ @media screen and (max-device-width: 480px) { h1 { … } }

33. Approaches to Mobile Web Implement Deploy Advertise Media Queries! This is the same page you view on your desktop

34. Approaches to Mobile Web Implement Deploy Advertise This is the same page you view on your desktop

35. Approaches to Mobile Web Implement Deploy Advertise Advantage: Most of the time, writing new CSS is all it takes – incredible implementation speed. Disadvantage: Sends more data to the browser (more CSS, higher resolution images than are needed) which can be bad for performance (there are ways around this)

36. Approaches to Mobile Web Implement Deploy Advertise Areas where “native” (maybe) has an edge on web Commerce OS Integration Speed

37. Approaches to Mobile Web Implement Deploy Advertise Commerce Forget it. Uses the same model as the web – advertising.

38. Approaches to Mobile Web Implement Deploy Advertise Speed localStorage, webCache, WebGL (graphics chip powered visuals in-browser)… Way too much to cover today. http://diveintohtml5.org/

39. Approaches to Mobile Web Implement Deploy Advertise OS Integration Phone numbers: <a href=“tel://888-402-4021”>Call Rob Johnson</a> Contacts: No support for vCard (horrible). Need to build a service to e-mail the vCard. Maps: http://maps.google.com links open the embedded application E-mail: Yes.

40. Approaches to Mobile Web Implement Deploy Advertise

41. Approaches to Mobile Web Implement Deploy Advertise How do I tell people my mobile page exists!? Traditional advertising, yes. A guessable hostname (m.domain.com) helps too. (with media queries on your pages, you don’t have to) “To auto-detect, or not to auto-detect, that is the question” Even if you don’t make the full commitment, you can still use media queries to advertise the existence of your mobile site by making a hidden element appear if the client is on a small screen.

42. Approaches to Mobile Web Implement Deploy Advertise “To auto-detect, or not to auto-detect, that is the question” “How do I let users get back to the desktop/regular site?” If you’re asking this question, your mobile site has mechanical defects! You have failed to create a working mobile site. Why could anyone needing to pull the eject lever on your work be considered a good thing?

43. Hybrids Hybrids

44. Hybrids Hybrids PhoneGap is a suite, a free cross-compiler that takes HTML and Javascript language and compiles it to several different target devices. University Relations hasn’t tried it. At present we are focused on one native project, Northwestern Mobile.

45. At Northwestern Northwestern Mobile, a partnership with Blackboard. Available on Android, BlackBerry, and iOS No two versions have the same features and modules The Transit module, a bus tracking system, is a web application at http://maps.northwestern.edu/mobile/shuttles/

46. At Northwestern Northwestern Mobile Web Began October 2009 Several abortive attempts

47. At Northwestern Student Enterprise Systems/CAESAR Project Bring courses to the web, outside of PeopleSoft Comes with a mobile site, seen at left

48. At Northwestern PlanIt Purple Website Media Queries! Thanks to Jacob. Coming Soon

49. Summary Thank You

50. Summary “Cheat Sheet” of terms to stay up to date on: Media Queries Responsive Design HTML5 Webkit Development People (their blogs and twitter): Jeremy Keith Ethan Marcotte Peter-Paul Koch (Quirksmode) Andy Clarke (320 & up, also animatable) Thank You