Honestly, making a site responsive is nothing new, not even for me. Nevertheless, I wanted to document the process (no surprise there). Since as of the date of publishing this post, the responsive version of the theme hasn’t gone live yet, you get a sneak peek. Continue reading “Making the NNELS Site Responsive”
Lightning talks on Day 3 of Code4Lib. Continue reading “Code4Lib 2014: Day 3 Lightning Talks”
Morning presentations Continue reading “Code4Lib North: Day 2 Morning Notes”
De-sucking the Library User Experience
- Jeremy Prevost, Northwestern University
Libraries hate library users. If we didn’t, our websites wouldn’t suck.
- if a user can’t find it, why do you own it?
- spend a lot of money on acquiring resources or access to them
- want to allow them to find them
- Good: works like Google from the user’s perspective
- Bad: needs to know how it works to make it work e.g. need to know MARC; can only find known items
- live examples: Ex Libris Voyager vs. Primo
- Voyager: no relevant results even using boolean ‘AND’
- Primo: can use boolean or not, relevant results – de-sucked!
- Request information/user experience also sucks
- Prepopulated info, request item if not available – de-sucked!
- made interfaces consistent – de-sucked!
- not going away
- no mobile until mid-2007 for iPhone
- jQuery mobile – Apr 2010 – but updating two sites sucks, no support for tablets
- Mar 2013: responsive design, bootstrap
Libraries don’t hate library users!
- start with something that you would enjoy using
Google Analytics, Event Tracking and Discovery Tools
- Emily Lynema, North Carolina State University Libraries
- Adam Constabaris, North Carolina State University Libraries
How to track in-page events. Decide which events to track, push to Google.
Event Tracking Use Cases
- hidden or externally AJAX events e.g. facets, tabs
- internal links that occur in multiple places e.g. request item
- external links
- Catalog: click on tabs twice as much as everything else; full text used a lot; browse graphical < text because of placement; about half request item even though in 2 different places
- Summon: trying to track what they could track. Paging more popular than facets
- GA API script
- jQuery API
- HTML5 Data Attributes: data-* for use by scripts
- decide what to track
- basic technique
- Summon gets harder. Have to get it in the code. more selectors
Debugging & Testing
- set up safety net first
- know the debugger
- use the GA debug
- test a lot
Actions speak louder than words: Analyzing large-scale query logs to improve the research experience
- Raman Chandrasekar, Serials Solutions
- Susan Price, Serials Solutions
Single unified index for all the items from all libraries’ collections.
- observe and log user actions e.g. queries, filters, click patterns
- compute quality of search results e.g. user behaviour
- analyze data to improve search results and enhance research experience
Data-Driven Documents: Visualizing library data with D3.js
- Bret Davidson, North Carolina State University Libraries
- uses technologies that you already know
- capable library – pre-built path generations, well maintained etc.
- community – documentation, training available
- might not because of learning curve, and don’t need something this complex
- suma – space assessment toolkit
- show visualization real time, tables, and CSV file
HTML5 Video Now!
- Jason Ronallo, North Carolina State University Libraries
Yes! Also, slides/presentation.
- Flash video cannot be run on most mobile/tablets
How it Works
- uses video HTML tag
- use simple fallback – download if can’t view
- problem: browsers cannot decide on single codec to use; codec war
- solution: multiple sources: mp4, webm
- use poster attribute as “screenshot” and don’t have to download video right away
- add type attribute to say which format to use; can be very explicit
- only one video per page please!
- can add custom controls, more info for users
- events that you can listen for e.g. timeupdate to update time in a video; update wording e.g. which floor
- analytics: play, pause, seek, ended
- can do visualization of engagement
- can style with CSS
- track for subtitles
Polyfills and Advantages
- provide video controls
- flash fallback
- progressive download and range requests
Future of Media on the Web
- DRM looks to be coming
- Popcornjs – can do annotation
- Web Audio API – mix audio, filters, etc.
Techniques & Tips
- flexible grids
- media queries that aren’t pixel dependent
- media queries to selectively adapt the page
- responsive images (max-width: 100%, can hide small (767px)/medium(1296px)/large (1440px))
- can use modernizr to detect if touch device
- Foundation has flex classes for embeds to resize YouTube videos, etc.
- For iframes, can use padding: % of ratio of iframe/embed
- Responsive iframes by NPR will do it for you as well
- Source code order (for screen readers especially)
Download Foundation (basic responsive, reset files) – uses 12 columns
Coding on the fly is great if the space is setup to be a hack session type thing, but the way the room was set was very much just presentation style. I just feel like I’m not really learning much when someone is coding in front of me. Demo is totally fine, but just watching them enter text seems like a bit of a waste of time.
I know mozfest is open for everyone, but somehow I expected it to be more advanced. I don’t think this covered anything I didn’t already know, and I wasn’t a huge fan of the fact that it was based on an existing package.
Definitely a great session to have for those who don’t know anything about responsive design though.