Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Building Library Mobile Web Building Library Mobile Web LITA National Forum 2011 October 2, 2011 St. Louis, MS 1."— Presentation transcript:

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

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

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, October Survey Respondents = 30,616 ** EDUCAUSE Center for Applied Research (ECAR): The ECAR Study of Undergraduate Students and Information Technology, October Survey Respondents = 36,950 3

4 Mobile Access to TCNJ Library Website 4

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

6 First Approach: Transcoding 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): 6

7 Second Approach – Miniaturize Some Freebies Wirenode (free with ads): Wapple (free) : CMS Mobile Theme WordPress Mobile Theme Drupul Mobile Edition 7

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

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 doesnt 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 if possible Standards: Use XHTML - MP 1.1 or 1.2 or XHTML Basic 1.0 You can use CSS but dont rely on CSS 9 *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, 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 10

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

12 Single Design without Auto- Detection Step One: Determine Your Content If you have no idea, take a look at other librarys 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 12

13 A Prototype 13

14 Code: index.html TCNJ Library Mobile Web View Full Web Site 1. Library Hours 2. Ask Us 3. FAQs 4. Directions 5. Click to Call: Library Catalog The College of New Jersey Library 2000 Pennington Road Ewing, NJ TCNJ Library Mobile Web View Full Web Site 1. Library Hours 2. Ask Us 3. FAQs 4. Directions 5. Click to Call: Library Catalog The College of New Jersey Library 2000 Pennington Road Ewing, NJ

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

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) 16

17 2. php Code for Auto-Detection 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: } ?> From: (with modification)http://mobiforge.com/developing/story/lightweight-device-detection-php 17

18 Three More Steps 1. Save the previous file as index.php 2. Publish or ftp it to document root 3. Point your browser to 18

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: 19

20 4. Content Adaptation 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. 20

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: Example of sub folder: 21

22 Testing Your Mobile Web 1. You have all the devices (Impossible) 2. Emulator: Provided by device vendor. (cumbersome) 3. Firefox Add-on (great tool and easy to use) W3C Mobile Validator: For rule compliance : 22

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: config-file/ config-file/ 23

24 Firefox Add-on: User Agent Switcher 24

25 25

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

27 Thank You Questions? Yongming Wang, The College of New Jersey Jia Mi, The College of New Jersey 27


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

Similar presentations


Ads by Google