Survey of Mobile

342 views

Published on

  • Be the first to comment

  • Be the first to like this

Survey of Mobile

  1. 1. Introduction toBuilding for the Mobile Web
  2. 2. Agenda * Content * Design * Delivery Method - Web-Based Mobile Interface + CSS + Website - Proprietary App
  3. 3. Libraries Need to Be Mobile • Mike Teets (OCLC VP), mobile services are “critical to the long-term existence of libraries and librarianship” (Hadro, 2010)
  4. 4. Content:What will your mobile site include?
  5. 5. General Trends: Mobile and Libraries • Contact information • Opening hours • Directions to the library • Catalog/OPAC • Library news • Loan information and renewals • Links to mobile enabled databases • Ability to check computer availability • Booking discussion/meeting rooms • Links to Mobile search engines • Webcams to check congestion Krishnan 2011
  6. 6. What is accessed via mobile devices?
  7. 7. Design:What will your mobile interface look like?
  8. 8. Navigation
  9. 9. Navigation
  10. 10. Navigation
  11. 11. Branding
  12. 12. Branding - Logo
  13. 13. Branding - Colors & Logo
  14. 14. Delivery:How will you deliver content to users?
  15. 15. Mobile Website v. App
  16. 16. Mobile Website v. App
  17. 17. Mobile Website
  18. 18. Mobile App
  19. 19. Mobile Website versus AppWebsite App• Mobile users re-directed • User downloads from app store in the browser • Built with programming• Built with web-markup languages• Low-maintenance • Specialized functionality
  20. 20. How to decide whatmobile strategy your library will support?
  21. 21. Considerations• Resources• Needs of Community• Web Environment
  22. 22. Web-Based Options
  23. 23. Web-Based Stylesheet or Mobile Website
  24. 24. Web-Based: Stylesheet Stylesheet Applies appropriate style rules for mobile users.
  25. 25. Web-Based: Stylesheet CSS3 Media Queries
  26. 26. Web-Based: Stylesheet – Media Queries In HTML<link rel="stylesheet" type="text/css”media=“only screen and (max-width: 500px)”href=“http://www.mywebsite.com/css/mobile.css" /><link rel="stylesheet" type="text/css”media=“only screen and (max-device-width: 500px)”href=“http://www.mywebsite.com/css/mobile.css" />
  27. 27. Web-Based: Stylesheet – Media Queries In CSSbody{background:blue;}@media only screen and (max-width: 480px), only screenand (max-device-width:480px){body{background:red;}}
  28. 28. Web-Based: Website Website Re-directs mobile usersto a scaled-down version of website.
  29. 29. Web-Based: Website – Re-Direct In HTML Head<script type="text/javascript">var UA = navigator.userAgent;var mobile =/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm(os)?|phone|p(ixi|re)/|plucker|pocket|psp|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(UA);if (mobile) {document.location = “mobile.html”;else {document.location = “index.html”;}</script>
  30. 30. Web-Based: Testing
  31. 31. Web-Based: Testing
  32. 32. Web-Based: Testing
  33. 33. Proprietary App App Users download proprietary app withspecialized functionality.
  34. 34. Proprietary App Buy vs. Build
  35. 35. Proprietary App: Buy – Vendors
  36. 36. Proprietary App: Buy – Vendors
  37. 37. Proprietary App: Build – Code
  38. 38. Proprietary App: Build – Code
  39. 39. Simmons College:Making the Mobile Catalog Work
  40. 40. 43
  41. 41. Re-Design, Re-Think, Re-Test
  42. 42. 47
  43. 43. Review1) Decide on Content2) Find Design Inspiration3) Understand Delivery Methods - Web-Based Mobile Interface + CSS + Website - Proprietary App

×