1 / 27

Building Library Mobile Web

Building Library Mobile Web. LITA National Forum 2011 October 2, 2011 St. Louis, MS. Some statistics. Mobile Device Usage in US 44% of Americans had accessed the Internet using a mobile device by May 2011* For age group 18 – 29, the number is 64%*

edward
Download Presentation

Building Library Mobile Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Building Library Mobile Web LITA National Forum 2011 October 2, 2011 St. Louis, MS

  2. Some statistics • Mobile Device Usage in US • 44% of Americans had accessed the Internet using a mobile device by May 2011* • For age group 18 – 29, the number is 64%* • Morgan Stanley analysts predict that the mobile web usage will be bigger than desktop Internet usage by 2015 *Source: Pew Research Center: Pew Internet & American Life Project: “American and Their Cell Phones”. September 2011.

  3. more statistics • Mobile Device Usage in US Colleges • 51.2% own web-enabled mobile phone (2009)* • 62.7% own web-enabled mobile phone (2010) ** • 33.1% use their web-enabled phone to access Internet (2009)* • 48.8% use their web-enabled phone to access Internet (2010)** *EDUCAUSE Center for Applied Research (ECAR): “The ECAR Study of Undergraduate Students and Information Technology, 2009”. October 2009. Survey Respondents = 30,616 http://net.educause.edu/ir/library/pdf/EKF/EKF0906.pdf ** EDUCAUSE Center for Applied Research (ECAR): “The ECAR Study of Undergraduate Students and Information Technology, 2010”. October 2010. Survey Respondents = 36,950 http://net.educause.edu/ir/library/pdf/EKF/EKF1006.pdf

  4. Mobile Access to TCNJ Library Website

  5. Building a Mobile Web Three Approaches • One: Transcoding • Two: Miniaturize • Three: Mobilize

  6. First Approach: Transcoding Automatically done by the service carrier behind the scene. • Stripping any video or multimedia • Shrinking images • Breaking large Web pages into a series of smaller pages that link together. • Google transcoder (also called Mobile Optimizer): http://google.com/gwt/n?u=http://yourdomain.com

  7. Second Approach – Miniaturize • Some Freebies • Wirenode (free with ads): http://www.wirenode.com • Wapple (free) : http://wapple.net/ • CMS Mobile Theme • WordPress Mobile Theme • Drupul Mobile Edition

  8. Third Approach – The Right Approach MOBILIZE • Four Methods • Single Design without Auto-Detection • Single Design with Auto-Detection • Multiple Designs with Auto-Detection • Content Adaptation

  9. Mobile Web Design Guideline • Keep it simple • Your mobile web should serve users as maximum as possible. Only 42% of mobile phones are smartphone. * • That means more than half of mobile phones doesn’t support Javascript and CSS. • Avoid one-page design because it always uses Javascript. • Common characteristics of web-enabled phones • Small Screen • Difficult to scroll and input • Limited resources • Mobile users are always on the go • Some design guidelines: • Each file size not bigger than 25K • Three clicks rule still apply • Do not use <table> if possible • Standards: Use XHTML - MP 1.1 or 1.2 or XHTML Basic 1.0 • You can use CSS but don’t rely on CSS *Source: Pew Research Center: Pew Internet & American Life Project: “Smartphone Adoption and Usage”, July 11, 2011

  10. Content Suggestions • Hours • Contacts • Click to Call • Ask Us – SMS, IM, Tel, Email • Direction to the library • Mobile Catalog (mobile skin for Voyager is out there) • Recommend: by Denise Dunham from University of Rochester and Michael Doran from University of Texas at Arlington. Both are available at El Commons) • Mobile E-Collection: mobile pubmed, etc, • Third Party Hosting – YouTube • Link to full library website

  11. 1. Single Design Without Auto-Detection • This is the most easiest to do: • Some basic HTML knowledge • Access to your library web server

  12. Single Design without Auto-Detection • Step One: Determine Your Content • If you have no idea, take a look at other library’s mobile web. • Usually: Hours, Contacts, Ask Us, FAQ, Directions, News & Events, Mobile OPAC, Mobile E-Collections • Step Two: Write the Code • Use some tools such as Dreamweaver • Or use a text editor

  13. A Prototype

  14. Code: index.html • <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml"> • <head> • <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> • <meta name="HandheldFriendly" content="True" /> • <title>TCNJ Library Mobile Web</title> • </head> • <body> • <div><h1><a href="http://www.tcnj.edu/~library">View Full Web Site</a></h1><hr/><br/> • </div> • <h1>1. <a href="hours.html" title="library hours">Library Hours</a></h1> <br/> • <h1>2. <a href="ask.html" title="ask us">Ask Us</a></h1> <br/> • <h1>3. <a href="faq.html" title="freguent question">FAQs</a></h1> <br/> • <h1>4. <a href="direction.html" title="direction">Directions</a></h1> <br/> • <div><p><h1><strong>5. Click to Call: <a href="tel:123-456-7890">123-456-7890</a></strong></h1></p></div><br/> • <h1>6. <a href="catalog.html" title="catalog">Library Catalog</a></h1> • <br/><br/> • <p>The College of New Jersey Library<br/> • 2000 Pennington Road<br/> • Ewing, NJ 08628</p> • </body> • </html>

  15. Three More Steps • Create a subfolder under document root: for example: /m • Publish or ftp the previous file (index.html ) to the subfolder: /m • Point the browser to it: http://yourlibrary.org/m

  16. 2. Single Design with Auto-Detection • What is auto-detection? One url serves either desktop web or mobile web based on the requesting device (PC? Or Mobile Device?) (http://yourlibrary.org) • Write or borrow a program: any of these php, asp, or jsp, etc (easy to do) • Configure the web server (hard to do)

  17. 2. phpCode for Auto-Detection • <?php $mobile_browser = '0'; if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|android|midp|wap|phone)/i', strtolower($_SERVER['HTTP_USER_AGENT']))){ $mobile_browser++; } if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))){ $mobile_browser++; } $mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4)); $mobile_agents = array( 'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac', 'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno', 'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-', 'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-', 'newt','noki','oper','palm','pana','pant','phil','play','port','prox', 'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar', 'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-', 'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp', 'wapr','webc','winw','winw','xda','xda-'); if(in_array($mobile_ua,$mobile_agents)){ $mobile_browser++; } if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini')>0) { $mobile_browser++; } if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) { $mobile_browser=0; } if($mobile_browser>0){ header('Location: http://yourlibrary.org/m/'); } else { header('Location: http://yourlibrary.org/'); } ?> • From: http://mobiforge.com/developing/story/lightweight-device-detection-php (with modification)

  18. Three More Steps • Save the previous file as index.php • Publish or ftp it to document root • Point your browser to http://yourlibrary.org/index.php

  19. 3. Multiple Designs With Auto-Detection • Very complicated • Step one: Develop a set of mobile device profiles • Step two: create multiple designs, each optimized for a different device profile • Step three: Get the device database (WURFL) • Step four: Write (or acquire) a program that can deliver the right version of your site to the right device • For a good example: http://www.lib.ncsu.edu/

  20. 4. Content Adaptation • Most Complicated • Single design that can be adapted to the needs of different devices on the fly • Step one: Develop a set of mobile device profiles • Step two: Develop a single design • Step three: Get the device database (WURFL) • Step four: Write or acquire a program to serve different device on the fly.

  21. Naming Convention • Mobile Site URL: Sub domain? Or Sub Folder • Sub domain is slightly better than sub folder but you need to have the privilege and know how to configure the web server • Example of sub domain: • http://m.yourlibrary.org/ • Example of sub folder: • http://yourlibrary.org/m/

  22. Testing Your Mobile Web • You have all the devices (Impossible) • Emulator: Provided by device vendor. (cumbersome) • Firefox Add-on (great tool and easy to use) • W3C Mobile Validator: For rule compliance : http://validator.w3.org/mobile/

  23. 2 Firefox Add-On(Plug-in) • Great tools to help mobile web development • Small Screen Rendering • https://addons.mozilla.org/en-US/firefox/addon/526/ • User Agent Switcher (see next slide for an example) • https://addons.mozilla.org/en-US/firefox/addon/59/ • User Agent Switcher Configuration File: • download useragentswitcher.xml_.txt from: • http://mobiforge.com/developing/blog/user-agent-switcher-config-file/

  24. Firefox Add-on: User Agent Switcher

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

  26. Recommended Resources • Mobile Web Design for Dummies, by Janine Warner and David LaFoutaine, Wiley Publishing, 2010 • Mobile Design and Development, by Brian Fling, O’Reilly, 2009 • A Primer on Building the Library Mobile Web, by Yongming Wang, CALA Occasional Paper series, March 2011 http://www.cala-eb.org/files/ops/OPSMarch2011No8.pdf • Global Authoring Practices for the Mobile Web, by Luca Passani, http://www.passani.it/gap/

  27. Thank You Questions? • Yongming Wang, The College of New Jersey wangyo@tcnj.edu • JiaMi, The College of New Jersey • jmi@tcnj.edu

More Related