Mobile Web for Libraries
-
Upload
amyhannah84 -
Category
Documents
-
view
176 -
download
0
Transcript of Mobile Web for Libraries
Introduction to
Building for theMobile Web
* Content
* Design
* Delivery Method
- Web-Based Mobile Interface
+ CSS
+ Website
- Proprietary App
Agenda
• Mike Teets (OCLC VP), mobile services are
“critical to the long-term existence of libraries and librarianship” (Hadro, 2010)
Libraries Need to Be Mobile
Content:What will your mobile
site include?
• 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
What is accessed via mobile devices?
Design:What will your mobile
interface look like?
Navigation
Navigation
Navigation
Branding
Branding - Logo
Branding - Colors & Logo
Delivery:How will you deliver
content to users?
Mobile Website v. App
Mobile Website v. App
Mobile Website
Mobile App
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
How to decide what mobile strategy your library will support?
Considerations
• Resources
• Needs of Community
• Web Environment
Web-Based
Options
Stylesheet or
Mobile Website
Web-Based
Stylesheet Applies appropriate
style rules
for mobile users.
Web-Based: Stylesheet
Web-Based: Stylesheet
CSS3
Media Queries
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" />
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;}}
Website
Re-directs mobile users
to a scaled-down version
of website.
Web-Based: Website
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>
Web-Based: Testing
Web-Based: Testing
Web-Based: Testing
AppUsers download
proprietary app with
specialized functionality.
Proprietary App
Proprietary App
Buyvs.
Build
Proprietary App: Buy – Vendors
Proprietary App: Buy – Vendors
Proprietary App: Build – Code
Proprietary App: Build – Code
Simmons College: Making the Mobile
Catalog Work
43
Re-Design,
Re-Think,
Re-Test
47
1) Decide on Content
2) Find Design Inspiration
3) Understand Delivery Methods
- Web-Based Mobile Interface
+ CSS
+ Website
- Proprietary App
Review