Developing a Mobile Library Site for Your Patron 

Handheld Librarian III, July 28, 2010Previously Presented at Computers in Libraries, April 14, 2010

Laurie M. BridgesBusiness and Economics LibrarianOregon State University Libraries

Kimberly GriggsProgrammer AnalystOregon State University Libraries

Coming Up

• Who Are We? OSU Mobile Lib Team • The Mobile Patron• Smart Phones vs Feature Phones• Accessibility  • Mobile Web Strategies • Adaptation Techniques• iPhone Tips

Three MembersDeveloped In-House SiteAuthored Two Articles      library/mobile: Tips on Designing and Developing Mobile Web             Sites, Code4Lib Journal, Nov. '09    Making the Case for a Fully Mobile Library Website: From Floor          Maps to the Catalog, Reference Services Review, 2010

OSU Mobile Lib Teamhttp://m.library.orst.edu/

Worldwide: Your Patron

• Worldwide penetration rate: 61% (ITU, 2009)• 1.3 billion landlines 4 billion mobile phone subscriptions

(ITU, 2009)

Flickr: Johan Larsson

The U.S: Your Patron

• 42% of Americans say they "cannot live without" their mobile phones (synovate, 2009)

• 51% of undergraduates own a web-enabled phone (ECAR 2009)

• 28% of teens use their phones to browse the web (Harris, 2008)

• In 2009 22 million Americans used their mobile phones to access the Web (comScore, 2009)

Flickr: Lightmash

79% of Mobile Market Everything else (HTC, Nokia, DoCoMo, Samsung, LG,...)  Small Screen, Constrained Browser, Less Powerful Processor, No QWERTY keypad, no input device 

Smartphone vs. Feature Phone

21% of Mobile Market    iPhone, Android Phones, Palm Pre, Blackberry  Larger Screen, Full Browser, Powerful Processor, QWERTY keypad, Touch 

stat source: Nielson, 2010. Flickr photos: William Hook, Kanpeki Yume

Why Feature Phones Matter

Your Patron (all of them)Accessibility

Flickr: wootang01

Your Patrons (and Ours)

79% Feature Phones                        75% iPhone21% Smartphones                            12% Other Smartphones                                                           9%  DoCoMo                                                           4%  Feature Phones

Accessibility

"Users of mobile devices and people with disabilities experience similar barriers when interacting with web content." W3C Web Accessibility Initiative

http://www.mobiletor.com/2008/12/04/an-invision-case-iphone-for-blind/

Consider this...

Flickr photo: trailofdead1

Mobile Access for All

Mobile Web Development

• Strategy Approacheso Do Nothingo Miniaturizeo Mobilize

 

http://buzzer.translink.ca/index.php/2009/10/the-new-commercial-broadway-elevator-is-now-open/

http://lib.harvard.edu/

Do nothing

http://catalog.worthingtonlibraries.org/

Miniaturize

http://www.csupomona.edu/~library/mobile/

Mobilize (LCD)

http://m.nypl.org/

Mobilize (Device Specific)

Mobilize!

 

http://www2.lib.virginia.edu/mobile/

Adaptation Techniques

• Media Types & Queries• Browser Detection• Feature Detection

 

http://blog.redfin.com/sfbay/2008/08/sf_prices_going_down_all_over_town.html

Media Types & Queries

http://m.library.orst.edu

Handheld

Screen & Handheld

Screen & Queries

Screen

Media Type Support

 <link rel="stylesheet" href="handheld.css”                                                         media="handheld"/> <link rel="stylesheet" href="screen.css”                                                        media="screen"/> @media screen { /* rules for computer screens */ } @media handheld { /* rules for handheld devices */ }

Multi-Serve Stylesheets

Browser Detection

$currUA = strtolower($_SERVER['HTTP_USER_AGENT']); if ((strpos($currUA, ’iphone')>0){              header( 'Location: http://mobile.matrix.com/iphone'}                }

User Agents

http://www.lib.ncsu.edu/m/

Feature Detection

WURFLWireless Universal Resource File

http://wurfl.sourceforge.net

Credit: Doug Chestnut

iPhone Tips

<link rel=“stylesheet” href=“iPhone.css” media=“only                       screen and (max-device width:480px)”/>

<link rel="apple-touch-icon" href="/images/apple-                                                       touch-icon.png" />

<meta name="viewport" content="width = device-                                        width, user-scalable = no" />

Deploy & Promote

Deploy• m.yourdomain• mobile.yourdomain• yourdomain/mobile

Promote• Good SEO• Link & Redirect • News Release

 http://www.myreviews101.com/tag/space-elevator-on-green-mars

Contact Information

Laurie M. BridgesBusiness and Economics LibrarianOregon State University LibrariesLaurie.Bridges@oregonstate.edu

Kimberly GriggsProgrammer AnalystOregon State University LibrariesKim.Griggs@oregonstate.edu