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