Mobile Websites for Libraries - NELA 2011
-
Upload
steve-butzel -
Category
Design
-
view
371 -
download
1
description
Transcript of Mobile Websites for Libraries - NELA 2011
![Page 1: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/1.jpg)
Serving Library Patrons in the Mobile SpaceSteve Butzel
Portsmouth Public Library
![Page 2: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/2.jpg)
“Imitate, Assimilate, Innovate”Steve Butzel
Portsmouth Public Library
![Page 3: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/3.jpg)
Mobile & Smartphone Stats
Two in five cell owners (42%) own a smartphone as of May 2011*
Since 83% of Americans own some kind of mobile phone, this means that one-third of all American adults (35%) are smartphone owners.*
Morgan Stanley analysts predict that the mobile web will be bigger than desktop Internet usage by 2015* Information taken from 2011 Pew Internet and American Life study, “Smartphone Adoption & Usage”
![Page 4: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/4.jpg)
![Page 5: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/5.jpg)
![Page 6: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/6.jpg)
![Page 7: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/7.jpg)
Quick, easy access to information…
![Page 8: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/8.jpg)
What do our patrons want in the mobile space?What do our patrons want in the mobile space?
![Page 9: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/9.jpg)
When does the library open or close?When does the library open or close?
![Page 10: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/10.jpg)
When is story hour today?When is story hour today?
![Page 11: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/11.jpg)
New arrivals
Does my library have these?Does my library have these?
![Page 12: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/12.jpg)
So keep your mobile site simple!
Back to our users…they’re busy.Back to our users…they’re busy. Really busy.Really busy.
![Page 13: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/13.jpg)
![Page 14: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/14.jpg)
![Page 15: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/15.jpg)
![Page 16: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/16.jpg)
![Page 17: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/17.jpg)
![Page 18: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/18.jpg)
![Page 19: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/19.jpg)
![Page 20: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/20.jpg)
![Page 21: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/21.jpg)
![Page 22: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/22.jpg)
![Page 23: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/23.jpg)
![Page 24: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/24.jpg)
![Page 25: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/25.jpg)
![Page 26: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/26.jpg)
![Page 27: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/27.jpg)
![Page 28: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/28.jpg)
![Page 29: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/29.jpg)
![Page 30: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/30.jpg)
Apps
![Page 31: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/31.jpg)
http://www.bibliocommons.com
![Page 32: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/32.jpg)
![Page 33: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/33.jpg)
![Page 34: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/34.jpg)
![Page 35: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/35.jpg)
![Page 36: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/36.jpg)
![Page 37: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/37.jpg)
![Page 38: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/38.jpg)
![Page 39: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/39.jpg)
![Page 40: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/40.jpg)
![Page 41: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/41.jpg)
![Page 42: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/42.jpg)
But can we do better?
![Page 43: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/43.jpg)
What are other trends in mobile webpage design?
![Page 44: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/44.jpg)
![Page 45: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/45.jpg)
![Page 46: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/46.jpg)
![Page 47: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/47.jpg)
What seem to be the trends?
A branded banner image A good attention grabbing visual Some interactivity, transactions Easy navigation Ties to Social Networking Sites Automatically hide the address bar
<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);"></body>
![Page 48: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/48.jpg)
![Page 49: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/49.jpg)
![Page 50: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/50.jpg)
![Page 51: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/51.jpg)
![Page 52: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/52.jpg)
Gamification
http://gamesandlibraries.wetpaint.com/page/2011+Games+and+public+libraries
![Page 53: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/53.jpg)
Gamification
http://gamification.co/2011/04/05/find-the-future-at-the-new-york-public-library/
![Page 54: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/54.jpg)
![Page 55: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/55.jpg)
![Page 56: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/56.jpg)
![Page 57: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/57.jpg)
![Page 58: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/58.jpg)
![Page 59: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/59.jpg)
![Page 60: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/60.jpg)
What do you think?
![Page 61: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/61.jpg)
Some technical stuff (Thanks Brian)
Auto-Detect & Redirect Options Testing on multiple devices Tracking statistics
![Page 62: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/62.jpg)
Auto-Detect & Redirect: Options
CSS (like Canton Public Library) Best method, but most takes the most work to
implement
Javascript Runs in patron’s browser, so not totally reliable
PHP & ASP Runs on the server, so better than javascript
![Page 63: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/63.jpg)
Auto-Detect & Redirect: PHP
http://detectmobilebrowsers.mobi/
1. Download their main script to your webserver
2. Use their Function Generator to build the code for your main website homepage
3. Edit your .htaccess to allow .html files to run PHP code
4. Their FAQ explains everything
![Page 64: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/64.jpg)
Auto-Detect & Redirect
But just in case…
Failsafe Link
![Page 65: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/65.jpg)
Test, Test, Test, Test, Test
Try your new mobile site out on as many different phones you can find
Online phone emulators http://www.testiphone.com http://mobiready.com http://validator.w3.org/mobile/
Firefox User Agent Switcher https://addons.mozilla.org/en-US/firefox/addon/59/
![Page 66: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/66.jpg)
Tracking Usage Stats
http://www.statcounter.com http://www.google.com/analytics/ What to look for
Overall usage Visitor location Devices used
…all the usual stats
![Page 67: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/67.jpg)
Tracking Usage Stats: Overall Use
![Page 68: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/68.jpg)
Tracking Usage Stats: Location
![Page 69: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/69.jpg)
Tracking Usage Stats: Devices
![Page 70: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/70.jpg)
Online Newsstand Project
http://www.theonlinenewsstand.org
![Page 71: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/71.jpg)
![Page 72: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/72.jpg)
![Page 73: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/73.jpg)
![Page 74: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/74.jpg)
Participating Libraries
![Page 75: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/75.jpg)
![Page 76: Mobile Websites for Libraries - NELA 2011](https://reader033.fdocuments.us/reader033/viewer/2022060108/5550d1eeb4c905f2318b4e54/html5/thumbnails/76.jpg)
Thank You!
[email protected] @sbutzel (rarely) 603-766-1711
Brian Herzog, SwissArmyLibrarian.net/mobile [email protected]
My colleagues: Jennifer Moore, Kim McKee, Heather Armitage, Barbara Bourgoine