Presented to LILRC on 9/30/10. Note that Slideshare doesn't handle the animation at all. So some of this presentation, especially the Mobile Site Generator demo, will be impossible to follow here. The original powerpoint file, with animations intact, is available here: http://bit.ly/LILRCmobile

1. Building a Mobile Website: One Block at a Time Chad Haefele Emerging Technologies Librarian UNC Chapel Hill chad.haefele@gmail.com

2. What I’ll be showing you An overview of the mobile/smartphone landscape A tour through our development process The building blocks you’ll need to do it yourself, and the decisions you’ll need to make along the way A mobile site generator

3. Why now?

4. The Old Browser

5. The New Browser

6. Even Better

7. http://bit.ly/MobileLandscape

8. iPhone 4

9. iOS devices iPhone, iPad, iPod Touch Available only through AT&T Debuted in 2007 Apps developed in Objective C More than 250,000 apps

11. Android HTC Evo Droid X

13. Android devices Too many to list Available on all major carriers Debuted in 2008 Apps developed in Java More than 80,000 apps

14. BlackBerry Torch

16. Blackberry details Too many to list Available on all major carriers Debuted in 1996 (sort of) More modern devices: 2005 About 10000 apps

17. Which platform? Mobile web use (August 2010) Market share – devices sold (July 2010) Anon. 2010. August 2010 Mobile OS Share. Quantcast Blog. September 3. http://blog.quantcast.com/quantcast/2010/09/august-2010-mobile-os-share.html. Anon. 2010. comScore Reports July 2010 U.S. Mobile Subscriber Market Share -- RESTON, Va., Sept. 15 /PRNewswire/ --. http://www.prnewswire.com/news-releases/comscore-reports-july-2010-us-mobile-subscriber-market-share-102969094.html.

18. Source: http://blog.quantcast.com/quantcast/2010/09/august-2010-mobile-os-share.html

19. VS

20. UNC Mobile site walkthrough www.lib.unc.edu/m www.lib.unc.edu/m/plain + ‘View full site link’

21. UNC Mobile site walkthrough

22. Catalog

23. UNC Mobile site walkthrough

24. UNC Mobile site walkthrough

25. http://www.flickr.com/photos/gullevek/155604654/

26. Block #1: Survey your users Plus 44 ‘other’ responses Data from Spring, 2009

27. Sample ‘Other’ responses: Cell phone Cheap free phone Braille Note Carrier pigeon Lame old phone :( My cheap phone that always has at least 2 bars

28. Block #2: Platform Vs.

29. Platform: App or Webapp? App Webapp Java, Objective C Single platform Full hardware access(GPS, camera, etc) Can be used offline Tricky to get stats HTML, CSS, Javascript Multi-platform (maybe) Limited hardware access (GPS only) Requires web connection Standard webstats

30. Android’s App Inventor

31. Other app development options Phonegap Flash Sencha Touch Appcelerator Others: http://en.wikipedia.org/wiki/Multiple_phone_web_based_application_framework

32. Block #3: Framework Jason Clark’s: http://diginit.wordpress.com/2009/11/13/mobile-web-design-working-code-tips-best-practices/orhttp://bit.ly/cXlnlS www.lib.utc.edu/m

33. Block #3: Framework iUI: code.google.com/p/iui/ Mobile site generator:www.hiddenpeanuts.com/msg www.lib.unc.edu/m

34. Mobile site generator www.hiddenpeanuts.com/msg

35. Device testing iPhone/iPod Touch

36. Device testing Android

37. Device testing Text only

38. Block #4: Data sources & Outside systems RSS feeds XML Other systems Computer availability eResources Hours IM / text a librarian services

39. Block #5: Custom code

40. http://dclibrarylabs.org/ iPhone app code (app)

41. iUI code (webapp) http://code.google.com/p/iui/

42. Block #6: Catalog Catalog options Do it yourself ILS vendor-provided solution 3rd party product

43. Catalog: DIY Priority 1: Get a clean data feed XML feeds from ILS Yaz / Z39.50 (http://www.indexdata.com/yaz) Other solution – tap into DB directly somehow Harass your vendors!

44. Catalog: DIY (at UNC) Endeca makes it all possible XML + php + Syndetics + iUI

45. Catalog: ILS solutions Airpac, from Innovative

46. Catalog: 3rd party product Library Anywhere “Works with 90% of current OPACs.” http://www.librarything.com/LibraryAnywhere

47. Block #7: Promotion

48. Rough stats: Hits, 2010 Block #8: Evaluate & Iterate

49. Rough stats: Catalog info, 2010 Block #8: Evaluate & Iterate

50. Blocks (review) Survey Platform Framework Data sources Custom code Catalog Promotion Evaluate & Iterate

51. Mobile site generator www.hiddenpeanuts.com/msg

52. iUI code (webapp) http://code.google.com/p/iui/

53. Examples INSERT SAMPLE HERE www.cranstonlibrary.org/m http://library.boisestate.edu/m/ http://mobile-library.mhcc.edu/

54. Main Page 40 possible pages

55. Getting started Download the iUI code: http://code.google.com/p/iui/ Unzip it, put the iUI folder on your server where you want the mobile site

61. Custom code

64. Webapps play well with others

65. HTML5 & more on the horizon APIs – camera, GPS, mic, accelerometer, video Youtube: m.youtube.com Flickr: m.flickr.com Google Reader: google.com/reader/i Geolocation: hiddenpeanuts.com/ala

66. This is not the end Slides online: http://bit.ly/LILRCmobile http://www.slideshare.net/cHaefele