The document outlines a schedule and goals for the Code4Lib 2014 Responsive Design Hackfest focused on investigating and developing responsive web/mobile app design strategies for library applications. It emphasizes hands-on activities using various technologies and methodologies to create student-driven library applications while encouraging group discussions and coding sessions. Additionally, it provides resources for accessing library data and specific APIs to facilitate development.

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