UPWARDLY
MOBILE
photo credit: likeyourhandle on flickr.com
Challenges and opportunities in mobile site delivery
UPWARDLY
MOBILE
photo credit: likeyourhandle on flickr.com
Challenges and opportunities in mobile site delivery
Susan T. Evans Tiffany Broadbent Doug Gapinski
Director of Creative Services Web Programmer Creative Director
College of William & Mary College of William & Mary mStoner
After the presentation
Read and comment on download the presentation
via the blog post / twitter mashup:
mstonerblog.com
Talk to us:
Doug Gapinski Susan Evans & Tiffany Broadbent
doug.gapinski@mstoner.com creative@wm.edu
@thedougco @wm_creative
College of William & Mary mobile site Mobile sites such as FIT
(built internally) (built by mStoner)
Challenges and Opportunities
I. The mobile opportunity
II. The content challenge
III. The design opportunity
IV. The coding challenge
V. The measurement opportunity
THE MOBILE
OPPORTUNITY
photo credit: Eric Laffourge on twitter
What are people doing on mobile devices?
April 2009 July 2010
Taking pictures 66% 76%
Text messaging 65% 72%
Accessing websites 25% 38%
Playing games 34% 27%
Emailing 25% 34%
Recording videos 19% 34%
Playing music 21% 33%
Instant messaging 20% 30%
source: pewinternet.org
Where are the highest growth statistics in mobile internet use?
April 2009 May 2009 Change
Male 55% 62% +7%
Female 49% 56% +7%
Ages 18–29 73% 84% +11%
source: pewinternet.org
Anecdotal* mobile growth in higher education
~2009 ~2010
Liberal arts colleges not significant 1 to 3%
Universities 1% 3 to 10%
Community colleges 5% up to 20%
*Anecdotal simply means “what we’ve heard.”
What has growth looked like for m.wm.edu?
m.wm.edu launch in August 2010 to present
• 24,246 visits
• 19,516 unique visitors
• ~1 minute average stay on the site
• 2.5 page views on average
• +30% increased growth in visits from
mobile devices
m.wm.edu
Platform statistics for m.wm.edu
m.wm.edu launch in August 2010 to present
• 32% of visits from iPhone
• 15% of visits from iPod
• 27% of visits from Android
• 12% of visits from Blackberry
• 14% split between other platforms
m.wm.edu
How does that compare to main site traffic?
Main site traffic,
August 2010 to present
• 2,553,841 visits
• 806,485 unique visitors
Prior to launch of m.wm.edu
• ~300% increase in visits from
wm.edu
mobile devices over past year
For wm.edu, m.wm.edu traffic is in addition to wm.edu traffic.
wm.edu
For wm.edu, mobile traffic
m.wm.edu
hasn’t replaced main site traffic,
it’s an additional destination
generating traffic.
CHALLENGE
THE CONTENT
photo credit:
mike rohde on flickr.com
Best practices for mobile page content according to the WC3
Mobile page content should be...
...suitable. ...clear. ... an appropriate
length.
Ensure that content Use clear and
is suitable for use in simple language. Limit content to
a mobile context. what the user has
requested.
source: w3.org
APPS vs. SITES
Immediacy Immersion
of mobile sites of mobile apps
•no special download required • more robust interactive possibilities
•best suited for transactional and (games, utilities, etc.)
timely content • files stored on phone
PROS
• probably the first place “casual” • probably better suited for “diehard” users
users will look who will seek it out or take the time to
download
•cannot provide robust • special download needed
interactive experiences • multiple apps required for different
CONS
•bandwidth limited by both phone platforms (iPhone, Android, etc.)
and current network • casual users such as the “new prospective
•unless there is a reason to check student” unlikely to seek it or take time to
back, unlikely to see repeat download
Keep it simple: College of William & Mary’s content strategy
Timely information via RSS
News RSS Athletics RSS Alumni news RSS
m.wm.edu
William & Mary branding content via RSS
Photo RSS Ideation stories RSS Blog content RSS
m.wm.edu
Social media via RSS and links
YouTube RSS Twitter RSS Foursquare mobile
m.wm.edu
Utility basics
Maps via Google Basic Facts Campus people
search
m.wm.edu
Prospective students’ mobile site: FIT’s content strategy
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
Opentext CMS
FIT main site FIT mobile site
Multiple publishing targets allows you to change the navigation on both sites at once.
Multiple publishing targets
Opentext CMS
FIT main site FIT mobile site
Multiple publishing targets allows you to change content on both sites at once.
Multiple publishing targets
Opentext CMS
FIT main site galleries
FIT mobile site galleries
Multiple publishing targets allows you to manage
media like tagged galleries on both sites at once.
Current students, faculty, and admin site: Harvard’s strategy
m.harvard.edu
THE DESIGN
OPPORTUNITY
photo credit:
ahhyeah on flickr.com
Good news: many of the same best practices
for web design still apply for mobile web design.
It’s all still html. Color still needs Generally,
to be compliant. navigation goes
It’s just smaller. at the top.
What you know Use an HTML
about html applies, color–checking site This is even more
but it needs to be to ensure your important than on a
adjusted for size. designs are regular web site due
compliant. to variable widths.
source: w3.org
What to avoid: there are some things
that simply don’t work in mobile design.
Avoid very small Avoid fixed width Avoid plug-ins,
clickable areas. designs. tables, and frames.
Keep anything Your design should These things tend
clickable above be elastic to not to work on
30–40 pixels in size accommodate for many mobile
because people use different screen platforms, or cause
their fingers as the widths. horizontal scrolling.
interface.
source: w3.org
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
DJ Lein on flickr
Design opportunity: do usability tests
photo credit:
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 (new iOs 4.2 and iPad)
blog.typekit.com
zeldman.com
THE CODING
CHALLENGE
A few best practices in coding for mobile
Good standards-based coding practices for regular websites are even
more important for mobile, since your bandwidth is even more limited.
Images Scripting Optimization
• Make images as • Limit the use of • Utilize tools like
small as possible. scripting, the YSlow (from Yahoo)
cleaner and simpler or Page Speed to
• Don't depend on the code is, the determine where to
the browser for faster it will load. improve code.
resizing images.
• Use CSS viewport.
Coding resource: MIT open source web framework
sourceforge.net/projects/mitmobileweb/
Coding resource: Mobile OSP
mobilewebosp.pbworks.com
Recommended blog
dmolsen.com
THE
MEASUREMENT
OPPORTUNITY
William & Mary: measuring and adjusting
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 (e.g., traffic consistently supports
Athletics as the most popular content, so we adjusted the RSS feed
to include News and Tweets from Athletics; they post games and
scores to Twitter)
One measure of success will be increases to time on site
and number of pages viewed.
William & Mary: metric mysteries
!
Saturday spikes:
m.wm.edu gets a traffic spike
?
The geography puzzle:
The mobile traffic is more
every Saturday. geographically decentralized
We presume it’s football than the main site traffic and
season? we’re not sure why.
Thanks!
Read and comment on download the presentation
via the blog post / twitter mashup:
mstonerblog.com
Talk to us:
Doug Gapinski Susan Evans & Tiffany Broadbent
doug.gapinski@mstoner.com creative@wm.edu
@thedougco @wm_creative