Building a Mobile Website: One Block at a Time

1,696 views
1,642 views

Published on

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

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
  • 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
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,696
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Building a Mobile Website: One Block at a Time

  1. 1. Building a Mobile Website: One Block at a Time<br />Chad Haefele<br />Emerging Technologies Librarian<br />UNC Chapel Hill<br />chad.haefele@gmail.com<br />
  2. 2. What I’ll be showing you<br />An overview of the mobile/smartphone landscape<br />A tour through our development process<br />The building blocks you’ll need to do it yourself, and the decisions you’ll need to make along the way<br />A mobile site generator<br />
  3. 3. Why now?<br />
  4. 4. The Old Browser<br />
  5. 5. The New Browser<br />
  6. 6. Even Better<br />
  7. 7. http://bit.ly/MobileLandscape<br />
  8. 8. iPhone 4<br />
  9. 9. iOS devices<br />iPhone, iPad, iPod Touch<br />Available only through AT&T<br />Debuted in 2007<br />Apps developed in Objective C<br />More than 250,000 apps<br />
  10. 10.
  11. 11. Android<br />HTC Evo<br />Droid X<br />
  12. 12.
  13. 13. Android devices<br />Too many to list<br />Available on all major carriers<br />Debuted in 2008<br />Apps developed in Java<br />More than 80,000 apps<br />
  14. 14. BlackBerry Torch<br />
  15. 15.
  16. 16. Blackberry details<br />Too many to list<br />Available on all major carriers<br />Debuted in 1996 (sort of)<br />More modern devices: 2005<br />About 10000 apps<br />
  17. 17. Which platform?<br />Mobile web use<br />(August 2010)<br />Market share – devices sold<br />(July 2010)<br />Anon. 2010. August 2010 Mobile OS Share. Quantcast Blog. September 3. http://blog.quantcast.com/quantcast/2010/09/august-2010-mobile-os-share.html.<br />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.<br />
  18. 18. Source: http://blog.quantcast.com/quantcast/2010/09/august-2010-mobile-os-share.html<br />
  19. 19. VS<br />
  20. 20. UNC Mobile site walkthrough<br />www.lib.unc.edu/m<br />www.lib.unc.edu/m/plain<br />+ ‘View full site link’<br />
  21. 21. UNC Mobile site walkthrough<br />
  22. 22. Catalog<br />
  23. 23. UNC Mobile site walkthrough<br />
  24. 24. UNC Mobile site walkthrough<br />
  25. 25. http://www.flickr.com/photos/gullevek/155604654/<br />
  26. 26. Block #1: Survey your users<br />Plus 44 ‘other’ responses<br />Data from Spring, 2009<br />
  27. 27. Sample ‘Other’ responses:<br />Cell phone<br />Cheap free phone<br />Braille Note<br />Carrier pigeon<br />Lame old phone :(<br />My cheap phone that always has at least 2 bars<br />
  28. 28. Block #2: Platform<br />Vs.<br />
  29. 29. Platform: App or Webapp?<br />App<br />Webapp<br />Java, Objective C<br />Single platform<br />Full hardware access(GPS, camera, etc)<br />Can be used offline<br />Tricky to get stats<br />HTML, CSS, Javascript<br />Multi-platform (maybe)<br />Limited hardware access (GPS only)<br />Requires web connection<br />Standard webstats<br />
  30. 30. Android’s App Inventor<br />
  31. 31. Other app development options<br />Phonegap<br />Flash<br />Sencha Touch<br />Appcelerator<br />Others: http://en.wikipedia.org/wiki/Multiple_phone_web_based_application_framework<br />
  32. 32. Block #3: Framework<br />Jason Clark’s: http://diginit.wordpress.com/2009/11/13/mobile-web-design-working-code-tips-best-practices/orhttp://bit.ly/cXlnlS<br />www.lib.utc.edu/m<br />
  33. 33. Block #3: Framework<br />iUI: code.google.com/p/iui/<br />Mobile site generator:www.hiddenpeanuts.com/msg<br />www.lib.unc.edu/m<br />
  34. 34. Mobile site generator<br />www.hiddenpeanuts.com/msg<br />
  35. 35. Device testing<br />iPhone/iPod Touch<br />
  36. 36. Device testing<br />Android<br />
  37. 37. Device testing<br />Text only<br />
  38. 38. Block #4: Data sources & Outside systems<br />RSS feeds<br />XML<br />Other systems<br />Computer availability<br />eResources<br />Hours<br />IM / text a librarian services<br />
  39. 39. Block #5: Custom code<br />
  40. 40. http://dclibrarylabs.org/<br />iPhone app code<br />(app)<br />
  41. 41. iUI code (webapp)<br />http://code.google.com/p/iui/<br />
  42. 42. Block #6: Catalog<br />Catalog options<br />Do it yourself<br />ILS vendor-provided solution<br />3rd party product<br />
  43. 43. Catalog: DIY<br />Priority 1: Get a clean data feed<br />XML feeds from ILS<br />Yaz / Z39.50 (http://www.indexdata.com/yaz)<br />Other solution – tap into DB directly somehow<br />Harass your vendors!<br />
  44. 44. Catalog: DIY (at UNC)<br />Endeca makes it all possible<br />XML + php + Syndetics + iUI<br />
  45. 45. Catalog: ILS solutions<br />Airpac, from Innovative<br />
  46. 46. Catalog: 3rd party product<br />Library Anywhere<br />“Works with 90% of current OPACs.”<br />http://www.librarything.com/LibraryAnywhere<br />
  47. 47. Block #7: Promotion<br />
  48. 48. Rough stats: Hits, 2010<br />Block #8: Evaluate & Iterate<br />
  49. 49. Rough stats: Catalog info, 2010<br />Block #8: Evaluate & Iterate<br />
  50. 50. Blocks (review)<br />Survey<br />Platform<br />Framework<br />Data sources<br />Custom code<br />Catalog<br />Promotion<br />Evaluate & Iterate<br />
  51. 51. Mobile site generator<br />www.hiddenpeanuts.com/msg<br />
  52. 52. iUI code (webapp)<br />http://code.google.com/p/iui/<br />
  53. 53. Examples<br />INSERT SAMPLE HERE<br />www.cranstonlibrary.org/m<br />http://library.boisestate.edu/m/<br />http://mobile-library.mhcc.edu/<br />
  54. 54. Main Page<br />40 possible pages<br />
  55. 55. Getting started<br />Download the iUI code: http://code.google.com/p/iui/<br />Unzip it, put the iUI folder on your server where you want the mobile site<br />
  56. 56.
  57. 57.
  58. 58.
  59. 59.
  60. 60.
  61. 61. Custom code<br />
  62. 62.
  63. 63.
  64. 64. Webapps play well with others<br />
  65. 65. HTML5 & more on the horizon<br />APIs – camera, GPS, mic, accelerometer, video<br />Youtube: m.youtube.com <br />Flickr: m.flickr.com <br />Google Reader: google.com/reader/i <br />Geolocation: hiddenpeanuts.com/ala<br />
  66. 66. This is not the end<br />Slides online: http://bit.ly/LILRCmobile<br />http://www.slideshare.net/cHaefele<br />

×