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 [email protected]
Kimberly GriggsProgrammer AnalystOregon State University [email protected]