The document discusses the challenges and opportunities of mobile sites for higher education institutions. It covers the growing mobile opportunity as smartphone usage increases. It addresses the content challenge of optimizing information for smaller screens. It also covers the design opportunity of adapting best practices for mobile. Coding mobile sites well poses a technical challenge but opportunities for optimization. Tracking mobile metrics allows measuring use and adjusting mobile strategies.

1. ON YOUR MARK,
GET SET,
MOBILE
photo credit: likeyourhandle on flickr.com
Challenges and opportunities in mobile site
delivery in higher and secondary education
Monday, October 24, 2011

2. After the presentation
Download this presentation:
clients.mstoner.com/highedweb11/doug
The backchannel:
#heweb11 #tnt8
Talk to us:
Doug Gapinski Tiffany Broadbent
doug.gapinski@mstoner.com tlbroa@wm.edu
@thedougco @tb623
Monday, October 24, 2011

3. College of William & Mary mobile site
(built internally)
Monday, October 24, 2011

4. m.trincoll.edu m.uic.edu
Monday, October 24, 2011

5. Challenges and Opportunities
I. The mobile opportunity
II. The content challenge
III. The design opportunity
IV. The coding challenge
V. The measurement opportunity
Monday, October 24, 2011

6. THE MOBILE
OPPORTUNITY
photo credit: Eric Laffourge on twitter
Monday, October 24, 2011

7. Mobile technology is
helping people
find what they need,
wherever they are,
when they need it.
Monday, October 24, 2011

8. Sale of smartphones
and tablets has eclipsed
the sale of desktop
computers in Q4 2010
source: http://www.slideshare.net/kleinerperkins/kpcb-top-10-mobile-trends-
feb-2011
Monday, October 24, 2011

9. ~9% of institutions
of higher ed have mobile
~91% don’t higher
ed don’t have mobile
source: dmolsen.com
Monday, October 24, 2011

10. Mobile includes
things you’re already
good at:
Strategy
Design
Content
Technology
Monday, October 24, 2011

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

12. Platform statistics for 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
Monday, October 24, 2011

13. How does that compare to main site traffic?
Main site traffic
August 2010 to
mid-October 2011
• 8,175,000+ visits
• 2,500,000+ unique visitors
wm.edu
Mobile device visits
to www.wm.edu
Mobile site is the 2nd largest • 9/2009 - <0.1% of total traffic
traffic source to the main • 9/2010 - 2%
site (after Google) from • 9/2011 - 5%
mobile devices.
Monday, October 24, 2011

14. mike rohde on flickr.com
photo credit:
THE CONTENT
CHALLENGE
Monday, October 24, 2011

15. 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
Monday, October 24, 2011

16. APPS vs. SITES
Monday, October 24, 2011

17. 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 visits download
Monday, October 24, 2011

18. DRESS THE
GRIFFIN APP
“Pants problem solved.”
Monday, October 24, 2011

19. As of October 2011: iOS downloads: 5,000 Android downloads: 2,750
Monday, October 24, 2011

20. Keep it simple: College of William & Mary’s content strategy
Monday, October 24, 2011

21. Timely information via RSS
News RSS Athletics RSS & Alumni news RSS
@TribeAthletics
m.wm.edu
Monday, October 24, 2011

22. William & Mary branding content via RSS
Flickr RSS Ideation stories RSS Student Blogs RSS
m.wm.edu
Monday, October 24, 2011

23. Social media via RSS and links
YouTube RSS Twitter RSS Foursquare mobile
m.wm.edu
Monday, October 24, 2011

24. Utility basics
Maps via Basic Facts & Campus Full website
Google Links directory search
search
m.wm.edu
Monday, October 24, 2011

25. Responsive design: the simplest content is to keep it the same
nd.edu luc.edu
Monday, October 24, 2011

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

27. 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.
Monday, October 24, 2011

28. Pulling back from the maze
A vast majority It’s like stripping
of this content the behemoth
works for both of a main university
prospective students site down to the
and for current most useful information
audiences. and utility.
m.trincoll.edu
Monday, October 24, 2011

29. THE DESIGN
OPPORTUNITY
ahhyeah on flickr.com
photo credit:
Monday, October 24, 2011

30. 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 Descriptive links
and CSS. to be compliant. begin or end every
page.
It’s just smaller. Use an HTML
What you know color–checking site People will look at
about html applies, to ensure your the top or bottom;
but it needs to be designs are and the user needs
adjusted for size. compliant. to understand what
they are getting.
source: w3.org
Monday, October 24, 2011

31. What to avoid: there are some things
that simply don’t work in mobile design.
Avoid very small Avoid large Be ready to serve
clickable areas. images. a text-only mode.
Keep anything Counting on a Avoid image-centric
clickable above mobile browser to pages.
30–40 pixels in size size images down
because people use means the visitor
their fingers as the will be waiting.
interface.
source: w3.org
Monday, October 24, 2011

32. How College of William & Mary approached design
Monday, October 24, 2011

33. How College of William & Mary approached design
Monday, October 24, 2011

34. Design opportunity: integrate with the main site
Monday, October 24, 2011

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

36. 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.
Monday, October 24, 2011

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

38. THE CODING
CHALLENGE
Monday, October 24, 2011

39. 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.
Standards-based Keep it simple Optimization
code
Eliminate any line Utilize tools like
Follow standards- of code that isn’t YSlow (from Yahoo)
based coding absolutely or Page Speed to
practices. necessary. determine where to
improve code.
Monday, October 24, 2011

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

41. Coding resource: MIT open source web framework
sourceforge.net/projects/mitmobileweb/
Monday, October 24, 2011

42. Coding resource: Mobile OSP
mobilewebosp.pbworks.com
Monday, October 24, 2011

43. Recommended blog
dmolsen.com
Monday, October 24, 2011

44. THE
MEASUREMENT
OPPORTUNITY
Monday, October 24, 2011

45. William & Mary mobile: 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
Monday, October 24, 2011

46. William & Mary mobile: measuring and adjusting
Mobile content vs. main site content
14% Map 32% About/Admission/
6% About Academics/Campus Life
6% Athletics 6% Search
5% Directory 1.5% Athletics
4% News
0.6% Search
(added late Sept. 2011)
Monday, October 24, 2011

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

48. William & Mary mobile: metric mysteries
!
What people
are not visiting:
?
The geography
puzzle:
0.74% Flickr Main site traffic from Williamsburg
0.54% YouTube on-campus = 33% main site: 42%
0.48% Twitter Mobile traffic from Williamsburg
0.16% Facebook on-campus= 11% mobile: 14%
Monday, October 24, 2011

49. Remember that only 9% of higher ed institutions have mobile sites.
That means the future is about
YOU
Monday, October 24, 2011

50. Thanks
Download this presentation:
clients.mstoner.com/highedweb11/doug
The backchannel:
#heweb11 #tnt8
Talk to us:
Doug Gapinski Tiffany Broadbent
doug.gapinski@mstoner.com tlbroa@wm.edu
@thedougco @tb623
Monday, October 24, 2011