Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Here today, still here tomorrow – mobile strategy and developments<br />A presentation to the<br />Web Steering Committee<...
Growth<br />How are devices being used?<br />
Growth<br />“In 2009, an item sold every 2 seconds via eBay mobile applications worldwide” -- $600M total mobile transacti...
Growth<br />347% increase in mobile browser users Jan 2010<br />40% of tweets sent via mobile<br />16% of new users start ...
Native “vs” Web<br />Who installs a University’s application?<br />Do prospective students install the app?<br />Do their ...
Use Cases<br />You’re a visitor in Durham, NC for a campus event at Duke, but you forgot where or when exactly it is.<br />
Use Cases<br />You’re a visitor in Durham, NC for a campus event at Duke, but you forgot where or when exactly it is.<br /...
Use Cases<br />Other scenarios: "I wonder if they provide tours on campus?", "I want to know what kind of cutting-edge res...
Use Cases<br />To the App Store, Android Market, BlackBerry App World, HP App Catalog…!<br />Show of hands?<br />
Use Cases<br />Everybody dig!<br />© State of California Department of Conservation<br />
Use Cases<br />Times Change<br />Flickr/major_clanger<br />Flickr/ferranrodenas<br />
Times REALLY change<br />1280×800<br />1024 × 768<br />1024 × 768<br />1024x600<br />
http://www.davis.k12.ut.us/ssjh/Clubs/clubweb/AR/ComposerPages/index.htm<br />
http://www.davis.k12.ut.us/ssjh/Clubs/clubweb/AR/ComposerPages/index.htm<br />
Signal Hill, 2008<br />Flickr/bigmikelakers<br />
Why “Native”?<br />Commerce<br />OS Integration<br />Speed<br />
Why “Native”?<br />You can’t find money with it<br />
Why “Native”?<br />
Why “Native”?<br />Handset Manufacturer Market Share – World – April 29, 2011<br />Source: http://www.appleinsider.com/art...
Why “Native”?<br />Testing.<br />The truest way of testing a native application is to have the devices in your hand.<br />
Why “Native”?<br />Testing.<br />For SOME platforms, you need more than just the target device.<br />iOS developer tools o...
Why “Native”?<br />Source: http://us.blackberry.com/developers/choosingtargetos.jsp<br />
Why “Native”?<br />This pie looks much more tasty<br />Source: http://developer.android.com/resources/dashboard/platform-v...
Chasing Platforms<br />Facebook:<br />http://iphone.facebook.com/<br />http://x.facebook.com/ (?)<br />http://touch.facebo...
Why “Mobile Web”?<br />Going back to mobile web…<br />Where will the maximum benefit be achieved?<br />Probably where most...
Why “Mobile Web”?<br />
Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />One way: build a completely new site.<br />Create ...
Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />Another way: build a completely new site. a mobile...
Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />Media Queries! A feature of CSS.<br />http://media...
Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />Media Queries!<br />This is the same page you view...
Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />This is the same page you view on your desktop<br />
Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />Advantage:<br />Most of the time, writing new CSS ...
Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />Areas where “native” (maybe) has an edge on web<br...
Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />Commerce<br />Forget it. Uses the same model as th...
Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />Speed<br />localStorage, webCache, WebGL (graphics...
Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />OS Integration<br />Phone numbers: <a href=“tel://...
Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />
Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />How do I tell people my mobile page exists!?<br />...
Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />“To auto-detect, or not to auto-detect, that is th...
Hybrids<br />Hybrids<br />
Hybrids<br />Hybrids<br />PhoneGap is a suite, a free cross-compiler that takes HTML and Javascript language and compiles ...
At Northwestern<br />Northwestern Mobile, a partnership with Blackboard.<br />Available on Android, BlackBerry, and iOS<br...
At Northwestern<br />Northwestern Mobile Web<br />Began October 2009<br />Several abortive attempts<br />
At Northwestern<br />Student Enterprise Systems/CAESAR Project<br />Bring courses to the web, outside of PeopleSoft<br />C...
At Northwestern<br />PlanIt Purple Website<br />Media Queries! Thanks to Jacob.<br />Coming Soon<br />
Summary<br />Thank You<br />
Summary<br />“Cheat Sheet” of terms to stay up to date on:<br />	Media Queries<br />	Responsive Design<br />	HTML5<br />We...
Upcoming SlideShare
Loading in …5
×

Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steering Committee

792 views

Published on

Best viewed in combination with my presenter notes! Please enable them.

Published in: Technology, Education
  • Best viewed in 'Speaker Notes' mode.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steering Committee

  1. 1. Here today, still here tomorrow – mobile strategy and developments<br />A presentation to the<br />Web Steering Committee<br />May 11, 2011<br />
  2. 2. Growth<br />How are devices being used?<br />
  3. 3. Growth<br />“In 2009, an item sold every 2 seconds via eBay mobile applications worldwide” -- $600M total mobile transactions<br />347% increase in mobile browser users Jan 2010<br />40% of tweets sent via mobile<br />16% of new users start on mobile<br />What are the top two Twitter mobile clients?<br />
  4. 4. Growth<br />347% increase in mobile browser users Jan 2010<br />40% of tweets sent via mobile<br />16% of new users start on mobile<br />What are the top two Twitter mobile clients?<br />Web<br />Text Messaging<br />
  5. 5. Native “vs” Web<br />Who installs a University’s application?<br />Do prospective students install the app?<br />Do their parents install the app? Do they install any apps!?<br />Who installs applications and why?<br />
  6. 6. Use Cases<br />You’re a visitor in Durham, NC for a campus event at Duke, but you forgot where or when exactly it is.<br />
  7. 7. Use Cases<br />You’re a visitor in Durham, NC for a campus event at Duke, but you forgot where or when exactly it is.<br />DO YOU<br />OR<br />/<br />
  8. 8. Use Cases<br />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."<br />OR<br />
  9. 9. Use Cases<br />To the App Store, Android Market, BlackBerry App World, HP App Catalog…!<br />Show of hands?<br />
  10. 10. Use Cases<br />Everybody dig!<br />© State of California Department of Conservation<br />
  11. 11. Use Cases<br />Times Change<br />Flickr/major_clanger<br />Flickr/ferranrodenas<br />
  12. 12. Times REALLY change<br />1280×800<br />1024 × 768<br />1024 × 768<br />1024x600<br />
  13. 13.
  14. 14.
  15. 15. http://www.davis.k12.ut.us/ssjh/Clubs/clubweb/AR/ComposerPages/index.htm<br />
  16. 16. http://www.davis.k12.ut.us/ssjh/Clubs/clubweb/AR/ComposerPages/index.htm<br />
  17. 17. Signal Hill, 2008<br />Flickr/bigmikelakers<br />
  18. 18. Why “Native”?<br />Commerce<br />OS Integration<br />Speed<br />
  19. 19. Why “Native”?<br />You can’t find money with it<br />
  20. 20.
  21. 21. Why “Native”?<br />
  22. 22. Why “Native”?<br />Handset Manufacturer Market Share – World – April 29, 2011<br />Source: http://www.appleinsider.com/articles/11/04/29/115_growth_propels_apple_to_5_share_of_global_phone_shipments.html<br />Does your work have global reach? Is Apple/5% market share a priority target?<br />
  23. 23. Why “Native”?<br />Testing.<br />The truest way of testing a native application is to have the devices in your hand.<br />
  24. 24. Why “Native”?<br />Testing.<br />For SOME platforms, you need more than just the target device.<br />iOS developer tools only work on Mac OS.<br />
  25. 25. Why “Native”?<br />Source: http://us.blackberry.com/developers/choosingtargetos.jsp<br />
  26. 26. Why “Native”?<br />This pie looks much more tasty<br />Source: http://developer.android.com/resources/dashboard/platform-versions.html<br />
  27. 27. Chasing Platforms<br />Facebook:<br />http://iphone.facebook.com/<br />http://x.facebook.com/ (?)<br />http://touch.facebook.com/<br />http://m.facebook.com/<br />
  28. 28. Why “Mobile Web”?<br />Going back to mobile web…<br />Where will the maximum benefit be achieved?<br />Probably where most of the eyeballs are. And, in my opinion, that’s not the app stores.<br />
  29. 29. Why “Mobile Web”?<br />
  30. 30. Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />One way: build a completely new site.<br />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.<br />
  31. 31. Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />Another way: build a completely new site. a mobile version.<br />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.<br />
  32. 32. Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />Media Queries! A feature of CSS.<br />http://mediaqueri.es/<br />@media screen and (max-device-width: 480px) {<br /> h1 { … }<br />}<br />
  33. 33. Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />Media Queries!<br />This is the same page you view on your desktop<br />
  34. 34. Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />This is the same page you view on your desktop<br />
  35. 35. Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />Advantage:<br />Most of the time, writing new CSS is all it takes – incredible implementation speed.<br />Disadvantage:<br />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)<br />
  36. 36. Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />Areas where “native” (maybe) has an edge on web<br />Commerce<br />OS Integration<br />Speed<br />
  37. 37. Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />Commerce<br />Forget it. Uses the same model as the web – advertising. <br />
  38. 38. Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />Speed<br />localStorage, webCache, WebGL (graphics chip powered visuals in-browser)…<br />Way too much to cover today.<br />http://diveintohtml5.org/<br />
  39. 39. Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />OS Integration<br />Phone numbers: <a href=“tel://888-402-4021”>Call Rob Johnson</a><br />Contacts: No support for vCard (horrible). Need to build a service to e-mail the vCard.<br />Maps: http://maps.google.com links open the embedded application<br />E-mail: Yes.<br />
  40. 40. Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />
  41. 41. Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />How do I tell people my mobile page exists!?<br />Traditional advertising, yes. A guessable hostname (m.domain.com) helps too.<br />(with media queries on your pages, you don’t have to)<br />“To auto-detect, or not to auto-detect, that is the question”<br />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. <br />
  42. 42. Approaches to Mobile Web<br />Implement<br />Deploy<br />Advertise<br />“To auto-detect, or not to auto-detect, that is the question”<br />“How do I let users get back to the desktop/regular site?”<br />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?<br />
  43. 43. Hybrids<br />Hybrids<br />
  44. 44. Hybrids<br />Hybrids<br />PhoneGap is a suite, a free cross-compiler that takes HTML and Javascript language and compiles it to several different target devices.<br />University Relations hasn’t tried it. At present we are focused on one native project, Northwestern Mobile.<br />
  45. 45. At Northwestern<br />Northwestern Mobile, a partnership with Blackboard.<br />Available on Android, BlackBerry, and iOS<br />No two versions have the same features and modules<br />The Transit module, a bus tracking system, is a web application at <br />http://maps.northwestern.edu/mobile/shuttles/<br />
  46. 46. At Northwestern<br />Northwestern Mobile Web<br />Began October 2009<br />Several abortive attempts<br />
  47. 47. At Northwestern<br />Student Enterprise Systems/CAESAR Project<br />Bring courses to the web, outside of PeopleSoft<br />Comes with a mobile site, seen at left<br />
  48. 48. At Northwestern<br />PlanIt Purple Website<br />Media Queries! Thanks to Jacob.<br />Coming Soon<br />
  49. 49. Summary<br />Thank You<br />
  50. 50. Summary<br />“Cheat Sheet” of terms to stay up to date on:<br /> Media Queries<br /> Responsive Design<br /> HTML5<br />Webkit Development<br />People (their blogs and twitter):<br /> Jeremy Keith<br /> Ethan Marcotte<br /> Peter-Paul Koch (Quirksmode)<br />Andy Clarke (320 & up, also animatable)<br />Thank You<br />

×