Your SlideShare is downloading. ×
On your mark, get set, mobile
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

On your mark, get set, mobile


Published on

Published in: Technology, Business
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. ON YOUR MARK, GET SET, MOBILE photo credit: likeyourhandle on Challenges and opportunities in mobile site delivery in higher and secondary educationMonday, October 24, 2011
  • 2. After the presentation Download this presentation: The backchannel: #heweb11 #tnt8 Talk to us: Doug Gapinski Tiffany Broadbent @thedougco @tb623Monday, October 24, 2011
  • 3. College of William & Mary mobile site (built internally)Monday, October 24, 2011
  • 4. m.uic.eduMonday, 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 opportunityMonday, October 24, 2011
  • 6. THE MOBILE OPPORTUNITY photo credit: Eric Laffourge on twitterMonday, 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: feb-2011Monday, October 24, 2011
  • 9. ~9% of institutions of higher ed have mobile ~91% don’t higher ed don’t have mobile source: dmolsen.comMonday, October 24, 2011
  • 10. Mobile includes things you’re already good at: Strategy Design Content TechnologyMonday, October 24, 2011
  • 11. What has growth looked like for 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.eduMonday, October 24, 2011
  • 12. Platform statistics for 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.eduMonday, 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 Mobile device visits to 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 photo credit: THE CONTENT CHALLENGEMonday, 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.orgMonday, October 24, 2011
  • 16. APPS vs. SITESMonday, 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 downloadMonday, 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,750Monday, October 24, 2011
  • 20. Keep it simple: College of William & Mary’s content strategyMonday, October 24, 2011
  • 21. Timely information via RSS News RSS Athletics RSS & Alumni news RSS @TribeAthletics m.wm.eduMonday, October 24, 2011
  • 22. William & Mary branding content via RSS Flickr RSS Ideation stories RSS Student Blogs RSS m.wm.eduMonday, October 24, 2011
  • 23. Social media via RSS and links YouTube RSS Twitter RSS Foursquare mobile m.wm.eduMonday, October 24, 2011
  • 24. Utility basicsMaps via Basic Facts & Campus Full websiteGoogle Links directory search search m.wm.eduMonday, October 24, 2011
  • 25. Responsive design: the simplest content is to keep it the same luc.eduMonday, 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 audiencesMonday, 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.eduMonday, October 24, 2011
  • 29. THE DESIGN OPPORTUNITY ahhyeah on 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.orgMonday, 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.orgMonday, October 24, 2011
  • 32. How College of William & Mary approached designMonday, October 24, 2011
  • 33. How College of William & Mary approached designMonday, October 24, 2011
  • 34. Design opportunity: integrate with the main siteMonday, October 24, 2011
  • 35. Design opportunity: big type works for mobile— and it happens to be in vogue on the internet m.oregonstate.eduMonday, 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) zeldman.comMonday, October 24, 2011
  • 38. THE CODING CHALLENGEMonday, 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 AndroidMonday, October 24, 2011
  • 41. Coding resource: MIT open source web framework, October 24, 2011
  • 42. Coding resource: Mobile OSP mobilewebosp.pbworks.comMonday, October 24, 2011
  • 43. Recommended blog dmolsen.comMonday, October 24, 2011
  • 44. THE MEASUREMENT OPPORTUNITYMonday, 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 enhancementsMonday, 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 YOUMonday, October 24, 2011
  • 50. Thanks Download this presentation: The backchannel: #heweb11 #tnt8 Talk to us: Doug Gapinski Tiffany Broadbent @thedougco @tb623Monday, October 24, 2011