1. Delivering Library Resources and Services to Mobile Users The Library on the Small Screen Cynthia Ramlo User Experience Designer User Experience and Digital Media Services April 9, 2014

2. 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. September 3, 2015The Library on the Small Screen

3. 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? September 3, 2015The Library on the Small Screen

4. 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 September 3, 2015The Library on the Small Screen

5. September 3, 2015The Library on the Small Screen IU Bloomington Gateway Website 201120122013 non- mobile 11,633,9558,643,5947,178,554 -12.53%-25.70%-16.95% mobile 372,739562,099794,474 +120.43%+50.80%+41.34%

6. September 3, 2015The Library on the Small Screen

7. The Mobile Experience Patrons Want September 3, 2015The Library on the Small Screen

8. September 3, 2015The Library on the Small Screen

9. 3 Approaches to Mobile Design Mobile Apps Adaptive Design Responsive Design September 3, 2015The Library on the Small Screen

10. 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 September 3, 2015The Library on the Small Screen

11. September 3, 2015The Library on the Small Screen

12. mobile.iu.edu September 3, 2015The Library on the Small Screen IU Library mobile usage increased 300% with inclusion in IU Mobile

13. Adaptive Design/Delivery With adaptive design the server detects the device and then delivers the HTML and CSS based on the detected device September 3, 2015The Library on the Small Screen

14. 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 September 3, 2015The Library on the Small Screen

15. 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? September 3, 2015The Library on the Small Screen

16. The solution lies in responsive design. September 3, 2015The Library on the Small Screen

17. 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). September 3, 2015The Library on the Small Screen

18. 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. September 3, 2015Customize header: View menu/Header and Footer

19. 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. September 3, 2015Customize header: View menu/Header and Footer

20. 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”A Dao of Web Design September 3, 2015The Library on the Small Screen

21. How does it work? Boston Globe Slate University of Michigan Virginia Commonwealth University Library September 3, 2015The Library on the Small Screen

22. 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. September 3, 2015The Library on the Small Screen

23. Twitter Bootstrap September 3, 2015The Library on the Small Screen

24. 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? September 3, 2015The Library on the Small Screen

25. 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. September 3, 2015The Library on the Small Screen Mobile Checkout

26. 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. September 3, 2015Customize header: View menu/Header and Footer

27. Acknowledgements Chanitra Bishop Juliet Hardesty Courtney McDonald Bob Molnar Garett Montanez Mark Notess September 3, 2015The Library on the Small Screen

28. Resources http://www.usability.gov/get- involved/blog/2013/08/responsive-design- one-site-fits-all.htmlhttp://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/2010http://alistapart.com/article/responsive- web-design September 3, 2015The Library on the Small Screen