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
University of Connecticut Libraries Mobile Web
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
University of Connecticut Libraries Mobile Web
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
University of Connecticut Libraries Mobile Web
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
University of Connecticut Libraries Mobile Web
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
University of Connecticut Libraries Mobile Web
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
University of Connecticut Libraries Mobile Web
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…
University of Connecticut Libraries Mobile Web
94/23/2012
Source: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
University of Connecticut Libraries Mobile Web
104/23/2012Source: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
University of Connecticut Libraries Mobile Web
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
University of Connecticut Libraries Mobile Web
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
University of Connecticut Libraries Mobile Web
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
University of Connecticut Libraries Mobile Web
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.”
University of Connecticut Libraries Mobile Web
154/23/2012
2010 Example—Montana State University Libraries
University of Connecticut Libraries Mobile Web
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
University of Connecticut Libraries Mobile Web
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
University of Connecticut Libraries Mobile Web
18
Safari / iPhone; 2333; 45%
Safari / iPod; 1025; 20%
Safari / Android; 712; 14%
Safari / iPad; 437; 8%
BlackBerry9000 / BlackBerry; 96; 2%
BlackBerry9530 / BlackBerry; 89; 2%
Mozilla Compatible Agent / iPhone; 89; 2%
BlackBerry9630 / BlackBerry; 81; 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
University of Connecticut Libraries Mobile Web
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
BlackBerry8520 RIM BlackBerry 8520 Curve; 1
BlackBerry9330 RIM BlackBerry 9330 Curve; 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
University of Connecticut Libraries Mobile Web
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
University of Connecticut Libraries Mobile Web
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
University of Connecticut Libraries Mobile Web
224/23/2012
UCL Mobile, October 2010Draft 1
University of Connecticut Libraries Mobile Web
234/23/2012
UCL Mobile, April 2012
University of Connecticut Libraries Mobile Web
244/23/2012
UCL Mobile, October 2010 Draft 2
University of Connecticut Libraries Mobile Web
254/23/2012
PC Availability v.1
University of Connecticut Libraries Mobile Web
264/23/2012
PC Availability v.2
University of Connecticut Libraries Mobile Web
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
University of Connecticut Libraries Mobile Web
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?
University of Connecticut Libraries Mobile Web
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?
University of Connecticut Libraries Mobile Web
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
University of Connecticut Libraries Mobile Web
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
University of Connecticut Libraries Mobile Web
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