Printing TTC Schedules, The Better Way

Last week I printed out the timetable of a TTC bus stop near me and was disappointed with the results. It took three pages and, shudder, was overloaded with white space. Here’s what it looks like:

Ideally the TTC can move to a vastly more efficient printed layout, but in the meantime a little CSS hack will do. Today I spent a few minutes looking at Greenwood Station – 31 Greenwood and have coded some CSS that can be appended to their print stylesheet.

My suggestions:

• Removed the route diagram from the printed version. It consumes vertical space and is not readable as a thumbnail.
• Removed the “Next 3 scheduled buses” block. The full timetable is below, and once printed it’s obsolete.
• Removed inactive tabs (e.g. Saturday, Sunday, Monday) to avoid confusion.
• Set width of time containers to automatic to prevent wrapping

Here’s what it looks like:

And here’s the CSS code (please comment improvements!):

Fun with Google’s Auto Complete

What kinds of questions are our fellow humans asking Google? From the Google homepage, start typing a question (who, what, when, where, why, how, etc.) to see what’s being asked.

To see what teenagers are curious about, start with “can u”. Endless fun. My favourite: “can women get prostate cancer?”

The Education of Single Click

Ever notice how latecomers to the web will often double-click links? In my usability work, I’ve observed this happening countless times. Such activity almost certainly doubles the users risk of developing carpal tunnel syndrome (CTS). It also raises the ire of environmentalists, as it doubtlessly shortens the life of an average computer mouse by half. In order to do our part to curb this dangerous behaviour, I teamed up again with Andrey Petrov to build this simple javascript that aims to strengthen single-click behaviour.

UPDATE: If you are using jQuery or Prototype.js, follow these examples which only affects links. Otherwise use this original version, which affects all double-clicks.

Feel free to propagate in your HTML to end the senseless double-clicking of web links forever!

Introducing Wideslide: A jQuery slideshow plugin

A few months ago I was in Patzcuaro, Mexico working again on a website for the Hotel Casa de la Real Aduana. The co-owner, Didier Dorval, is a veteran photographer I met when we worked together at Masterfile. He has taken fantastic photos of the hotel and surrounding area, but when we started to put together slideshows for the site, it became clear that the images would have to be recropped to the same size; much to their detriment. Why don’t existing slideshow solutions handle varying aspect ratios?

To solve this problem, I brought in the big guns, Andrey Petrov, to help me design and build a slideshow plugin for jQuery, demonstrated here using some illustrations of my wife.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Simply include jQuery, the plugin, and create a list of images with the class “wideslide” and you’re off. Want to try it, or try to improve upon it? We open-sourced it.

Download Wideslide on GitHub.