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

doug.gapinski@mstoner.com

Download this presentation:

clients.mstoner.com/highedweb11/doug

The backchannel:

Doug Gapinski Tiffany Broadbent

#heweb11

@thedougco

tlbroa@wm.edu

Talk to us:

@tb623

#tnt8

Monday, October 24, 2011

College of William & Mary mobile site(built internally)

Monday, October 24, 2011

m.trincoll.edu m.uic.edu

Monday, October 24, 2011

Challenges and Opportunities

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

Monday, October 24, 2011

THE MOBILE OPPORTUNITY

phot

o cr

edit:

Eric

Laf

four

ge o

n tw

itter

Monday, October 24, 2011

Mobile technology ishelping people

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

Monday, October 24, 2011

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

Monday, October 24, 2011

~9% of institutions of higher ed have mobile

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

source: dmolsen.com

Monday, October 24, 2011

Mobile includes things you’re already

good at:

StrategyDesignContent

Technology

Monday, October 24, 2011

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

Monday, October 24, 2011

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

Monday, October 24, 2011

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.

Monday, October 24, 2011

phot

o cr

edit:

m

ike

rohd

e on

flic

kr.c

om

THE CONTENTCHALLENGE

Monday, October 24, 2011

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...

Monday, October 24, 2011

APPS SITESvs.

Monday, October 24, 2011

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

Monday, October 24, 2011

DRESS THE GRIFFIN APP

“Pants problem solved.”

Monday, October 24, 2011

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

Monday, October 24, 2011

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

Monday, October 24, 2011

Timely information via RSS

News RSS Athletics RSS &@TribeAthletics

Alumni news RSS

m.wm.edu

Monday, October 24, 2011

William & Mary branding content via RSS

Ideation stories RSS Student Blogs RSSFlickr RSS

m.wm.edu

Monday, October 24, 2011

YouTube RSS Twitter RSS Foursquare mobile

Social media via RSS and links

m.wm.edu

Monday, October 24, 2011

Utility basics

m.wm.edu

Maps via Google

Basic Facts & Links

Campus directorysearch

Full website search

Monday, October 24, 2011

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

nd.edu luc.edu

Monday, October 24, 2011

Prospective students’ mobile site: FIT’s content strategy

masthead >

task navigation >

gateways and

announcements

for everyone

prospective

student

information

>

>

secondary

information

for broad

audiences

>

Monday, October 24, 2011

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

Monday, October 24, 2011

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

Monday, October 24, 2011

THE DESIGNOPPORTUNITY

phot

o cr

edit:

ah

hyea

h on

flic

kr.c

om

Monday, October 24, 2011

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.

Monday, October 24, 2011

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.

Monday, October 24, 2011

How College of William & Mary approached design

Monday, October 24, 2011

How College of William & Mary approached design

Monday, October 24, 2011

Design opportunity: integrate with the main site

Monday, October 24, 2011

Design opportunity: big type works for mobile—

and it happens to be in vogue on the internet

m.usc.edu m.oregonstate.edu

Monday, October 24, 2011

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.

Monday, October 24, 2011

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

Monday, October 24, 2011

THE CODINGCHALLENGE

Monday, October 24, 2011

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.

Monday, October 24, 2011

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

Monday, October 24, 2011

sourceforge.net/projects/mitmobileweb/

Coding resource: MIT open source web framework

Monday, October 24, 2011

mobilewebosp.pbworks.com

Coding resource: Mobile OSP

Monday, October 24, 2011

Recommended blog

dmolsen.comMonday, October 24, 2011

THEMEASUREMENTOPPORTUNITY

Monday, October 24, 2011

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

Monday, October 24, 2011

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

Monday, October 24, 2011

Special event spikes

Specialized content for school-wide events

(commencement, orientation, homecoming)

and emergencies (hurricane evacuation).

Most popular content is event schedules.

Monday, October 24, 2011

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

doug.gapinski@mstoner.com

Download this presentation:

clients.mstoner.com/highedweb11/doug

The backchannel:

Doug Gapinski Tiffany Broadbent

#heweb11

@thedougco

tlbroa@wm.edu

Talk to us:

@tb623

#tnt8

Monday, October 24, 2011