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

464
-1

Published on

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

Published in: Technology, Education
1 Comment
0 Likes
Statistics
Notes
  • 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

No Downloads
Views
Total Views
464
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • aka “you can’t ignore small screen devices”
  • It’s also a well-established trend that every mobile prediction established has been broken well before its predicted point in time.Is the mobile device the flying car &amp; jetpack of the 2000s?! =)Most of the world experiences the web via mobile devices (handset phones)
  • $19,108 for a 23-foot deck boat.$10,025 for 250 grams of pure gold bullion.$10,000 for a Boston grand piano made bySteinway.$3,888 for a Hermes Kelly bag.$770 for a Jean Paul Gaultierwoolandleather coat.$600 for a pair of Christian Louboutin camel colored patent leather pumps.
  • Image right from Skokie Public Library’s Flickr account.I am sure the women in the picture are discussing the finer points of how they can use “Power Texting” to reconnect with their grandchildren.
  • Hint: the right answer doesn’t require you to remember your iTunes password.
  • The fact of the matter is, some people, even if they knew you had an app, just wouldn’t want it installed anyway.
  • The question is, where are users most likely to discover your content?
  • This is Signal Hill, Los Angeles, 1932. The “rigs” here were so close together that their leg structures would sometimes inter-twine.This is the same thing that is happening in popular “app markets” – thousands of companies vying for your dashboard space.But Mobile Devices aren’t frontier America, you’re not Jed Clampett, you didn’t buy a swamp for $1 that will turn into a plentiful oil field. You aren’t “buying” into the mindshare of people, you’re only renting space on their dashboard using continued interest as currency.The problem is exacerbated by iOS app “groups”, now you can group apps you don’t care much about together into one icon and give smaller real estate to a bunch of apps that “cry wolf” with notifications (see Phone, Facebook, E-mail in the screen capture)Is there room on the user’s screen for your app? What will it take to keep it there? Probably more than press releases and photos. You’ll need engagement.Apps get buried because people behind them do their design completely backwards: “We need a mobile app, what will it do?” usually produces garbage. It should instead be “People need to […], let’s build a mobile app.”
  • Also, times change.
  • Also, times change. Look at the different resolutions in use here. If you’re using a raster-based user experience (most are), you need to adjust your graphics to fit proportionately in every resolution, or they will look terrible when stretched, for example. When the Retina came out, the resolution exactly doubled on iOS devices. Fortunately they were kind enough to exactly double it!In iOS native development you’d then create all of your graphics in double-size formats in a special convention, suffixing @2, and the iOS framework subbed in the highres images when it needed to.It’s not all bad, I believe in many cases you’ll use native controls that will scale properly, but it’s something to be aware of.The iPad isn’t made of magic, even though Steve Jobs loves to say that. I think its most magical quality is that just a very short time after people bought into smartphones they immediately jumped on the tablet idea. That is really amazing.
  • Point is, can&apos;t know the future of OS dominance. Can reasonably know the future of web. HTML 4 (1999) is still supported out there and you can still open and interact with it!
  • The web is resilient! (circa 2000)
  • The web is resilient! (circa 2005)
  • The web is resilient! (circa 2005)How can I use the information trapped in native apps built for PalmOS today?
  • This is Signal Hill today. It’s been totally built over.
  • I love the cloud-to-cloud image because it debunks “the cloud” as a single, easily comprehended magic piece of technology.If time, take audience input on other advantages.
  • I’m not sure what dialect of Java BB or Android utilize, but there is undoubtedly a lot of API to understand.
  • http://www.appleinsider.com/articles/11/04/29/115_growth_propels_apple_to_5_share_of_global_phone_shipments.htmlSamsung makes a lot of different phones, but its “smart OS” of choice is strictly Android.Nokia will be implementing Windows Phone 7
  • I’m not sure what dialect of Java BB or Android utilize, but there is undoubtedly a lot of API to understand.
  • I’m not sure what dialect of Jav BlackBerry or Android utilize, but there is undoubtedly a lot of API to understand.
  • 90.4% of Android users are on the latest two OS releases.
  • Someone had a panic attack and had to use x.facebook.com once other phones adopted webkit browsers. Then, someone came to their senses and created touch.facebook.com.Is it telling that the iOS application pulls in its newsfeed content from the mobile web version?But the real point is, new device, new web browser seems a lot more reasonable to deal with than new device, new API to write code for, doesn’t it?
  • To the web!(she only uses IE because she doesn’t know any better)
  • You have to write new CSS anyway – just write it on top of what’s there already.
  • You have to write new CSS anyway – just write it on top of what’s there already.
  • You have to write new CSS anyway – just write it on top of what’s there already.This “mobile” view comes totally “free” with the Cascade sites we deploy that rely on this template.The nav being re-ordered in position to the end of the document follows ideas of “content first”
  • Drawbacks:
  • Let’s revisit the advantages native apps are or were perceived to have and see how we can meet them with web technology.I love the cloud-to-cloud image because it debunks “the cloud” as a single, easily comprehended magic piece of technology.If time, take audience input on other advantages.
  • The good news is, you can re-use this knowledge in your web sites!
  • The good news is, you can re-use this knowledge in your web sites!Many companies are developing in the mobile web app space.37signals, a local chicago shop, dropped their native apps and went all mobile web early this year. http://37signals.com/svn/posts/2761-launch-basecamp-mobile
  • The good news is, you can re-use this knowledge in your web sites!Many companies are developing in the mobile web app space.37signals, a local chicago shop, dropped their native apps and went all mobile web early this year. http://37signals.com/svn/posts/2761-launch-basecamp-mobile
  • The good news is, you can re-use this knowledge in your web sites!
  • The good news is, you can re-use this knowledge in your web sites!
  • It’s completely impossible to find a real SafeRide photo online.
  • The worst photo illustration in the whole slide deck. Apologies to people who own them, but this is one massive SUV, and it’s now available in hybrid form.
  • Northwestern Native app, don’t spend too much time, it’s mostly off topic/covered elsewhere. Challenges have been working with the vendor to get exactly what we want, dealing with release cycles…
  • Had to focus resources elsewhere at the time, probably for the better, as mobile knowledge was still gelling.
  • Had to focus resources elsewhere at the time, probably for the better, as mobile knowledge was still gelling.
  • Had to focus resources elsewhere at the time, probably for the better, as mobile knowledge was still gelling.
  • This is the “villiain pops out at the end of the movie” slide.Photo from Chris Johnson Photography, his site is now a parked domain unfortunately. The photo is from Orlando, a dump of mobile phones. We may be dumping computers, too, but the web browser isn’t going anywhere.http://googlecode.blogspot.com/2011/05/gqueues-mobile-case-for-html5-web-app.html
  • This is the “villiain pops out at the end of the movie” slide.Photo from Chris Johnson Photography, his site is now a parked domain unfortunately. The photo is from Orlando.http://googlecode.blogspot.com/2011/05/gqueues-mobile-case-for-html5-web-app.htmlhttp://37signals.com/svn/posts/2603-heres-what-weve-learned-about-doing-ui-for-mobile-web-apps-with-webkitRecent (5/10) articles on a conversion: http://www.metaltoad.com/blog/how-we-made-metal-toad-site-more-mobile-friendly-media-queries and http://trentwalton.com/2011/05/10/fit-to-scale/
  • 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 />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×