ON YOUR MARK,                           GET SET,                           MOBILE                                         ...
After the presentation            Download this presentation:            clients.mstoner.com/highedweb11/doug            T...
College of William & Mary mobile site                                      (built internally)Monday, October 24, 2011
m.trincoll.edu   m.uic.eduMonday, October 24, 2011
Challenges and Opportunities                           I. The mobile opportunity                           II. The content...
THE MOBILE            OPPORTUNITY                           photo credit: Eric Laffourge on twitterMonday, October 24, 2011
Mobile technology is                             helping people                           find what they need,             ...
Sale of smartphones                   and tablets has eclipsed                      the sale of desktop                   ...
~9% of institutions                of higher ed have mobile                            ~91% don’t higher                  ...
Mobile includes                           things you’re already                                 good at:                  ...
What has growth looked like for m.wm.edu?                                 m.wm.edu launch in August, 24 2010 to now       ...
Platform statistics for m.wm.edu                                   m.wm.edu launch in August 2010                         ...
How does that compare to main site traffic?                                               Main site traffic               ...
mike rohde on flickr.com                           photo credit:            THE CONTENT             CHALLENGEMonday, Octob...
Best practices for mobile page content according to the WC3           Mobile page content should be...           ...suitab...
APPS                 vs.   SITESMonday, October 24, 2011
Immediacy                                                       Immersion                           of mobile sites       ...
DRESS THE                           GRIFFIN APP                              “Pants problem solved.”Monday, October 24, 2011
As of October 2011:      iOS downloads: 5,000 Android downloads: 2,750Monday, October 24, 2011
Keep it simple: College of William & Mary’s content strategyMonday, October 24, 2011
Timely information via RSS      News RSS              Athletics RSS &   Alumni news RSS                            @TribeA...
William & Mary branding content via RSS      Flickr RSS           Ideation stories RSS   Student Blogs RSS       m.wm.eduM...
Social media via RSS and links       YouTube RSS           Twitter RSS   Foursquare mobile       m.wm.eduMonday, October 2...
Utility basicsMaps via                   Basic Facts &   Campus      Full websiteGoogle                     Links         ...
Responsive design: the simplest content is to keep it the same                   nd.edu                 luc.eduMonday, Oct...
Prospective students’ mobile site: FIT’s content strategy                           masthead >             task navigation...
Multiple publishing targets                                        Opentext CMS     FIT main site galleries               ...
Pulling back from the maze       A vast majority                         It’s like stripping       of this content        ...
THE DESIGN            OPPORTUNITY                           ahhyeah on flickr.com                           photo credit:M...
Good news: many of the same best practices           for web design still apply for mobile web design.           It’s all ...
What to avoid: there are some things           that simply don’t work in mobile design.           Avoid very small       A...
How College of William & Mary approached designMonday, October 24, 2011
How College of William & Mary approached designMonday, October 24, 2011
Design opportunity: integrate with the main siteMonday, October 24, 2011
Design opportunity: big type works for mobile—           and it happens to be in vogue on the internet                   m...
DJ Lein on flickr           Design opportunity: do usability tests                                                    phot...
Design opportunity: don’t depend on web fonts to work correctly,           but understand support is increasing (iOS 5 sup...
THE CODING                      CHALLENGEMonday, October 24, 2011
A few best practices in coding for mobile           Good standards-based coding practices for regular websites are even   ...
Technical tricks            Use the viewport meta tag to control device zoom            Include browser detection to offer...
Coding resource: MIT open source web framework                           sourceforge.net/projects/mitmobileweb/Monday, Oct...
Coding resource: Mobile OSP                   mobilewebosp.pbworks.comMonday, October 24, 2011
Recommended blog              dmolsen.comMonday, October 24, 2011
THE      MEASUREMENT      OPPORTUNITYMonday, October 24, 2011
William & Mary mobile: measuring and adjusting           Tracking the types of mobile devices used to visit our site confi...
William & Mary mobile: measuring and adjusting         Mobile content           vs.     main site content        14% Map  ...
Special event spikes                           Specialized content for school-wide events                           (comme...
William & Mary mobile: metric mysteries          !        What people         are not visiting:                           ...
Remember that only 9% of higher ed institutions have mobile sites.                               That means the future is ...
Thanks            Download this presentation:            clients.mstoner.com/highedweb11/doug            The backchannel: ...
Upcoming SlideShare
Loading in...5
×

On your mark, get set, mobile

4,380

Published on

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,380
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
34
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

On your mark, get set, mobile

  1. 1. ON YOUR MARK, GET SET, MOBILE photo credit: likeyourhandle on flickr.com Challenges and opportunities in mobile site delivery in higher and secondary educationMonday, October 24, 2011
  2. 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 @tb623Monday, October 24, 2011
  3. 3. College of William & Mary mobile site (built internally)Monday, October 24, 2011
  4. 4. m.trincoll.edu m.uic.eduMonday, October 24, 2011
  5. 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. 6. THE MOBILE OPPORTUNITY photo credit: Eric Laffourge on twitterMonday, October 24, 2011
  7. 7. Mobile technology is helping people find what they need, wherever they are, when they need it.Monday, October 24, 2011
  8. 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-2011Monday, October 24, 2011
  9. 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. 10. Mobile includes things you’re already good at: Strategy Design Content TechnologyMonday, October 24, 2011
  11. 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.eduMonday, October 24, 2011
  12. 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.eduMonday, October 24, 2011
  13. 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. 14. mike rohde on flickr.com photo credit: THE CONTENT CHALLENGEMonday, October 24, 2011
  15. 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. 16. APPS vs. SITESMonday, October 24, 2011
  17. 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. 18. DRESS THE GRIFFIN APP “Pants problem solved.”Monday, October 24, 2011
  19. 19. As of October 2011: iOS downloads: 5,000 Android downloads: 2,750Monday, October 24, 2011
  20. 20. Keep it simple: College of William & Mary’s content strategyMonday, October 24, 2011
  21. 21. Timely information via RSS News RSS Athletics RSS & Alumni news RSS @TribeAthletics m.wm.eduMonday, October 24, 2011
  22. 22. William & Mary branding content via RSS Flickr RSS Ideation stories RSS Student Blogs RSS m.wm.eduMonday, October 24, 2011
  23. 23. Social media via RSS and links YouTube RSS Twitter RSS Foursquare mobile m.wm.eduMonday, October 24, 2011
  24. 24. Utility basicsMaps via Basic Facts & Campus Full websiteGoogle Links directory search search m.wm.eduMonday, October 24, 2011
  25. 25. Responsive design: the simplest content is to keep it the same nd.edu luc.eduMonday, October 24, 2011
  26. 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. 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. 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. 29. THE DESIGN OPPORTUNITY ahhyeah on flickr.com photo credit:Monday, October 24, 2011
  30. 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. 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. 32. How College of William & Mary approached designMonday, October 24, 2011
  33. 33. How College of William & Mary approached designMonday, October 24, 2011
  34. 34. Design opportunity: integrate with the main siteMonday, October 24, 2011
  35. 35. Design opportunity: big type works for mobile— and it happens to be in vogue on the internet m.usc.edu m.oregonstate.eduMonday, October 24, 2011
  36. 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. 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.comMonday, October 24, 2011
  38. 38. THE CODING CHALLENGEMonday, October 24, 2011
  39. 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. 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. 41. Coding resource: MIT open source web framework sourceforge.net/projects/mitmobileweb/Monday, October 24, 2011
  42. 42. Coding resource: Mobile OSP mobilewebosp.pbworks.comMonday, October 24, 2011
  43. 43. Recommended blog dmolsen.comMonday, October 24, 2011
  44. 44. THE MEASUREMENT OPPORTUNITYMonday, October 24, 2011
  45. 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. 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. 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. 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. 49. Remember that only 9% of higher ed institutions have mobile sites. That means the future is about YOUMonday, October 24, 2011
  50. 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 @tb623Monday, October 24, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×