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.

Branding the Library Website: Making a Flexible WordPress Theme

In moving our website to WordPress, I wanted to create a theme that could be used by our staff when working on online projects which would sit outside our main website, but in which we would host. Obviously they have the option of using other themes, but then someone (likely from our team) would have to make sure it meets accessibility guidelines, and as there are very few of those, I thought it best to just make our theme flexible.

No CLF

This is just a disclaimer that the main reason we could even do this is because we do not have a Common Look & Feel policy from the university administration, which most universities do. On the flip side, that’s one reason I wanted to do it. I would like that the library “products” are recognized as such. Doing it through a theme would also provide a more consistent user experience across the sites that use the library’s theme.

The Header

Our existing site already used a consistent header. However, it also includes the “Ask Us” logo, which would take you to the “Ask Us” page with all the myriad ways to contact the library for help. For other sites, it’s more likely that they will want to list specific contact instead, so I added an option to remove it.

new site header
New Header with Custom Menu and Google Search Bar

In addition, of course, for any sites using the theme, they will want the name of their site in the header, so I added a text box input for that in the options page and used font-face to pick a different font to make it stand out a little more.

The Menu

The navigation was built into the original theme so that you can either use a custom menu or it will fallback to using pages. However, the way our sites are made, some of the subpages menus would have been so long as to go past the end of the page, so I added the option to take out submenus.

new header with subsite title
Header with Subsite Title, Fallback Menu, and WordPress Search

Finally, the original website search bar redirects the user to the university’s Google search of the library’s directory, so I made the option to change it to the standard WordPress search bar to search within the current site.

The Footer

Since each site may have different links in the footer, I also made an option to include custom links in the footer, such that the ‘Home’ link is the only hard-coded link (which is always the link of the home page of the site you’re on).

new full footer
Full Site Footer with Custom Links and Social Media Icons

While it’s possible to make the social media buttons customizable, until there is a demand or need, I decided to simply put in the option to take them all out.

new basic footer
Hardcoded Part of Footer

The rest of the footer (copyright) is always there. Again, unless there is a demand or need, I didn’t make the copyright holder changeable.

Templating

As many sections of our website (e.g. catalogue/OPAC, Research Guides) are not part of the CMS, I am currently working on taking the WordPress template (minus the options) and creating a plain HTML and then a ColdFusion template to use in those sections.

Code4lib Day 2: Mobile Breakout Notes

Just a few notes if anyone is interested:

  • digital collections tool: wolf walk, digital images
    • geolocation using JavaScript to make it availble in HTML5
    • find it easier in app store, means more people use app
  • HTML5 more clunky with jQuery mobile
  • native app smoother, especially Google Maps
  • mobile site: only force on homepage and opt out using query string
  • mobile app/site needs to be interoperable
  • designing: mobile framework better at bringing out ideas vs. developing web version of a website
  • how do you build up services? concentrate on what is needed on mobile devices
  • should have just what you need and do it well while taking advantage of mobile aspects e.g. bluetooth, GPS
  • how best to build?: REST layer on top of what’s available
  • time resource: if know objective C, then just adding functions
  • voice use: comfort level? accurate enough? difficulty with quiet/study areas/floors?
  • phone tap to reserve seats/room, other application?
  • staff use in stacks? Shelflister: barcode scanner inserts into web form for shelf reading or collection development, including circulation data
  • mobile hours: just give today’s hours or closed (give tomorrow’s hours)

Code4lib Day 1: Kill the Search Button II – The Handheld Devices are Coming

by Michael Poltorak Nielsen, Statsbiblioteket/State and University Library, Aarhus, Denmark

Current Mobile Interaction Paradigm

You do a lot with your hands, everyday. Our hands are a really good tool, but currently, the handheld interaction is based on glass. That is you do functions by sliding your fingers, which means there is no feedback on what it does, i.e. it’s not intuitive.

Take a look at Pictures Under Glass: Transitional Paradigm dictated by technology, not human capabilities by Bret Victor.

An Alternative

  • direct manipulation
  • gesture driven
  • palpable
  • tactile

Smartphone Gestures

The near future may mean combining something like the Wiimote and the iPhone.

Mobile Projects

The idea was to build an HTML5 app that searches library data, favourites, view own items, renew, and request. Currently in beta, but to be published soon.

The search app can be augmented with gestures, gestures combined with multi-touch interactions.

Possible interactions with focus on

  • keyboard – typing
  • microphone speech
  • screen – touch, visuals
  • camera – pattern, movement
  • accelerometer – acceleration
  • gyroscope – rotation
  • compass  – direction
  • GPS – movement, position

Gestures

Might include simple ones using accelerometer data, including

  • tilt
  • flip
  • turn
  • rotate
  • shake
  • throw

The problem is that gestures are only really supported by Firefox, and partially supported by Chrome. Thus, it was decided that development would move to the native iPhone app environment with gestures, and HTML5 web app without gestures (but possibly later when supported). Features that are implemented include:

  • Restart search – face down
  • Scroll – tilt up and down
  • Switch views – tilt
  • Request items – touch and tilt left
  • Favourites – touch and tilt right

Check out the demo:

Challenges

  • no standard mobile gestures
  • gesture maybe individual
  • gesture may not be appropriate at all
  • sophisticated gestures are hard to code
  • Objective-C