Dave Bretthauer University of Connecticut Libraries NEASIS&T: Going Mobile: Library Websites, Services, and Apps on Mobile Devices April 23, 2012

Mobile Web at UConn Libraries

Dave BretthauerUniversity of Connecticut Libraries

NEASIS&T: Going Mobile: Library Websites, Services, and Apps on Mobile DevicesApril 23, 2012

University of Connecticut Libraries Mobile Web

2

Reorganized in 2009, per new Academic Plan Emphasis on meeting user needs by group

◦ Undergraduate◦ Graduate◦ Faculty◦ Public

Planning Team manages a process for Strategic Goals (“SPGs”), including potentially significant funding

UConn Brand managed by University Communications

4/23/2012

About Uconn & Libraries


3

Member of Digital Programs Team◦ Websites/Web Presence◦ Local & BLC Digitization◦ Application Development since September 2010◦ Institutional Repository◦ Second Gen Digital Library System—Fedora Commons

Librarian, not an Applications Developer Not part of IT Emphasize usability & incremental improvement Manage and/or support 24 websites:

◦ First generation individual digital collections◦ Project and service websites◦ Application websites◦ Individual Library websites◦ Some not UConn-branded

4/23/2012

About Me


4

Redesign rolled out in January 2009 10,000+ HTML pages ~3,000 ColdFusion pages Managed with Dreamweaver, sort of No Content Management System yet Sparse documentation No mobile presence Google Analytics on many pages De-emphasizing WebVoyage Catalog

Interface

4/23/2012

UConn Libraries Website


5

Need: To provide access to library information resources to users with mobile devices, any time, any place.

Goal: To develop a mobile web strategy for the Libraries, identifying services and the hardware, software, staffing, training, and other resources required, and piloting a mobile web presence that provides those identified services.

Matched to specific organizational goals & strategies Intended audiences

◦ Undergraduate Students◦ Graduate Students◦ Faculty/Researchers◦ University Staff◦ Library Staff◦ Community Users

Budgeted Expenses◦ 8GB iPod Touch: $258.00◦ Library Anywhere by LibraryThing:

1 year subscription: $2,200.00

4/23/2012

SPG Proposal, March 2010


6

Informal Student Survey Undergraduate Education Team’s Technology

Survey Training

◦ CSS◦ Javascript & Advanced Javascript

Conferences:◦ CNI◦ Handheld Librarian 1, 2, & 3

Labstats Server (PC Availability) WorldCat Local

4/23/2012

Other Resources Leveraged


7

Survey Students & Analyze Results Identify Content Identify Technologies

◦ Select Technology◦ Obtain Training

Port Content◦ Develop Features and Applications

Usability Test Site Improve Site Release Site Promote Site Evaluate Usage Revise and Improve Site

4/23/2012

Initial Project Plan


8

1. Determine User Functionality Preferences1. Cull UED Technology Survey Results

1. User Devices2. Desired Functionality

2. Analyze Server Logs and Google Analytics3. Insights From Conferences and Webinars

2. Evaluate Technology Options1. Investigate, Experiment, Test, Repeat, Repeat, Repeat!2. Select 3. Port Content4. Develop New Features

3. Create Draft/Test Presences4. Hire Applications Developer (who starts at Step 2)5. Test & Revise6. Roll out initial site7. Discuss Mobile-Friendly Site Development with Other Campus

Webmasters & Developers8. Add Functionality as it is developed (locally or by vendors)9. Repeat

4/23/2012

Revised Project Plan, Thus Far…


94/23/2012

Source: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu


104/23/2012Source: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu


11

Device-Specific Applications◦ Development Kits and Device Emulators:

BlackBerry iOS Palm Pre Etc

◦ Issues: Device-specific approach is resource-intensive Required languages not widely used Cost for iOS and certification process

Mobile-friendly CSS for existing website◦ “Write the page once, it works everywhere”◦ Issues:

“media=handheld” tag was not consistently used by mobile browsers Current website has a lot of content extraneous to mobile users (~11,970

pages) Current website does not use CSS consistently Web browsers in varying states of HTML5 and CSS3 readiness (Chrome high,

IE<9 terrible)

4/23/2012

Technology Options Reviewed


12

Flash◦ Explicitly not supported by Apple; not well supported by BlackBerry◦ HTML5 offers real alternative

Javascript/CSS “Development Frameworks” with separate mobile-friendly web pages◦ Most commonly-used approach by academic/research libraries; offer app-like

experience with the least effort MIT Framework iUi (then sponsored by Google) (Mobi) (PhoneGap) University of Montana Libraries UNC Libraries

◦ Issues: New options were emerging Separate pages to maintain from primary website—wouldn’t scale to entire site’s

content Frameworks in varying stages of development, support, and documentation Each framework had its quirks

4/23/2012

Technology Options Reviewed


13

Frameworks:◦ jQuery mobile◦ HTML 5 Mobile Boilerplate◦ Sencha touch

Emerging Best Practices◦ Responsive Web Design—CSS3 Media Queries and

defined breakpointsSee http://nd.edu, http://www.ucsd.edu

University of Connecticut Mobile Branding Standards

4/23/2012

What Didn’t Exist Yet

http://nd.edu/

http://www.ucsd.edu/


144/23/2012

2010 Example—MIT Libraries

“The site currently only works for iPhones. In the future, we plan to create versions optimized for other mobile phones.”


154/23/2012

2010 Example—Montana State University Libraries


16

Which Library Services They Said They Would Use from Mobile Devices in 2010

Which Mobile Devices They Used to Access www.lib.uconn.edu, in 2010 and now

How Frequently They’ve Been Accessing www.lib.uconn.edu Using These Devices, in 2010 and now

4/23/2012

A Bit About Our Users

http://www.lib.uconn.edu/

http://www.lib.uconn.edu/


17

Percentage of Undergraduates Fairly Likely, Likely, or Extremely Likely to...Year 1 2 3 4

Ask a Librarian a Question 34.80 29.30 37.40 34.60

Send a Call Number from the Catalog 35.20 31.90 37.20 35.40

Receive Renewal or Overdue Notices 60.30 61.5 48.7 61

Renew Library Materials 57.00 59.3 47.4 60.3

4/23/2012

Library Services via Mobile Phone

Source: 2010 UConn Libraries Undergraduate Technology Survey


18

Safari / iPhone; 2333; 45%

Safari / iPod; 1025; 20%

Safari / Android; 712; 14%

Safari / iPad; 437; 8%

BlackBerry9000 / BlackBerry; 96; 2%


Mozilla Compatible Agent / iPhone; 89; 2%


Mozilla Compatible Agent / iPod; 54; 1%BlackBerry8530 / BlackBerry; 50; 1%BlackBerry9700 / BlackBerry; 46; 1%BlackBerry9650 / BlackBerry; 27; 1%

Mozilla Compatible Agent / iPad; 27; 1%Safari / SymbianOS; 23; 0%Blazer / PalmOS; 19; 0%Internet Explorer / Windows; 19; 0%NetFront / Sony; 15; 0%BlackBerry9550 / BlackBerry; 11; 0%Firefox / Windows; 11; 0%Mozilla / Danger Hiptop; 11; 0%Opera / Windows; 11; 0%LGE-VM510 NetFront / LGE; 7; 0%

Mozilla Compatible Agent / SymbianOS; 7; 0%Opera / Samsung; 7; 0%Opera Mini / iPhone; 7; 0%BlackBerry8520 / BlackBerry; 3; 0%BlackBerry8900 / BlackBerry; 3; 0%LG-GR500 / LG; 3; 0%SAMSUNG-SGH-I637 / Windows; 3; 0%SAMSUNG-SGH-i780 / Windows; 3; 0%

Mobile Device Visits to www.lib.uconn.edu by Device and Browser, July 15, 2009-October

15, 2010

Safari / iPhone Safari / iPodSafari / Android Safari / iPadBlackBerry9000 / BlackBerry BlackBerry9530 / BlackBerryMozilla Compatible Agent / iPhone BlackBerry9630 / BlackBerryMozilla Compatible Agent / iPod BlackBerry8530 / BlackBerryBlackBerry9700 / BlackBerry BlackBerry9650 / BlackBerryMozilla Compatible Agent / iPad Safari / SymbianOSBlazer / PalmOS Internet Explorer / WindowsNetFront / Sony BlackBerry9550 / BlackBerryFirefox / Windows Mozilla / Danger HiptopOpera / Windows LGE-VM510 NetFront / LGEMozilla Compatible Agent / SymbianOS

Opera / Samsung

Opera Mini / iPhone BlackBerry8520 / BlackBerryBlackBerry8900 / BlackBerry LG-GR500 / LGSAMSUNG-SGH-I637 / Windows SAMSUNG-SGH-i780 / Windows

4/23/2012


194/23/2012

Safari Apple iPad; 2,076

Safari Apple iPhone; 1,876

Mozilla Compatible Agent Apple iPhone; 739

Safari Apple iPod Touch; 256

Android Browser (not set); 191

Android Browser SonyEricsson LT15i Xperia Arc; 136

Mozilla Compatible Agent Apple iPod Touch; 127

Safari (not set); 81

Mozilla Compatible Agent Apple iPad; 67

Android Browser HTC EVO 4G; 57

Android Browser HTC ADR6350 Droid Incredible 2; 54

Android Browser Motorola DroidX; 54

Android Browser HTC Inspire; 39

Android Browser Asus Eee Pad Transformer TF101; 35

Android Browser Verizon Droid2; 34

Android Browser Samsung SC-02B GALAXY S; 31

Android Browser HTC ADR6300 Incredible; 29

Android Browser LG VS660 Vor-tex; 29

Android Browser Motorola xt875 Droid Bionic; 27

Android Browser Motorola Droid 2; 26

Android Browser Verizon Droid; 26

Android Browser Fujitsu T-01C REGZA Phone T-01C; 25

Android Browser HTC ADR6400L Thun-derbolt 4G; 23Firefox (not set); 22 Android Browser LG Ally; 22Android Browser Motorola Droid X2; 21Android Browser Motorola MB860 Atrix; 18Android Browser Motorola Xoom; 18Internet Explorer (not set); 15

Android Browser HTC 001HT Desire HD SoftBank; 15Android Browser LG VM670 Optimus V; 15

Android Browser Samsung SGH-T959 Vibrant; 14Opera Mini (not set); 13

Android Browser Samsung SPH-D700 Epic 4G; 13Android Browser HTC G2 HTC Sappire; 11Android Browser T-Mobile myTouch4G; 11

Android Browser LG VS910 4G Revolution; 10

Android Browser HTC APA7373KT EVO Shift 4G; 7Android Browser Samsung SGH-I997; 7

BlackBerry8530 RIM BlackBerry 8530 Curve; 6

Android Browser Samsung GT-P7510 Galaxy Tab 10.1; 6

Android Browser Samsung SCH-I500 Fas-cinate; 6Android Browser HTC PC36100 EVO 4G; 5

Android Browser Samsung GT-P1000 Galaxy Tab; 5

Android Browser Samsung SGH-I897 Galaxy S Captivate; 5Android Browser Acer A500 Picasso; 3Android Browser HTC Espresso; 3Nokia5233 Nokia; 3

Android Browser Samsung SPH-M820-BST Galaxy Prevail; 3Android Browser Samsung SPH-M920; 3Android Browser Samsung SWH-M110S; 3Mozilla Compatible Agent (not set); 2Android Browser Casio C771 G'zOne; 2Android Browser Dell Streak 7 Streak 7; 2Android Browser HTC A6366 Aria; 2Android Browser HTC Desire; 2Android Browser HTC Desire S; 2 Android Browser LG LS670; 2Android Browser LG LW690 Optimus C; 2Android Browser LG MS910 Bryce; 2

Android Browser Logic PD LogicPD Zoom2 Barnes & Noble Nook Color; 2Android Browser Motorola MB508 Sage; 2Android Browser Motorola WX445 Ciena; 2Safari Nokia C3-00; 2Mozilla Compatible Agent Nokia N8-00 N8; 2

Android Browser Pantech IM-A710K Sky Vega Xpress; 2

BlackBerry9630 RIM BlackBerry 9630 Tour; 2

Android Browser Samsung SCH-I400 Con-tinuum; 2

Android Browser Samsung SGH-T839 T-Mobile Sidekick 4G; 2

Android Browser Samsung SHW-M250K GALAXY S II (KT); 2

Android Browser Samsung SPH-M900 Moment; 2

Android Browser Samsung SPH-M910 In-tercept; 2BlackBerry8900 (not set); 1Nokia7210Supernova (not set); 1Opera (not set); 1

Android Browser Google Nexus One HTC Nexus One; 1

Android Browser Google Nexus S Samsung Nexus S; 1Android Browser HTC Desire ADR6200; 1Android Browser HTC Desire HD; 1Android Browser HTC Glacier; 1Android Browser HTC Hero; 1

Android Browser Huawei Comet T-Mobile Comet; 1Android Browser LG MS690 Optimus M; 1Android Browser LG P509 Optimus T; 1Android Browser LG P999 T-Mobile G2x; 1Android Browser LG US855 Optimus Black; 1Android Browser Motorola MB855 Photon; 1Android Browser Motorola Milestone; 1Nokia2600c-2 Nokia 2600c; 1Safari Nokia 6120c; 1Mozilla Compatible Agent Nokia C6-00; 1

Mozilla Compatible Agent Nokia E5-00 Mys-tic; 1Safari Nokia E71x; 1Safari Nokia N8-00 N8; 1Mozilla Compatible Agent Nokia N97; 1NokiaX2-01 Nokia X2-01; 1



Android Browser Samsung GT-i5500 Galaxy 5; 1

Android Browser Samsung GT-I9100 Galaxy S II; 1

Android Browser Samsung GT-P7500 Galaxy Tab; 1Android Browser Samsung GT-S5570L; 1

Android Browser Sharp IS12SH 3D AQUOS PHONE IS12SH for KDDI au; 1NetFront SonyEricsson W200a; 1

Android Browser SonyEricsson X10i Xperia X10; 1Android Browser T-Mobile myTouch 3G; 1Android Browser Velocity Micro Cruz T301; 1

Mobile Device Visits to www.lib.uconn.edu by Device and Browser, December 15, 2011-March

15, 2012

Safari Apple iPadSafari Apple iPhoneMozilla Compatible Agent Apple iPhoneSafari Apple iPod TouchAndroid Browser (not set)Android Browser SonyEricsson LT15i Xperia ArcMozilla Compatible Agent Apple iPod TouchSafari (not set)Mozilla Compatible Agent Apple iPadAndroid Browser HTC EVO 4GAndroid Browser HTC ADR6350 Droid Incredible 2Android Browser Motorola DroidXAndroid Browser HTC InspireAndroid Browser Asus Eee Pad Transformer TF101Android Browser Verizon Droid2Android Browser Samsung SC-02B GALAXY SAndroid Browser HTC ADR6300 IncredibleAndroid Browser LG VS660 VortexAndroid Browser Motorola xt875 Droid BionicAndroid Browser Motorola Droid 2Android Browser Verizon DroidAndroid Browser Fujitsu T-01C REGZA Phone T-01CAndroid Browser HTC ADR6400L Thun-derbolt 4GFirefox (not set)Android Browser LG AllyAndroid Browser Motorola Droid X2Android Browser Motorola MB860 Atrix


20

Total visits; 2197908; 100%

Mobile visits; 3792; 0%

Total visits to www.lib.uconn.edu July 15-2009 – October 15, 2010

4/23/2012

Mobile Use as a Percentage of Total Use of UCL Homepage


214/23/2012

Mobile Use as a Percentage of Total Use of UCL Homepage

Total visits 325,554, 98.08%

Mobile 6,379, 1.92%

Total visits to www.lib.uconn.edu December 15, 2011-March 15, 2012


224/23/2012

UCL Mobile, October 2010Draft 1


234/23/2012

UCL Mobile, April 2012


244/23/2012

UCL Mobile, October 2010 Draft 2


254/23/2012

PC Availability v.1


264/23/2012

PC Availability v.2


27

November 2010:◦ Invited University Webmaster/Web Developer community to

informal meetings, with goal of sharing experience and unifying direction

◦ Gathered user feedback and staff feedback◦ After initial jQuery mobile interest, University Communications

initial effort used HTML 5 Mobile Template Late 2011/Early 2012:

◦ Central IT set focus on Mobile Apps after one failed attemptCurrent Strategy: Senta TouchWebsitePhoneGapMobile App (not Native, such as Objective C, because of resource constraints)

◦ University Mobile Steering Committee formed◦ University Mobile Standards Committee formed to extend

current branding standard

4/23/2012

Continuing Steps


28

Added basic mobile detection/redirection script

PC Availability Application has been rewritten (using jQuery Mobile)

Features/Services Added: ◦ Summon◦ Libguides ◦ Mobile-Friendly E-Resources

4/23/2012

What Has Changed To Our Site?


29

University Mobile Branding Standard Finalization

Testing Sencha Touch Framework Library Hours Application More Google Analytics use m.lib.uconn.edu? Content Management System testing,

selection, and deployment

4/23/2012

What’s Next?


30

Use a mobile device yourself Look at what is being done elsewhere Mobile Website ≠ Native Mobile App Web ≠ Desktop

◦ While a tablet can show a desktop website, interaction is by touch, not mouse

◦ Consider your content in “mobile first” context◦ Minimize keyboard entry◦ Minimize bandwidth usage with slow cellular

connections in mind Network with other web people in your own

college/university

4/23/2012

Lessons Learned


31

Unless you’re a professional developer, focus on Mobile Web first. That content can be consumed/presented by Native Mobile Apps, which will likely be used more

Look for users’ instant needs to satisfy Leverage your available tools: Springshare

(LibGuides), CMS If mobile isn’t strategic now, it will be, so… Experiment even if your organization isn’t Test on as many mobile platforms as you can, but if

you only have one, use iOS. Your users probably are Using Google Analytics to get to know your users

4/23/2012

Friendly Suggestions/Advice


32

Framework examples: http://html5boilerplate.com/mobile http://jquerymobile.com/ http://phonegap.com/ http://www.iui-js.org/ http://www.sencha.com/

Twitter Sources: @designmodo @designshack @IATV @mathias @MsrUsability @netmag @nettuts @paul_irish @sixrevisions @smashingmag @uxmatters

4/23/2012

Resources

http://html5boilerplate.com/mobile

http://jquerymobile.com/

http://phonegap.com/

http://www.iui-js.org/

http://www.sencha.com/


334/23/2012

Thank You!

Questions?

[email protected]

Documents

Dave Bretthauer University of Connecticut Libraries NEASIS&T: Going Mobile: Library Websites, Services, and Apps on Mobile Devices April 23, 2012