Tag: responsive

Code4Lib Day 2: Afternoon Notes

De-sucking the Library User Experience

  • Jeremy Prevost, Northwestern University

Libraries hate library users. If we didn’t, our websites wouldn’t suck.

Discovery

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

Requesting Item

  • Request information/user experience also sucks
  • Prepopulated info, request item if not available – de-sucked!

Renew Item

  • consistency
  • made interfaces consistent – de-sucked!

Mobile

  • 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

Slides

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

Examples

  • 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

Implementation

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

RMF Goals

  • 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

Slides and resources

Why D3?

  • 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

Examples

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

Here’s Why

  • 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!
  • properties exposed in JavaScript
  • 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.
baby and mother owl
Breakout Time

MozFest 2012: Notes from Responsive Design Session

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

Thoughts

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.