Presentation is loading. Please wait.

Presentation is loading. Please wait.

Building Library Mobile Website Ex Libris Northeast Users Group (ENUG) Annual Conference 2010 William Paterson University, Wayne, NJ October 21 – 22, 2010.

Similar presentations

Presentation on theme: "Building Library Mobile Website Ex Libris Northeast Users Group (ENUG) Annual Conference 2010 William Paterson University, Wayne, NJ October 21 – 22, 2010."— 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 1

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

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. 3

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. 4

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 5

6 How: One – Do Nothing 6

7 Do Nothing Approach Depend on Mobile Browser and/or Transcoder to work the magic Google Transcoder (also called Mobile Optimizer): Carrier’s Transcoder: working behind the scene 7

8 8

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.” 9

10 How: Two – Miniaturize Mobile Web Creation Sites: Some Freebies Wirenode (free with ads): Wapple (free) : CMS Mobile Theme WordPress Mobile Theme Drupul Mobile Edition 10

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

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 12

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 13

14 A Prototype 14

15 Code: index.html TCNJ Library Mobile Web View Full Web Site Library Hours Click to Call: 609-771-3337 The College of New Jersey Library 2000 Pennington Road Ewing, NJ 08628 15

16 A Real Example: OSU 16

17 Code: // OSU Libraries Mobile Home 17

18 Code continue OSU Mobile Libraries Hours Search Computers Ask Us FAQs People Directions Java II BeaverTracks (541) 737-3331 | About | OSU Libraries OSU Mobile | © 2010 OSU Libraries 18

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: 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:'); } else { header('Location:'); } ?> 19

20 One Small Thing Mobile Site URL: Sub domain? Or Sub Folder Example of sub domain: Example of sub folder: 20

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 21

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 22

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

24 2 Firefox Add-On(Plug-in) Great tool to help mobile web development Small Screen Rendering User Agent Switcher User Agent Switcher Config File: useragentswitcher.xml_.txt file/ file/ 24

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 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 25

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 26

27 Some good examples 27

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

29 Thank You Yongming Wang Systems Librarian, The College of New Jersey 29

Download ppt "Building Library Mobile Website Ex Libris Northeast Users Group (ENUG) Annual Conference 2010 William Paterson University, Wayne, NJ October 21 – 22, 2010."

Similar presentations

Ads by Google