mobile web for libraries
TRANSCRIPT
![Page 1: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/1.jpg)
Introduction to
Building for theMobile Web
![Page 2: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/2.jpg)
* Content
* Design
* Delivery Method
- Web-Based Mobile Interface
+ CSS
+ Website
- Proprietary App
Agenda
![Page 3: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/3.jpg)
• Mike Teets (OCLC VP), mobile services are
“critical to the long-term existence of libraries and librarianship” (Hadro, 2010)
Libraries Need to Be Mobile
![Page 4: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/4.jpg)
Content:What will your mobile
site include?
![Page 5: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/5.jpg)
• 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 congestionKrishnan 2011
General Trends: Mobile and Libraries
![Page 6: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/6.jpg)
What is accessed via mobile devices?
![Page 7: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/7.jpg)
Design:What will your mobile
interface look like?
![Page 8: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/8.jpg)
Navigation
![Page 9: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/9.jpg)
Navigation
![Page 10: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/10.jpg)
Navigation
![Page 11: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/11.jpg)
Branding
![Page 12: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/12.jpg)
Branding - Logo
![Page 13: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/13.jpg)
Branding - Colors & Logo
![Page 14: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/14.jpg)
Delivery:How will you deliver
content to users?
![Page 15: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/15.jpg)
Mobile Website v. App
![Page 16: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/16.jpg)
Mobile Website v. App
![Page 17: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/17.jpg)
Mobile Website
![Page 18: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/18.jpg)
Mobile App
![Page 19: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/19.jpg)
Mobile Website versus App
Website App
• Mobile users re-directed
in the browser
• Built with web-markup
• Low-maintenance
• User downloads from
app store
• Built with programming
languages
• Specialized
functionality
![Page 20: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/20.jpg)
How to decide what mobile strategy your library will support?
![Page 21: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/21.jpg)
Considerations
• Resources
• Needs of Community
• Web Environment
![Page 22: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/22.jpg)
Web-Based
Options
![Page 23: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/23.jpg)
Stylesheet or
Mobile Website
Web-Based
![Page 24: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/24.jpg)
Stylesheet Applies appropriate
style rules
for mobile users.
Web-Based: Stylesheet
![Page 25: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/25.jpg)
Web-Based: Stylesheet
CSS3
Media Queries
![Page 26: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/26.jpg)
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" />
![Page 27: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/27.jpg)
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;}}
![Page 28: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/28.jpg)
Website
Re-directs mobile users
to a scaled-down version
of website.
Web-Based: Website
![Page 29: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/29.jpg)
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>
![Page 30: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/30.jpg)
Web-Based: Testing
![Page 31: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/31.jpg)
Web-Based: Testing
![Page 32: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/32.jpg)
Web-Based: Testing
![Page 33: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/33.jpg)
AppUsers download
proprietary app with
specialized functionality.
Proprietary App
![Page 34: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/34.jpg)
Proprietary App
Buyvs.
Build
![Page 35: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/35.jpg)
Proprietary App: Buy – Vendors
![Page 36: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/36.jpg)
Proprietary App: Buy – Vendors
![Page 37: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/37.jpg)
Proprietary App: Build – Code
![Page 38: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/38.jpg)
Proprietary App: Build – Code
![Page 39: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/39.jpg)
Simmons College: Making the Mobile
Catalog Work
![Page 40: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/40.jpg)
![Page 41: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/41.jpg)
![Page 42: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/42.jpg)
![Page 43: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/43.jpg)
43
![Page 44: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/44.jpg)
![Page 45: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/45.jpg)
![Page 46: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/46.jpg)
Re-Design,
Re-Think,
Re-Test
![Page 47: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/47.jpg)
47
![Page 48: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/48.jpg)
![Page 49: Mobile Web for Libraries](https://reader033.vdocuments.mx/reader033/viewer/2022060204/55a05f501a28ab412e8b4678/html5/thumbnails/49.jpg)
1) Decide on Content
2) Find Design Inspiration
3) Understand Delivery Methods
- Web-Based Mobile Interface
+ CSS
+ Website
- Proprietary App
Review