Post on 02-Jul-2015
description
transcript
Here today, still here tomorrow –mobile strategy and developments
A presentation to the
Web Steering Committee
May 11, 2011
Growth
How are devices being used?
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?
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
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?
Use Cases
You’re a visitor in Durham, NC for a campus event at Duke, but you forgot where or when exactly it is.
Use Cases
You’re a visitor in Durham, NC for a campus event at Duke, but you forgot where or when exactly it is.
OR
DO YOU
/
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
Use Cases
To the App Store, Android Market, BlackBerry App World, HP App Catalog…!
Show of hands?
Use Cases
Everybody dig!
© State of California Department of Conservation
Use Cases
Times Change
Flickr/ferranrodenasFlickr/major_clanger
Times REALLY change
1024x600
1024 × 768
1280×800
1024 × 768
http://www.davis.k12.ut.us/ssjh/Clubs/clubweb/AR/Co
mposerPages/index.htm
http://www.davis.k12.ut.us/ssjh/Clubs/clubweb/AR/ComposerPages/index.htm
Flickr/bigmikelakersSignal Hill, 2008
Why “Native”?
Commerce
Speed
OS Integration
Why “Native”?
You can’t find money with it
Why “Native”?
Why “Native”?
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?
Handset Manufacturer Market Share – World – April 29, 2011
Why “Native”?
Testing.
The truest way of testing a native application is to have the devices in your hand.
Why “Native”?
Testing.
For SOME platforms, you need more than just the target device.
iOS developer tools only work on Mac OS.
Why “Native”?
Source:
http://us.blackberry.com/developers/choosingt
argetos.jsp
Why “Native”?
Source: http://developer.android.com/resources/dashboard/platform-versions.html
This pie looks much more tasty
Chasing Platforms
Facebook:
http://iphone.facebook.com/
http://x.facebook.com/ (?)
http://touch.facebook.com/
http://m.facebook.com/
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.
Why “Mobile Web”?
Approaches to Mobile Web
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.
ImplementDeploy
Advertise
Approaches to Mobile Web
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.
ImplementDeploy
Advertise
Approaches to Mobile Web
Media Queries! A feature of CSS.
http://mediaqueri.es/
@media screen and (max-device-width: 480px) {
h1 { … }
}
ImplementDeploy
Advertise
Approaches to Mobile Web
Media Queries!
This is the same page you view on your desktop
ImplementDeploy
Advertise
Approaches to Mobile Web
This is the same page you view on your desktop
ImplementDeploy
Advertise
Approaches to Mobile Web
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)
ImplementDeploy
Advertise
Commerce
Speed
OS Integration
Approaches to Mobile Web
ImplementDeploy
Advertise
Areas where “native” (maybe) has
an edge on web
Commerce
Forget it. Uses the same model as the web – advertising.
Approaches to Mobile Web
ImplementDeploy
Advertise
Speed
localStorage, webCache, WebGL (graphics chip powered visuals in-
browser)…
http://diveintohtml5.org/
Way too much to cover today.
Approaches to Mobile Web
ImplementDeploy
Advertise
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.
OS Integration
Approaches to Mobile Web
ImplementDeploy
Advertise
Approaches to Mobile Web
ImplementDeploy
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.
Approaches to Mobile Web
ImplementDeploy
Advertise
“To auto-detect, or not to auto-detect, that is the question”
Approaches to Mobile Web
ImplementDeploy
Advertise
“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?
Hybrids
Hybrids
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.
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/m
obile/shuttles/
At Northwestern
Northwestern Mobile Web
Began October 2009
Several abortive attempts
At Northwestern
Student Enterprise Systems/CAESAR Project
Bring courses to the web, outside of PeopleSoft
Comes with a mobile site, seen at left
At Northwestern
PlanIt Purple Website
Media Queries! Thanks to Jacob.
Coming Soon
Summary
Thank You
Summary
Thank You
“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)