Survey of Mobile
- 1. Introduction to Building for the Mobile Web
- 2. Agenda * Content * Design * Delivery Method - Web-Based Mobile Interface + CSS + Website - Proprietary App
- 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. Content: What will your mobile site include?
- 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. What is accessed via mobile devices?
- 7. Design: What will your mobile interface look like?
- 8. Navigation
- 9. Navigation
- 10. Navigation
- 11. Branding
- 12. Branding - Logo
- 13. Branding - Colors & Logo
- 14. Delivery: How will you deliver content to users?
- 15. Mobile Website v. App
- 16. Mobile Website v. App
- 17. Mobile Website
- 18. Mobile App
- 19. Mobile Website versus App Website 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. How to decide what mobile strategy your library will support?
- 21. Considerations • Resources • Needs of Community • Web Environment
- 23. Web-Based Stylesheet or Mobile Website
- 24. Web-Based: Stylesheet Stylesheet Applies appropriate style rules for mobile users.
- 25. Web-Based: Stylesheet CSS3 Media Queries
- 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. Web-Based: Stylesheet – Media Queries In CSS body{ background:blue; } @media only screen and (max-width: 480px), only screen and (max-device-width:480px){ body{ background:red; } }
- 28. Web-Based: Website Website Re-directs mobile users to a scaled-down version of website.
- 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|iemobil e|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|lin k)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(UA); if (mobile) { document.location = “mobile.html”; else { document.location = “index.html”; } </script>
- 33. Proprietary App App Users download proprietary app with specialized functionality.
- 34. Proprietary App Buy vs. Build
- 35. Proprietary App: Buy – Vendors
- 36. Proprietary App: Buy – Vendors
- 37. Proprietary App: Build – Code
- 38. Proprietary App: Build – Code
- 39. Simmons College: Making the Mobile Catalog Work
- 43. 43
- 46. Re-Design, Re-Think, Re-Test
- 47. 47
- 49. Review 1) Decide on Content 2) Find Design Inspiration 3) Understand Delivery Methods - Web-Based Mobile Interface + CSS + Website - Proprietary App