1 / 29

Building Library Mobile Website

Building Library Mobile Website. Ex Libris Northeast Users Group (ENUG) Annual Conference 2010 William Paterson University, Wayne, NJ October 21 – 22, 2010. Answer to the “Who” question: YOU Answer to the “When” question: NOW. Why (Some statistics). Mobile Device Usage in US

berit
Download Presentation

Building Library Mobile Website

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 Website Ex Libris Northeast Users Group (ENUG) Annual Conference 2010 William Paterson University, Wayne, NJ October 21 – 22, 2010

  2. Answer to the “Who” question: YOU • Answer to the “When” question: NOW

  3. Why (Some statistics) • Mobile Device Usage in US • 38% of Americans had accessed the Web using a mobile device by May 2010* • For age group 18 – 29, the number is 65% !* • 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 Initiative: “Mobile Access 2010”. July 2010.

  4. Why (more statistics) • Mobile Device Usage in US Colleges • 51.2% own web-enabled mobile phone • 33.1% use their web-enabled phone to access Internet • Among them, daily use 44.9%, weekly use 31.8% • Another 11.8% said they plan to purchase a web-enabled mobile phone in the next 12 month Source: EDUCAUSE Center for Applied Research (ECAR): “The ECAR Study of Undergraduate Students and Information Technology, 2009”. October 2009. Survey Respondents = 30,616; 91.7% from four-year institutions.

  5. Mobile Device and Its Characteristics • Smart Phones (high-end) • iPhone, Android phone, Palm Pre, Blackberry, Windows Mobile, Nokia S60 • Feature Phones (low-end) • The Rest • Web-enabled PDAs • For example: Palm T|X • Common Characteristics • Small Screen Size • Very difficult scrolling and input • Limited Resources: memory, bandwidth, etc

  6. How: One – Do Nothing

  7. Do Nothing Approach • Depend on Mobile Browser and/or Transcoder to work the magic • Google Transcoder (also called Mobile Optimizer): http://google.com/gwt/n?u=http://www.tcnj.edu/~library • Carrier’s Transcoder: working behind the scene

  8. http://google.com/gwt/n?u=http://www.tcnj.edu/~library/

  9. Mobilize vs. Miniaturize • “Miniaturizing treats the mobile environment and technology as a subset of the desktop environment. Current content and images are reformatted and resized for mobile screens. Mobilizing, on the other hand, precisely targets mobile user needs… It takes into consideration why the user is even looking at this content on a mobile device in the first place.”

  10. How: Two – Miniaturize • Mobile Web Creation Sites: • http://google.com/gwt/n?u= • Some Freebies • Wirenode (free with ads): http://www.wirenode.com • Wapple (free) : http://wapple.net/ • CMS Mobile Theme • WordPress Mobile Theme • www.cranburypubliclibrary.org • Drupul Mobile Edition

  11. How: Three - *Mobilize* • Three Methods • Single Design without Auto-Detection • Single Design with Auto-Detection • Multiple Designs with Auto-Detection

  12. Single Design Without Auto-Detection • Create a simple version of your website for low-end device • This is most cost-effective and easiest to do, after do-nothing and miniaturize approach • All you need is • Some basic HTML knowledge • Access to web server

  13. Single Design without Auto-Detection • Step One: Plan Your Content • If you have no idea, take a look at other library’s mobile site. See Example later. • 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 • Use a text editor

  14. A Prototype

  15. Code: index.html • <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//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><h2><a href="http://www.tcnj.edu/~library">View Full Web Site</a></h2> • </div> • <h2>Library Hours</h2> • <div><p><strong>Click to Call: <a href="tel:609-771-3337">609-771-3337</a></strong></p></div> • <p>The College of New Jersey Library<br /> • 2000 Pennington Road<br /> • Ewing, NJ 08628</p> • </body> • </html>

  16. A Real Example: OSU

  17. Code: http://m.library.oregonstate.edu/index.html • <?xml version="1.0" encoding="UTF-8" ?> • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml"> • <head> • <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> • <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no, height=device-height" /> • <meta name="apple-mobile-web-app-capable" content="yes" /> • <meta name="apple-mobile-web-app-status-bar-style" content="black" /> • <link rel="apple-touch-icon" href="/images/logo60.jpg" /> • <meta name="format-detection" content="telephone=no" /> • <!--everyone--> • <link rel="stylesheet" type="text/css" href="/stylesheets/mobile.css" /> • <!--[if IE]><link rel="stylesheet" type="text/css" href="mobile.css" media="screen" /><![endif]--> • <!--mobile--> • <link href="/stylesheets/mobile.css" rel="stylesheet" type="text/css" media="handheld" /> • <!--smartphone--> • <link rel="stylesheet" href="/stylesheets/iphone.css" media="screen" /> • <script type="text/javascript"> • //<![CDATA[ • window.scrollTo(0, 1); • //]]> • </script> • <title>OSU Libraries Mobile Home</title> • </head>

  18. Code continue • <body> • <div id='header'> • <div id='big_header'> • <a href="http://m.oregonstate.edu/" class='toolbar' title="OSU Mobile Home">OSU Mobile</a> • <h1>Libraries</h1></div> </div> • <div id ='content' class="index"> • <div id='nav'> • <ol> <li class='top'><a class='hours' href="/hours" accesskey="1">Hours</a></li> • <li><a class='search' href="search.html" accesskey="2">Search</a></li> • <li><a class='computers' href="/computers/" accesskey="3">Computers</a></li> • <li><a class='ask' href="askLib.html" accesskey="4">Ask Us</a></li> • <li><a class='how' href="faq.html" accesskey="5">FAQs</a></li> • <li><a class='people' href="/staff/" accesskey="6">People</a></li> • <li><a class='address' href="directions.html" accesskey="7">Directions</a></li> • <li><a class='other' href="/java.html" accesskey="8">Java II</a></li> • <li><a class='beavertracks' href="http://tour.library.oregonstate.edu" accesskey="9">BeaverTracks</a></li> </ol> </div> </div> • <div id ='footer‘><div> • <a href="tel:5417373331">(541) 737-3331</a> | <a href="http://m.library.oregonstate.edu/about.html">About</a> | <a href="http://osulibrary.oregonstate.edu/?opt_out=true">OSU Libraries</a> <br /> • <a class ="osu_orange" href="http://m.oregonstate.edu/">OSU Mobile</a> | &copy; 2010 OSU Libraries </div></div> • </body> • </html>

  19. Single Design with Auto-Detection • Need to write or borrow a program: any of these php, asp, or jsp, etc • Or config the web server such as Apache • Following is one php example: • <?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://www.YourSite.edu/mobile/'); } else { header('Location: http://www.YourSite.edu'); } ?>

  20. One Small Thing • Mobile Site URL: Sub domain? Or Sub Folder • Example of sub domain: • http://m.library.oregonstate.edu/ • Example of sub folder: • http://www.lib.ncsu.edu/m/

  21. Multiple Designs With Auto-Detection • Very complicated • Step one: Develop a set of profiles • Step two: create multiple designs, each optimized for a different device profile • Step three: Develop (or acquire) a device database (WURFL) • Step four: Write (or acquire) a program that can deliver the right version of your site to the right device

  22. Content Adaptation • Most Complicated • Single design that can be adapted to the needs of different devices on the fly • Only step two and four is different from the previous slide

  23. Testing Your Mobile Web • You have all the devices • Emulator: Provided by device vendor. • W3C Mobile Validator: For rule compliance • Firefox Add-on

  24. 2 Firefox Add-On(Plug-in) • Great tool to help mobile web development • Small Screen Rendering • https://addons.mozilla.org/en-US/firefox/addon/526/ • User Agent Switcher • https://addons.mozilla.org/en-US/firefox/addon/59/ • User Agent Switcher Config File: useragentswitcher.xml_.txt • http://mobiforge.com/developing/blog/user-agent-switcher-config-file/

  25. What? • What Content goes into your mobile web? • Repeat: common characteristics of web-enabled phones • Small Screen • Very difficult to scroll and input • Limited resources • Mobile users are always on the go • Some design guidance • 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 And WAP CSS/Wireless CSS • You can use CSS but don’t rely on CSS

  26. So, What? • Hours • Contacts • Ask Us – SMS, IM, Tel, Email • Direction to the library • Mobile Catalog (mobile skin for Voyager is done. By Tom Pasley) • Mobile E-Collection: mobile pubmed, etc, • Third Party Hosting – YouTube • Link to full library website • Other

  27. Some good examples

  28. Future of Mobile Web • Alert and Action • RSS • Geolocation Based Apps

  29. Thank You • Yongming Wang • Systems Librarian, The College of New Jersey • wangyo@tcnj.edu

More Related