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

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)