Pre-conference delivered at Code4Lib 2014. This structured hackfest will give attendees an opportunity to explore methods to create responsive mobile apps using the Bootstrap framework and a set of APIs for accessing library data. We will start with an API template for creating space-based mobile tools that draw from work coming out of the IMLS funded Student/Library Collaborative grant. Available APIs will include a room reservation template and codebase for implementing at any campus and the set of Minrva catalog APIs generating JSON. Hosts will give a brief report of a study on student hacking projects and interests in mobile library apps that are the basis for the templates utilized in this Hackfest. By the end of the pre-conference attendees will have a sample responsive mobile web app in Bootstrap 3 to bring back to their campus which can plug into their site-based content.

1. Code4Lib 2014
Responsive Design Hackfest
Monday, March 24th, 2014
Jim “Lazer” Hahn
David Ward

2. Schedule
1. Overview
2. Hands-on with responsive templates
3. Small Group App Design
4. Presentations
5. Debrief

3. Overview
Goals
• Investigate responsive web/mobile app design
strategies
• Develop experience retrieving and displaying library
API data
• Discuss methodologies for student/patron-led library
application design methodologies

4. Overview
Background
• Funded by 2 year IMLS National Leadership Grant
• Experimented with multiple strategies for student-
driven library application design
• Focused on identifying library data patrons consider
important
• Created design architectures that valued portability
and reusability of application components

5. Minrva

6. Hands-on
• Templates uploaded to Box
• https://app.box.com/s/fxsfrsezvc29n1f7gdzu
• Technologies used:
– Bootstrap 3
– jQuery 1.11.0
– JSONP API data powered by Java backend

7. Hands-on
Responsive grid column layout scheme
• Write once, deploy everywhere
• Think mobile first
• Design to add, not cut
• Before you code:
– What are the primary functions of app?
– What is the app workflow for each function?
– What is the product or outcome of each function?

8. Hands-on
Suggest Activities:
• Experiment with dynamically retrieving library data
• Update visual display based on user input
• Show/hide items based on screen width
– Extra small devices Phones (<768px)
– Small devices Tablets (≥768px)
– Medium devices Desktops (≥992px)
– Large devices Desktops (≥1200px)

9. University of Toronto Catalogue – Desktop
http://search.library.utoronto.ca/ 03/10/2014

10. University of Toronto Catalogue – Mobile
http://search.library.utoronto.ca/ 03/10/2014

11. Grand Valley State University Libraries – Desktop
http://www.gvsu.edu/library/ 03/11/2014

12. Grand Valley State University Libraries – Mobile
http://www.gvsu.edu/library/ 03/11/2014

13. Duke University Libraries – Desktop
http://library.duke.edu/ 03/11/2014

14. Duke University Libraries – Mobile
http://library.duke.edu/ 03/11/2014

15. Minrva Web Services

16. API Documentation
• http://minrvaproject.org/services.php
• All feeds output from this path:
Minrva-dev.library.illinois.edu/api/

17. Sample Response from
api/tech/list

18. Small Group App Design
• Code Camp Methodology
• Discuss app ideas with attendees
• Form small groups based on interest
• Code!

19. Small Group App Design

20. Small Group App Design

21. • Events
• Community – class
member chat

22. • Scanner
enhancements
• Connect to non-
library items (e.g.
bookstores)

23. • Four Squarization of
library experience
• Operational unit is
course, not library
• Connect students
within same courses

24. • Rate and review
loanable technology
• Ask for feedback at
critical junctures like
discharging,
renewing
• “Noise-o-Meter”

25. • Personalization –
user search history,
favorite library, etc.
• Availability of
physical resources
(e.g. computers)

26. • Push availability
updates
• Ratings
• User Interface

27. API Info – Part 1
Minrva Services
• Docs: http://minrvaproject.org/services_catalog.php
API base URI:
• minrva-dev.library.illinois.edu/api/
Rooms Availability
• Docs: http://dunatis.grainger.uiuc.edu/rooms
• API base URI: http://minrva-
dev.library.illinois.edu:8080/roomreserve/roomreserve

28. API Info – Part 2
Study Buddy
• Docs: http://dunatis.grainger.uiuc.edu:8080/sb/
• API base URI: http://dunatis.grainger.uiuc.edu:8080/sb/api/

29. Box documents
https://app.box.com/s/fxsfrsezvc29n1f7gdzu

30. Presentations

31. Discussion and Questions
• Jim Hahn jimhahn@illinois.edu
• David Ward dh-ward@illinois.edu