Delivering Library Resources and Services to Mobile Users

The Library on the Small Screen

Cynthia RamloUser Experience Designer

User Experience and Digital Media Services

April 9, 2014

Today’s library patrons are increasingly using mobile devices to access library resources and services. This presentation will explore IU’s mobile solution tools and directions as well as looking at examples from other libraries at other institutions. Together, we will consider ways the Libraries can better serve patrons through taking advantage of current and emerging mobile opportunities.

April 19, 2023The Library on the Small Screen

What do our users want?

• IU library patrons increasingly expect to access our information through a multitude of devices.

• New technologies, such as smartphones and tablets, provide an opportunity to provide increased access.

• How to ensure that content can be accessed conveniently and provide a positive experience – regardless of the device and size of the screen used?

April 19, 2023The Library on the Small Screen

Background

By January 2014•90% of American adults have a cell phone•58% of American adults have a smartphone•32% of American adults own an e-reader•42% of American adults own a tablet computer

Pew Research Internet Project

April 19, 2023The Library on the Small Screen

April 19, 2023The Library on the Small Screen

IU Bloomington Gateway Website 2011 2012 2013

non-mobile

11,633,955 8,643,594 7,178,554

-12.53% -25.70% -16.95%

mobile372,739 562,099 794,474

+120.43% +50.80% +41.34%

April 19, 2023The Library on the Small Screen

The Mobile Experience Patrons Want

April 19, 2023The Library on the Small Screen

April 19, 2023The Library on the Small Screen

3 Approaches to Mobile Design

• Mobile Apps• Adaptive Design• Responsive Design

April 19, 2023The Library on the Small Screen

Mobile Library Apps

“We’ve created the mobile app because it allows us to better connect our audiences with campus resources,” Dolan said. “Putting all of these items in a single location helps students and others collect information more easily and connect with the university.

MSU's new free mobile app provides easy access to campus and area resources

February 6, 2014 -- MSU News Service

April 19, 2023The Library on the Small Screen

April 19, 2023The Library on the Small Screen

mobile.iu.edu

April 19, 2023The Library on the Small Screen

IU Library mobile usage increased 300% with inclusion in IU Mobile

Adaptive Design/Delivery

• With adaptive design the server detects the device and then delivers the HTML and CSS based on the detected device

April 19, 2023The Library on the Small Screen

Adaptive Design/Delivery

• The server hosting the website detects the devices making requests to it, and uses this information to deliver different batches of HTML and CSS code based on the characteristics of the device that have been detected.

• Often used by businesses and seen as a way to provide more optimal e-commerce interactions for mobile devices

April 19, 2023The Library on the Small Screen

Challenge

• Attempting to create and maintain multiple versions of your site to accommodate each device can be time consuming, resource intensive, and unsustainable as a long-term solution.

• So how do you give people a comparable user experience regardless of the device they use to access your site?

April 19, 2023The Library on the Small Screen

The solution lies in responsive design.

April 19, 2023The Library on the Small Screen

What is it?

• Responsive Web Design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

April 19, 2023The Library on the Small Screen

How is it different?

• Responsive design is a technique in which the same HTML code is delivered to each device, but tweaks to CSS (which determines the layout of a web page) allow it to adjust to the screen’s form factor.

• Advantage of responsive design is that a single codebase for a website can serve both mobile and desktop users. 

April 19, 2023Customize header: View menu/Header and Footer

Responsive vs Adaptive

• With responsive design the user screen size determines the layout . Responsive design is based upon fluid grid designs.

• With adaptive design the server delivers HTML and CSS depending upon the detected device.

April 19, 2023Customize header: View menu/Header and Footer

Design Flexibility

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.‘

John Allsopp, “A Dao of Web Design”

April 19, 2023The Library on the Small Screen

How does it work?

• Boston Globe

• Slate

• University of Michigan

• Virginia Commonwealth University Library

April 19, 2023The Library on the Small Screen

Avalon Media System

• The Avalon Media System is an open source system for managing and providing access to large collections of digital audio and video.

• Jointly developed by IU & Northwestern 

• Responsive from the start.

April 19, 2023The Library on the Small Screen

Twitter Bootstrap

April 19, 2023The Library on the Small Screen

Future Possibilities

• What possibilities does mobile open up for services that you use or provide?

• How well are these services delivered today for mobile users?

• What are new directions for libraries?

April 19, 2023The Library on the Small Screen

A mobile checkout option turns a cell phone camera into a barcode scanner. Patrons can scan the Champaign Public Library barcode on items as they pull them from the shelves, including items on hold. Checkout is completed with a brief, self-service stop at a new mobile checkout station, near the checkout desk.

A related feature helps patrons see if books can be borrowed rather than purchased. The app’s ISBN barcode scanner can scan any book at a bookstore or elsewhere, then check to see if it’s available at the library. If it is, patrons can use their device to request the item on the spot.

April 19, 2023The Library on the Small Screen

Mobile Checkout

QR Codes

Bournemouth University

During the 2011-12 academic year, QR codes linking to relevant ebooks on the library catalogue are being shelved alongside the printed materials. The search terms used and the locations that the blocks are being shelved at are determined by reading lists for the unit.

April 19, 2023Customize header: View menu/Header and Footer

Acknowledgements

Chanitra Bishop

Juliet Hardesty

Courtney McDonald

Bob Molnar

Garett Montanez

Mark Notess

April 19, 2023The Library on the Small Screen

Resources

• http://www.usability.gov/get-involved/blog/2013/08/responsive-design-one-site-fits-all.html

• http://alistapart.com/article/responsive-web-design, by Ethan Marcotte 5/25/2010

April 19, 2023The Library on the Small Screen