Elite Mobile Sites - Why you need a mobile website - Mobile Website Designs
Mobile Website Design for Libraries
-
Upload
steve-butzel -
Category
Technology
-
view
1.008 -
download
1
description
Transcript of Mobile Website Design for Libraries
![Page 1: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/1.jpg)
Serving Library Patrons in the Mobile Space Steve Butzel
Portsmouth Public Library
![Page 2: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/2.jpg)
“Imitate, Assimilate, Innovate” Steve Butzel
Portsmouth Public Library
![Page 3: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/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 Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/4.jpg)
![Page 5: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/5.jpg)
![Page 6: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/6.jpg)
![Page 7: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/7.jpg)
Quick, easy access to information…
![Page 8: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/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 Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/9.jpg)
When does the library open or close? When does the library open or close?
![Page 10: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/10.jpg)
When is story hour today? When is story hour today?
![Page 11: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/11.jpg)
New arrivals
Does my library have these? Does my library have these?
![Page 12: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/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 Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/13.jpg)
![Page 14: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/14.jpg)
![Page 15: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/15.jpg)
![Page 16: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/16.jpg)
![Page 17: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/17.jpg)
![Page 18: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/18.jpg)
![Page 19: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/19.jpg)
![Page 20: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/20.jpg)
![Page 21: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/21.jpg)
![Page 22: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/22.jpg)
![Page 23: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/23.jpg)
![Page 24: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/24.jpg)
![Page 25: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/25.jpg)
![Page 26: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/26.jpg)
![Page 27: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/27.jpg)
![Page 28: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/28.jpg)
![Page 29: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/29.jpg)
![Page 30: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/30.jpg)
![Page 31: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/31.jpg)
![Page 32: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/32.jpg)
![Page 33: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/33.jpg)
![Page 34: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/34.jpg)
![Page 35: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/35.jpg)
![Page 36: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/36.jpg)
Apps
![Page 37: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/37.jpg)
http://www.bibliocommons.com
![Page 38: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/38.jpg)
![Page 39: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/39.jpg)
![Page 40: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/40.jpg)
![Page 41: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/41.jpg)
![Page 42: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/42.jpg)
![Page 43: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/43.jpg)
![Page 44: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/44.jpg)
![Page 45: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/45.jpg)
![Page 46: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/46.jpg)
![Page 47: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/47.jpg)
![Page 48: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/48.jpg)
But can we do better?
![Page 49: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/49.jpg)
What are other trends in mobile webpage design?
![Page 50: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/50.jpg)
![Page 51: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/51.jpg)
![Page 52: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/52.jpg)
![Page 53: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/53.jpg)
![Page 54: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/54.jpg)
![Page 55: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/55.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 56: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/56.jpg)
![Page 57: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/57.jpg)
![Page 58: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/58.jpg)
![Page 59: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/59.jpg)
![Page 60: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/60.jpg)
Other possibilities
![Page 61: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/61.jpg)
Gamification
http://gamesandlibraries.wetpaint.com/page/2011+Games+and+public+libraries
![Page 62: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/62.jpg)
Gamification
http://gamification.co/2011/04/05/find-the-future-at-the-new-york-public-library/
![Page 63: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/63.jpg)
![Page 64: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/64.jpg)
![Page 65: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/65.jpg)
![Page 66: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/66.jpg)
![Page 67: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/67.jpg)
![Page 68: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/68.jpg)
![Page 69: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/69.jpg)
What do you think?
![Page 70: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/70.jpg)
Some technical stuff (Thanks Brian)
Auto-Detect & Redirect Options
Testing on multiple devices
Tracking statistics
![Page 71: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/71.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 72: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/72.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 73: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/73.jpg)
Auto-Detect & Redirect
But just in case…
Failsafe Link
![Page 74: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/74.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 75: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/75.jpg)
Tracking Usage Stats
http://www.statcounter.com
http://www.google.com/analytics/
http://piwik.org
What to look for
Overall usage
Visitor location
Devices used
…all the usual stats
![Page 76: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/76.jpg)
Tracking Usage Stats: Overall Use
![Page 77: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/77.jpg)
Tracking Usage Stats: Location
![Page 78: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/78.jpg)
Tracking Usage Stats: Devices
![Page 79: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/79.jpg)
Other Good Web Resources
One Pager, (http://influx.us/onepager)
Jakob Nielsen, “Mobile Site vs. Full Site” (http://www.useit.com/alertbox/mobile-vs-full-sites.html)
“Why We Shouldn’t Make Separate Mobile
Websites” (http://www.smashingmagazine.com/2012/04/19/why-we-shouldnt-
make-separate-mobile-websites/)
![Page 81: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/81.jpg)
![Page 82: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/82.jpg)
![Page 83: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/83.jpg)
![Page 84: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/84.jpg)
Participating Libraries
![Page 85: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/85.jpg)
Participating Libraries
![Page 86: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/86.jpg)
Online Newsstand Project - Gale
![Page 87: Mobile Website Design for Libraries](https://reader034.fdocuments.net/reader034/viewer/2022042613/540099458d7f7289408b48d6/html5/thumbnails/87.jpg)
Thank You!
@sbutzel (rarely)
603-766-1711
Brian Herzog, SwissArmyLibrarian.net/mobile
My colleagues: Jennifer Moore, Kim McKee,
Heather Armitage, Barbara Bourgoine