• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Handheld librarian iii

Handheld librarian iii



Presentation for Handheld Librarian 3, 2010

Presentation for Handheld Librarian 3, 2010



Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://www.slideshare.net 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • Now that were all convinced all our mobile patron matter, lets talk about how to develop a mobile web site for them. Things to consider when deciding on a mobile strategy are effort and resources, programming skills, features you want to add and existing Web services you want to build on, and the mobile devices you want to support.   You have the choice of several methods to provide mobile content to your patrons.
  • The easiest approach is to simply Do Nothing.    In this example Harvard Libraries has a standards compliant website that most mobile browsers can render.  But I think it would be pretty hard to actually use.     In fact, usability studies have shown fthat that users performing tasks with their phones on sites that were designed for mobile devices had a 64% increase in task success and received higher satisfaction ratings.
  • Another approach is to miniaturize your site.    In this example of a library catalog, the layout has been stripped down  with stylesheets that are hiding large images and navigation blocks. This works OK for simple sites.   The main problem with this approach is that it does not take the mobile user context into consideration.  This one book record was 7 pages long!  
  • The best approach is   to create a mobile specific website even if it means maintaining two sites. One way to do that is to design for the lowest common denominator.   In this example Cal Poly  has optimized for low def phones, by having a simple layout. While this may not look as great it is still usable on a smartphone.
  • A more common approach is to design for SmartPhones and in particular iPhones.  In this example NYPL has a beta mobile website that has been optimized for an Iphone but may not look or function so well on a standard web enabled phone.
  • Now this is more like it. In this example  University of Virginia LIbraries  uses a technique called adaptation  to provide an attractive and usable website on a wide range of devices.   
  •   Adaptation, sometimes called multiserving, means delivering content as per each user device's capabilities. I am going to talk about 3 different techniques that can be used together or separately.
  • Media types are an easy way to give users on both high end and low-end mobile devices an optimal experience by linking to device appropriate stylesheets.   In this example you can see how we used media types that target a range of devices.
  • The media types used with mobile devices are the handheld and screen types.   W3C recommend using the handheld media type to link to mobile stylesheets.    The problem with this, as you can see in this table,  is that all mobile browsers do not adhere to this recommendation. Some support handheld some support screen and some will support both.
  • A method that works correctly on a large number of mobile devices is to link to a basic stylesheet for  phones that support the handheld media type and then override those styles for phones that use the screen media type. You can also use media queries for additional styling.
  • Another approach is to use browser detection Using a server-based scripting language (like PHP), it' is easy to detect device types by reading the UserAgent string.Once you know the useragent you can then redirect to a device specific layout.   But It’s consider bad practice to force or limit your mobile users to a specific layout. So any type of redirecting should also provide users with a choice.
  • Browser detection can only tell you so much about the device your users are on.   Feature detection tells you about the mobile devices capabilities which makes redirection more accurat.   NCSU uses an open-source tool called WURFL to provide an optimal experience for many devices.
  • WURFL is an XML configuration file that contains capabilities for hundreds of devices.   Apart from the XML file, a set of APIs are provided for different programming languages, in order to easily perform the feature detection process detailed in this flow chart.
  • There are also a couple iPhone tips that can immediately enhance your mobile web presence. one simple strategy is to have an additional style sheet that’s only used by the iPhone. Another easy element to add is the  viewport meta key  By adding this last element to your header users can add your web application link to their Home screen. The iPhone will automatically add the glossy effect and rounded corners to your icon.
  • Now there's no use in doing all this work if your patron can't find your mobile site. You will want to alias your site to the common mobile variations of your domain so users guessing your mobile URL will be able to find it. And nothing is more frustrating to a mobile user then finding out too late that you have a mobile site.   Promote and link to iit on your main site, automatically  redirect mobile users to your mobile site, practice good SEO, and leak the service to your local news in hope that it will get picked up.
  • Hopefully we have motivated you to think about all your mobile patrons and you have learned some tips on providing a great mobile experience.

Handheld librarian iii Handheld librarian iii Presentation Transcript

  • Developing a Mobile Library Site for Your Patron   Handheld Librarian III, July 28, 2010 Previously Presented at Computers in Libraries, April 14, 2010 Laurie M. Bridges Business and Economics Librarian Oregon State University Libraries Kimberly Griggs Programmer Analyst Oregon 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 Members
    • Developed In-House Site
    • Authored 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 Team http://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)
    • Access ibility
    Flickr: wootang01
  • Your Patrons (and Ours) 79% Feature Phones                        75% iPhone 21% Smartphones                            12% Other Smartphones                                                            9%  DoCoMo                                                            4%  Feature Phones
  • Access ibility
    • "Users of mobile devices and people with disabilities experience similar barriers when interacting with web content." W3C Web Accessibility Initiative
  • Consider this... Flickr photo: trailofdead1
  • Mobile Access for All
  • Mobile Web Development
      • Strategy Approaches
        • Do Nothing
        • Miniaturize
        • Mobilize
  • 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!
  • Adaptation Techniques
      • Media Types & Queries
      • Browser Detection
      • Feature Detection
  • Media Types & Queries http://m.library.orst.edu
  • Media Type Support Handheld Screen & Handheld Screen & Queries Screen
  •   <link rel=&quot;stylesheet&quot; href=&quot; handheld.css ”                                                          media=&quot; handheld &quot;/>   <link rel=&quot;stylesheet&quot; href=&quot; screen.css ”                                                         media=&quot; screen &quot;/>   @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
    • Wireless 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=&quot; apple-touch-icon &quot; href=&quot;/images/apple-                                                        touch-icon.png&quot; /> <meta name=&quot; viewport &quot; content=&quot; width = device-                                         width, user-scalable = no &quot; />
  • Deploy & Promote
    • Deploy
      • m.yourdomain
      • mobile.yourdomain
      • yourdomain/mobile
    • Promote
      • Good SEO
      • Link & Redirect
      • News Release  
  • Contact Information Laurie M. Bridges Business and Economics Librarian Oregon State University Libraries [email_address] Kimberly Griggs Programmer Analyst Oregon State University Libraries [email_address]