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