This document discusses building a mobile web presence for libraries. It covers three main topics: content, design, and delivery method. For content, it recommends including contact info, hours, directions, the catalog, news, and links to resources. For design, it discusses navigation and branding. For delivery, it compares a mobile-optimized website using CSS or redirects versus a native app. It suggests considering resources, community needs, and the existing web environment to decide the best strategy. The document provides examples of implementing responsive design with media queries and redirects for a mobile-friendly website.

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

22. Web-Based
Options

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>

30. Web-Based: Testing

31. Web-Based: Testing

32. Web-Based: Testing

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