responsive hackfest: code4lib2014 pre-conference

Code4Lib 2014Responsive Design Hackfest

Monday, March 24th, 2014

Jim “Lazer” HahnDavid Ward

Schedule1. Overview2. Hands-on with responsive templates 3. Small Group App Design4. Presentations5. Debrief

OverviewGoals• 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

OverviewBackground• 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

Minrva

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

Hands-onResponsive 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?

Hands-onSuggest 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)

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

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

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

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

Duke University Libraries – Desktophttp://library.duke.edu/ 03/11/2014

Duke University Libraries – Mobilehttp://library.duke.edu/ 03/11/2014

Minrva Web Services

API Documentation• http://minrvaproject.org/services.php

• All feeds output from this path:Minrva-dev.library.illinois.edu/api/

Sample Response from api/tech/list

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

Small Group App Design

Small Group App Design

DogEar• Events• Community – class

member chat

stacks• Scanner

enhancements• Connect to non-

library items (e.g. bookstores)

Study Buddy• Four Squarization of

library experience• Operational unit is

course, not library• Connect students

within same courses

iStudy• Rate and review

loanable technology• Ask for feedback at

critical junctures like discharging, renewing

• “Noise-o-Meter”

MyIllinois• Personalization –

user search history, favorite library, etc.

• Availability of physical resources (e.g. computers)

I+Library• Push availability

updates• Ratings• User Interface

API Info – Part 1Minrva 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

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

• API base URI: http://dunatis.grainger.uiuc.edu:8080/sb/api/

Box documentshttps://app.box.com/s/fxsfrsezvc29n1f7gdzu

Presentations

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