On your mark, get set, mobile

phot

o cr

edit:

like

your

hand

le o

n fli

ckr.c

om

Challenges and opportunities in mobile site delivery in higher and secondary education

ON YOUR MARK,GET SET,

MOBILE

Monday, October 24, 2011

After the presentation

[email protected]

Download this presentation:

clients.mstoner.com/highedweb11/doug

The backchannel:

Doug Gapinski Tiffany Broadbent

#heweb11

@thedougco

[email protected]

Talk to us:

@tb623

#tnt8


mailto:[email protected]?subject=hew%2011%20presentation


mailto:[email protected]?subject=Re:%20HEW%2011%20mobile%20presentation


mailto:[email protected]?subject=re:%20hew%2011%20presentation

mailto:[email protected]?subject=re:%20hew%2011%20presentation



College of William & Mary mobile site(built internally)


m.trincoll.edu m.uic.edu


Challenges and Opportunities

I. The mobile opportunityII. The content challengeIII. The design opportunityIV. The coding challengeV. The measurement opportunity


THE MOBILE OPPORTUNITY

phot

o cr

edit:

Eric

Laf

four

ge o

n tw

itter


Mobile technology ishelping people

find what they need,wherever they are,when they need it.


source: http://www.slideshare.net/kleinerperkins/kpcb-top-10-mobile-trends-

feb-2011

Sale of smartphonesand tablets has eclipsed

the sale of desktop computers in Q4 2010


http://www.slideshare.net/kleinerperkins/kpcb-top-10-mobile-trends-feb-2011




~9% of institutions of higher ed have mobile

~91% don’t higher ed don’t have mobile

source: dmolsen.com


Mobile includes things you’re already

good at:

StrategyDesignContent

Technology


What has growth looked like for m.wm.edu?

m.wm.edu launch in August, 24 2010 to now

• 129,094 visits visits

• 106,101 unique visitors

• ~1 minute average stay on the site

• 2.31 page views on average

• September 2011 saw a 79% increase

in mobile traffic over Sept 2010

m.wm.edu


m.wm.edu launch in August 2010

to October 2010

• 37% iPhone (+6% from December 2010)

• 11% iPod (-4%)

• 31% Android (+2%)

• 7% Blackberry (-4%)

• 1% other mobile platforms

• 13% desktop computers

m.wm.edu

Platform statistics for m.wm.edu


How does that compare to main site traffic?

wm.edu

Main site traffic

August 2010 to

mid-October 2011

• 8,175,000+ visits

• 2,500,000+ unique visitors

Mobile device visits

to www.wm.edu

• 9/2009 - <0.1% of total traffic

• 9/2010 - 2%

• 9/2011 - 5%

Mobile site is the 2nd largest

traffic source to the main

site (after Google) from

mobile devices.


phot

o cr

edit:

m

ike

rohd

e on

flic

kr.c

om

THE CONTENTCHALLENGE


source: w3.org

Best practices for mobile page content according to the WC3

...suitable.

Ensure that content

is suitable for use in

a mobile context.

...clear.

Use clear and

simple language.

... an appropriate

length.

Limit content to

what the user has

requested.

Mobile page content should be...


APPS SITESvs.


Immersion of mobile apps

Immediacy of mobile sites

•no special download required

•best suited for transactional and

timely content

• probably the first place “casual”

users will look

• more robust interactive possibilities

(games, utilities, etc.)

• files stored on phone

• probably better suited for “diehard” users

who will seek it out or take the time to

download

•cannot provide robust

interactive experiences

•bandwidth limited by both phone

and current network

•unless there is a reason to check

back, unlikely to see repeat visits

• special download needed

• multiple apps required for different

platforms (iPhone, Android, etc.)

• casual users such as the “new prospective

student” unlikely to seek it or take time to

download

PRO

SC

ON

S


DRESS THE GRIFFIN APP

“Pants problem solved.”


iOS downloads: 5,000 Android downloads: 2,750As of October 2011:


Keep it simple: College of William & Mary’s content strategy


Timely information via RSS

News RSS Athletics RSS &@TribeAthletics

Alumni news RSS

m.wm.edu


William & Mary branding content via RSS

Ideation stories RSS Student Blogs RSSFlickr RSS

m.wm.edu


YouTube RSS Twitter RSS Foursquare mobile

Social media via RSS and links

m.wm.edu


Utility basics

m.wm.edu

Maps via Google

Basic Facts & Links

Campus directorysearch

Full website search


Responsive design: the simplest content is to keep it the same

nd.edu luc.edu


Prospective students’ mobile site: FIT’s content strategy

masthead >

task navigation >

gateways and

announcements

for everyone

prospective

student

information

>

>

secondary

information

for broad

audiences

>


Multiple publishing targets

Multiple publishing targets allows you to manage

media like tagged galleries on both sites at once.

Opentext CMSFIT main site galleries

FIT mobile site galleries


A vast majority

of this content

works for both

prospective students

and for current

audiences.

It’s like stripping

the behemoth

of a main university

site down to the

most useful information

and utility.

Pulling back from the maze

m.trincoll.edu


THE DESIGNOPPORTUNITY

phot

o cr

edit:

ah

hyea

h on

flic

kr.c

om


source: w3.org

It’s all still HTML

and CSS.

It’s just smaller.

What you know

about html applies,

but it needs to be

adjusted for size.

Color still needs

to be compliant.

Use an HTML

color–checking site

to ensure your

designs are

compliant.

Descriptive links

begin or end every

page.

People will look at

the top or bottom;

and the user needs

to understand what

they are getting.

Good news: many of the same best practices

for web design still apply for mobile web design.


source: w3.org

Avoid very small

clickable areas.

Keep anything

clickable above

30–40 pixels in size

because people use

their fingers as the

interface.

Avoid large

images.

Counting on a

mobile browser to

size images down

means the visitor

will be waiting.

Be ready to serve

a text-only mode.

Avoid image-centric

pages.

What to avoid: there are some things

that simply don’t work in mobile design.


How College of William & Mary approached design


How College of William & Mary approached design


Design opportunity: integrate with the main site


Design opportunity: big type works for mobile—

and it happens to be in vogue on the internet

m.usc.edu m.oregonstate.edu


phot

o cr

edit:

D

J Lei

n on

flic

kr

Design opportunity: do usability tests

1) Assign critical tasks

2) Open-ended feedback

3) Comparative feedback

Also: listen to your

audiences post-launch.


Design opportunity: don’t depend on web fonts to work correctly,

but understand support is increasing (iOS 5 supports web fonts)

blog.typekit.com

zeldman.com


THE CODINGCHALLENGE


A few best practices in coding for mobile

Standards-based

code

Follow standards-

based coding

practices.

Keep it simple

Eliminate any line

of code that isn’t

absolutely

necessary.

Optimization

Utilize tools like

YSlow (from Yahoo)

or Page Speed to

determine where to

improve code.

Good standards-based coding practices for regular websites are even

more important for mobile, since your bandwidth is even more limited.


Technical tricks

Use the viewport meta tag to control device zoom

Include browser detection to offer different layouts

HTML5 form input types date, tel, email and url

invoke the appropriate virtual keyboard on many devices

link target tel:1115551234 opens the number in the

phone application on iOS and Android


sourceforge.net/projects/mitmobileweb/

Coding resource: MIT open source web framework


mobilewebosp.pbworks.com

Coding resource: Mobile OSP


Recommended blog

dmolsen.comMonday, October 24, 2011

THEMEASUREMENTOPPORTUNITY


Tracking the types of mobile devices used to visit our site confirm

our decision to develop mobile content for a broad range of devices

(iPhone, iPod, iPad, Android, Blackberry)

Measuring traffic to the various content areas will be used to

prioritize future enhancements

William & Mary mobile: measuring and adjusting


William & Mary mobile: measuring and adjusting

14% Map

6% About

6% Athletics

5% Directory

4% News

0.6% Search

(added late Sept. 2011)

32% About/Admission/

Academics/Campus Life

6% Search

1.5% Athletics

Mobile content vs. main site content


Special event spikes

Specialized content for school-wide events

(commencement, orientation, homecoming)

and emergencies (hurricane evacuation).

Most popular content is event schedules.


What people

are not visiting:

0.74% Flickr

0.54% YouTube

0.48% Twitter

0.16% Facebook

The geography

puzzle:

Main site traffic from

on-campus = 33%

Mobile traffic from

on-campus= 11%

Williamsburg

main site: 42%

Williamsburg

mobile: 14%

William & Mary mobile: metric mysteries

! ?Monday, October 24, 2011

Remember that only 9% of higher ed institutions have mobile sites.

That means the future is about

YOUMonday, October 24, 2011

Thanks

[email protected]

Download this presentation:

clients.mstoner.com/highedweb11/doug

The backchannel:

Doug Gapinski Tiffany Broadbent

#heweb11

@thedougco

[email protected]

Talk to us:

@tb623

#tnt8






mailto:[email protected]?subject=

mailto:[email protected]?subject=

