mobile website design for libraries

87
Serving Library Patrons in the Mobile Space Steve Butzel Portsmouth Public Library

Upload: steve-butzel

Post on 29-Aug-2014

1.006 views

Category:

Technology


1 download

DESCRIPTION

This presentation, given by Steve Butzel at the 2012 Connecticut Library Association conference, covers trends in mobile website design and possibilities for libraries. Library apps are critically reviewed while simpler, less expensive mobile website techniques are favored. In addition, Steve discusses his Online Newsstand Project which improves access to library database content. Steve Butzel, Assistant Director of the Portsmouth Public Library, Portsmouth, NH

TRANSCRIPT

Page 1: Mobile Website Design for Libraries

Serving Library Patrons in the Mobile Space Steve Butzel

Portsmouth Public Library

Page 2: Mobile Website Design for Libraries

“Imitate, Assimilate, Innovate” Steve Butzel

Portsmouth Public Library

Page 3: Mobile Website Design for Libraries

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
Page 5: Mobile Website Design for Libraries
Page 6: Mobile Website Design for Libraries
Page 7: Mobile Website Design for Libraries

Quick, easy access to information…

Page 8: Mobile Website Design for Libraries

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

When does the library open or close? When does the library open or close?

Page 10: Mobile Website Design for Libraries

When is story hour today? When is story hour today?

Page 11: Mobile Website Design for Libraries

New arrivals

Does my library have these? Does my library have these?

Page 12: Mobile Website Design for Libraries

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
Page 14: Mobile Website Design for Libraries
Page 15: Mobile Website Design for Libraries
Page 16: Mobile Website Design for Libraries
Page 17: Mobile Website Design for Libraries
Page 18: Mobile Website Design for Libraries
Page 19: Mobile Website Design for Libraries
Page 20: Mobile Website Design for Libraries
Page 21: Mobile Website Design for Libraries
Page 22: Mobile Website Design for Libraries
Page 23: Mobile Website Design for Libraries
Page 24: Mobile Website Design for Libraries
Page 25: Mobile Website Design for Libraries
Page 26: Mobile Website Design for Libraries
Page 27: Mobile Website Design for Libraries
Page 28: Mobile Website Design for Libraries
Page 29: Mobile Website Design for Libraries
Page 30: Mobile Website Design for Libraries
Page 31: Mobile Website Design for Libraries
Page 32: Mobile Website Design for Libraries
Page 33: Mobile Website Design for Libraries
Page 34: Mobile Website Design for Libraries
Page 35: Mobile Website Design for Libraries
Page 36: Mobile Website Design for Libraries

Apps

Page 37: Mobile Website Design for Libraries

http://www.bibliocommons.com

Page 38: Mobile Website Design for Libraries
Page 39: Mobile Website Design for Libraries
Page 40: Mobile Website Design for Libraries
Page 41: Mobile Website Design for Libraries
Page 42: Mobile Website Design for Libraries
Page 43: Mobile Website Design for Libraries
Page 44: Mobile Website Design for Libraries
Page 45: Mobile Website Design for Libraries
Page 46: Mobile Website Design for Libraries
Page 47: Mobile Website Design for Libraries
Page 48: Mobile Website Design for Libraries

But can we do better?

Page 49: Mobile Website Design for Libraries

What are other trends in mobile webpage design?

Page 50: Mobile Website Design for Libraries
Page 51: Mobile Website Design for Libraries
Page 52: Mobile Website Design for Libraries
Page 53: Mobile Website Design for Libraries
Page 54: Mobile Website Design for Libraries
Page 55: Mobile Website Design for Libraries

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
Page 57: Mobile Website Design for Libraries
Page 58: Mobile Website Design for Libraries
Page 59: Mobile Website Design for Libraries
Page 60: Mobile Website Design for Libraries

Other possibilities

Page 61: Mobile Website Design for Libraries

Gamification

http://gamesandlibraries.wetpaint.com/page/2011+Games+and+public+libraries

Page 62: Mobile Website Design for Libraries

Gamification

http://gamification.co/2011/04/05/find-the-future-at-the-new-york-public-library/

Page 63: Mobile Website Design for Libraries
Page 64: Mobile Website Design for Libraries
Page 65: Mobile Website Design for Libraries
Page 66: Mobile Website Design for Libraries
Page 67: Mobile Website Design for Libraries
Page 68: Mobile Website Design for Libraries
Page 69: Mobile Website Design for Libraries

What do you think?

Page 70: Mobile Website Design for Libraries

Some technical stuff (Thanks Brian)

Auto-Detect & Redirect Options

Testing on multiple devices

Tracking statistics

Page 71: Mobile Website Design for Libraries

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

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

Auto-Detect & Redirect

But just in case…

Failsafe Link

Page 74: Mobile Website Design for Libraries

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

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

Tracking Usage Stats: Overall Use

Page 77: Mobile Website Design for Libraries

Tracking Usage Stats: Location

Page 78: Mobile Website Design for Libraries

Tracking Usage Stats: Devices

Page 79: Mobile Website Design for Libraries

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 80: Mobile Website Design for Libraries

Online Newsstand Project

http://www.theonlinenewsstand.org

Page 81: Mobile Website Design for Libraries
Page 82: Mobile Website Design for Libraries
Page 83: Mobile Website Design for Libraries
Page 84: Mobile Website Design for Libraries

Participating Libraries

Page 85: Mobile Website Design for Libraries

Participating Libraries

Page 86: Mobile Website Design for Libraries

Online Newsstand Project - Gale

Page 87: Mobile Website Design for Libraries

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