Website mockups and jQuery: disable anchors by default
The art of the prototype is a careful balance between showing the potential of our ideas without clouding our perception on the rough edges. One of the tricks I’ve been using is to disable things that aren’t ready yet, especially links.
I prototype new site ideas using a simple set of templates. I organize the templates in a folder structure that includes CSS, JavaScript, and HTML5 boilerplate files. The templates are organized so that they translate quickly into WordPress and CodeIgniter skins, and so that they’re easy to hack ideas into. The goal with these prototypes is to figure out how a site or app should look, feel, and flow, before building too much of it.
One of the simple tricks in my templates is a single line of JavaScript. The script relies on jQuery’s XPath implementation (a clever DSL for selecting DOM nodes) to disable all but a few anchor tags:
$('a[rel!=proto]').click(function() {
return false;
});
Which disables all click() handlers for every anchor that doesn’t have it’s rel attribute set to proto. It’s a trivial hack that helps avoid hitting blank and missing targets in a mockup, which helps people to think about the possibilities with one less prejudice. As I extend a mockup, I add rel='proto' attributes to the links that actually go somewhere, revealing new ideas as I choose.