The Library on the Small Screen
Delivering Library Resources and Services to
Mobile Users
Cynthia Ramlo
User Experience Designer
User Experience and Digital Media Services
April 9, 2014
The Library on the Small Screen
March 12, 2016
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.
The Library on the Small Screen
March 12, 2016
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?
The Library on the Small Screen
March 12, 2016
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
The Library on the Small Screen
March 12, 2016
IU Bloomington Gateway Website
2011
2012
2013
11,633,955 8,643,594 7,178,554
nonmobile
-12.53%
-25.70%
-16.95%
372,739
562,099
794,474
mobile
+120.43% +50.80% +41.34%
The Library on the Small Screen
March 12, 2016
The Library on the Small Screen
March 12, 2016
The Mobile Experience Patrons Want
The Library on the Small Screen
March 12, 2016
The Library on the Small Screen
March 12, 2016
3 Approaches to Mobile Design
• Mobile Apps
• Adaptive Design
• Responsive Design
The 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
March 12, 2016
The Library on the Small Screen
March 12, 2016
The Library on the Small Screen
mobile.iu.edu
IU Library mobile usage increased
300% with inclusion in IU Mobile
March 12, 2016
The Library on the Small Screen
March 12, 2016
Adaptive Design/Delivery
• With adaptive design the server detects
the device and then delivers the HTML
and CSS based on the detected device
The Library on the Small Screen
March 12, 2016
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
The Library on the Small Screen
March 12, 2016
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?
The Library on the Small Screen
March 12, 2016
The solution lies in responsive design.
The Library on the Small Screen
March 12, 2016
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).
Customize header: View menu/Header and Footer
March 12, 2016
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.
Customize header: View menu/Header and Footer
March 12, 2016
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.
The Library on the Small Screen
March 12, 2016
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”
The Library on the Small Screen
March 12, 2016
How does it work?
• Boston Globe
• Slate
• University of Michigan
• Virginia Commonwealth University Library
The 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.
March 12, 2016
The Library on the Small Screen
Twitter Bootstrap
March 12, 2016
The Library on the Small Screen
March 12, 2016
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?
The Library on the Small Screen
Mobile Checkout
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.
March 12, 2016
Customize header: View menu/Header and Footer
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.
March 12, 2016
The Library on the Small Screen
Acknowledgements
Chanitra Bishop
Juliet Hardesty
Courtney McDonald
Bob Molnar
Garett Montanez
Mark Notess
March 12, 2016
The Library on the Small Screen
March 12, 2016
Resources
• http://www.usability.gov/getinvolved/blog/2013/08/responsive-designone-site-fits-all.html
• http://alistapart.com/article/responsiveweb-design, by Ethan Marcotte
5/25/2010