Download to read offline
Uploaded byLee Roberson
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steering Committee
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.
More Related Content
Similar to Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steering Committee
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steering Committee
- 1. Here today, stillhere tomorrow – mobile strategy and developmentsA presentation to theWeb Steering CommitteeMay 11, 2011
- 2. GrowthHow are devicesbeing used?
- 3. Growth“In 2009, anitem sold every 2 seconds via eBay mobile applications worldwide” -- $600M total mobile transactions347% increase in mobile browser users Jan 201040% of tweets sent via mobile16% of new users start on mobileWhat are the top two Twitter mobile clients?
- 4. Growth347% increase inmobile browser users Jan 201040% of tweets sent via mobile16% of new users start on mobileWhat are the top two Twitter mobile clients?WebText Messaging
- 5. Native “vs” WebWhoinstalls 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 CasesYou’re avisitor in Durham, NC for a campus event at Duke, but you forgot where or when exactly it is.
- 7. Use CasesYou’re avisitor in Durham, NC for a campus event at Duke, but you forgot where or when exactly it is.DO YOUOR/
- 8. Use CasesOther 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 CasesTo theApp Store, Android Market, BlackBerry App World, HP App Catalog…!Show of hands?
- 10. Use CasesEverybody dig!©State of California Department of Conservation
- 11.
- 12. Times REALLY change1280×8001024× 7681024 × 7681024x600
- 15.
- 16.
- 17.
- 18.
- 19. Why “Native”?You can’tfind money with it
- 21.
- 22. Why “Native”?Handset ManufacturerMarket Share – World – April 29, 2011Source: http://www.appleinsider.com/articles/11/04/29/115_growth_propels_apple_to_5_share_of_global_phone_shipments.htmlDoes your work have global reach? Is Apple/5% market share a priority target?
- 23. Why “Native”?Testing.The truestway of testing a native application is to have the devices in your hand.
- 24. Why “Native”?Testing.For SOMEplatforms, you need more than just the target device.iOS developer tools only work on Mac OS.
- 25.
- 26. Why “Native”?This pielooks much more tastySource: http://developer.android.com/resources/dashboard/platform-versions.html
- 27.
- 28. Why “Mobile Web”?Goingback 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.
- 30. Approaches to MobileWebImplementDeployAdvertiseOne 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 MobileWebImplementDeployAdvertiseAnother 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 MobileWebImplementDeployAdvertiseMedia Queries! A feature of CSS.http://mediaqueri.es/@media screen and (max-device-width: 480px) { h1 { … }}
- 33. Approaches to MobileWebImplementDeployAdvertiseMedia Queries!This is the same page you view on your desktop
- 34. Approaches to MobileWebImplementDeployAdvertiseThis is the same page you view on your desktop
- 35. Approaches to MobileWebImplementDeployAdvertiseAdvantage: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 MobileWebImplementDeployAdvertiseAreas where “native” (maybe) has an edge on webCommerceOS IntegrationSpeed
- 37. Approaches to MobileWebImplementDeployAdvertiseCommerceForget it. Uses the same model as the web – advertising.
- 38. Approaches to MobileWebImplementDeployAdvertiseSpeedlocalStorage, webCache, WebGL (graphics chip powered visuals in-browser)…Way too much to cover today.http://diveintohtml5.org/
- 39. Approaches to MobileWebImplementDeployAdvertiseOS IntegrationPhone 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 applicationE-mail: Yes.
- 40. Approaches to MobileWebImplementDeployAdvertise
- 41. Approaches to MobileWebImplementDeployAdvertiseHow 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 MobileWebImplementDeployAdvertise“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.
- 44. HybridsHybridsPhoneGap is asuite, 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 NorthwesternNorthwestern Mobile,a partnership with Blackboard.Available on Android, BlackBerry, and iOSNo two versions have the same features and modulesThe Transit module, a bus tracking system, is a web application at http://maps.northwestern.edu/mobile/shuttles/
- 46. At NorthwesternNorthwestern MobileWebBegan October 2009Several abortive attempts
- 47. At NorthwesternStudent EnterpriseSystems/CAESAR ProjectBring courses to the web, outside of PeopleSoftComes with a mobile site, seen at left
- 48. At NorthwesternPlanIt PurpleWebsiteMedia Queries! Thanks to Jacob.Coming Soon
- 49.
- 50. Summary“Cheat Sheet” ofterms to stay up to date on: Media Queries Responsive Design HTML5Webkit DevelopmentPeople (their blogs and twitter): Jeremy Keith Ethan Marcotte Peter-Paul Koch (Quirksmode)Andy Clarke (320 & up, also animatable)Thank You
Editor's Notes
- #2 aka “you can’t ignore small screen devices”
- #3 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 & jetpack of the 2000s?! =)Most of the world experiences the web via mobile devices (handset phones)
- #4 $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.
- #5 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.
- #8 Hint: the right answer doesn’t require you to remember your iTunes password.
- #9 The fact of the matter is, some people, even if they knew you had an app, just wouldn’t want it installed anyway.
- #10 The question is, where are users most likely to discover your content?
- #11 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.”
- #12 Also, times change.
- #13 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.
- #14 Point is, can'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!
- #15 The web is resilient! (circa 2000)
- #16 The web is resilient! (circa 2005)
- #17 The web is resilient! (circa 2005)How can I use the information trapped in native apps built for PalmOS today?
- #18 This is Signal Hill today. It’s been totally built over.
- #19 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.
- #22 I’m not sure what dialect of Java BB or Android utilize, but there is undoubtedly a lot of API to understand.
- #23 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
- #24 I’m not sure what dialect of Java BB or Android utilize, but there is undoubtedly a lot of API to understand.
- #25 I’m not sure what dialect of Jav BlackBerry or Android utilize, but there is undoubtedly a lot of API to understand.
- #27 90.4% of Android users are on the latest two OS releases.
- #28 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?
- #30 To the web!(she only uses IE because she doesn’t know any better)
- #33 You have to write new CSS anyway – just write it on top of what’s there already.
- #34 You have to write new CSS anyway – just write it on top of what’s there already.
- #35 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”
- #36 Drawbacks:
- #37 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.
- #39 The good news is, you can re-use this knowledge in your web sites!
- #40 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
- #41 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
- #42 The good news is, you can re-use this knowledge in your web sites!
- #43 The good news is, you can re-use this knowledge in your web sites!
- #44 It’s completely impossible to find a real SafeRide photo online.
- #45 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.
- #46 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…
- #47 Had to focus resources elsewhere at the time, probably for the better, as mobile knowledge was still gelling.
- #48 Had to focus resources elsewhere at the time, probably for the better, as mobile knowledge was still gelling.
- #49 Had to focus resources elsewhere at the time, probably for the better, as mobile knowledge was still gelling.
- #50 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
- #51 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/