Building Library Mobile Website Ex Libris Northeast Users Group (ENUG) Annual Conference 2010...
29
Building Library Mobile Website Ex Libris Northeast Users Group (ENUG) Annual Conference 2010 William Paterson University, Wayne, NJ October 21 – 22, 2010 1
-
Upload
laila-lucy -
Category
Documents
-
view
218 -
download
0
Transcript of Building Library Mobile Website Ex Libris Northeast Users Group (ENUG) Annual Conference 2010...
Building Library Mobile Website
Ex Libris Northeast Users Group (ENUG) Annual Conference 2010William Paterson University, Wayne, NJOctober 21 – 22, 2010
1
Answer to the “Who” question: YOU
Answer to the “When” question: NOW
2
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.
3
Why (more statistics)Mobile Device Usage in US Colleges
51.2% own web-enabled mobile phone33.1% use their web-enabled phone to access
InternetAmong 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.
4
Mobile Device and Its CharacteristicsSmart Phones (high-end)
iPhone, Android phone, Palm Pre, Blackberry, Windows Mobile, Nokia S60
Feature Phones (low-end)The Rest
Web-enabled PDAsFor example: Palm T|X
Common CharacteristicsSmall Screen SizeVery difficult scrolling and inputLimited Resources: memory, bandwidth, etc
5
How: One – Do Nothing
6
Do Nothing Approach
Depend on Mobile Browser and/or Transcoder to work the magicGoogle Transcoder (also called Mobile
Optimizer): http://google.com/gwt/n?u=http://www.tcnj.edu/~library
Carrier’s Transcoder: working behind the scene
7
http://google.com/gwt/n?u=http://www.tcnj.edu/~library/
8
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.”
9
How: Two – Miniaturize
Mobile Web Creation Sites:http://google.com/gwt/n?u=Some Freebies
Wirenode (free with ads): http://www.wirenode.comWapple (free) : http://wapple.net/
CMS Mobile ThemeWordPress Mobile Theme
www.cranburypubliclibrary.orgDrupul Mobile Edition
10
How: Three - *Mobilize*
Three MethodsSingle Design without Auto-DetectionSingle Design with Auto-DetectionMultiple Designs with Auto-Detection
11
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 isSome basic HTML knowledgeAccess to web server
12
Single Design without Auto-Detection
Step One: Plan Your ContentIf 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 DreamweaverUse a text editor
13
A Prototype
14
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>
15
A Real Example: OSU
16
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>
17
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> | © 2010 OSU Libraries </div></div>
</body>
</html>
18
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'); } ?>
19
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/
20
Multiple Designs With Auto-Detection
Very complicatedStep one: Develop a set of profilesStep two: create multiple designs, each
optimized for a different device profileStep 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
21
Content Adaptation
Most ComplicatedSingle design that can be adapted to the
needs of different devices on the flyOnly step two and four is different from the
previous slide
22
Testing Your Mobile Web
You have all the devicesEmulator: Provided by device vendor. W3C Mobile Validator: For rule compliance Firefox Add-on
23
2 Firefox Add-On(Plug-in)
Great tool to help mobile web developmentSmall 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_.txthttp://mobiforge.com/developing/blog/user-agent-sw
itcher-config-file/
24
What?What Content goes into your mobile web?Repeat: common characteristics of web-enabled
phonesSmall ScreenVery difficult to scroll and inputLimited resourcesMobile users are always on the go
Some design guidanceEach file size not bigger than 25KThree clicks rule still applyDo not use <table> if possibleStandards: Use XHTML - MP 1.1 or 1.2 And WAP
CSS/Wireless CSSYou can use CSS but don’t rely on CSS
25
So, What?HoursContactsAsk Us – SMS, IM, Tel, EmailDirection to the libraryMobile Catalog (mobile skin for Voyager is
done. By Tom Pasley)Mobile E-Collection: mobile pubmed, etc,Third Party Hosting – YouTubeLink to full library websiteOther
26
Some good examples
27
Future of Mobile Web
Alert and ActionRSSGeolocation Based Apps
28
