Baking a 3-Layer-Cake Prototype

I clearly didn’t make myself hungry enough putting together the cupcake bakery mini-site for my prototyping talk last month, as I’ve spent the past few weeks polishing that prototype — and staring at chocolate frosting — in order to make that code a proper, release-ready framework. And I’m now happy to say… the 3-Layer-Cake Prototype is now ready for your (ahem) consumption!

Genesis

The prototype builds on a technique I’ve actually used for many years, one I first read about in late 2004 in this Invasion of the Body Switchers article on A List Apart by Andy Clarke and James Edwards. I remember finding it instantly useful for a project I was doing at Coinstar, where I was tasked with developing an updated kiosk interface that could accommodate touchscreen and keypad interfaces, in either Spanish and English. Using IOTBS, I was able to create an interactive prototype from a single set of HTML pages that effectively simulated the various interfaces and served up different language content.

But it wasn’t until sometime last year, fiddling with WYSIWYG prototyping tool Axure and seeing their in-prototype annotations that I realized… hey, I could do that, too!

Evolution

First I tried absolutely positioning individual labels over each page, something which was pretty effective, but slightly wonky cross-browser and -platform. Plus, it was incredibly time-consuming having to both position the labels (nudge, nudge – save – refresh x 1000) and create all the additional markup and CSS to support them.

Then I discovered CSS3 Generated Content and realized that it could be used to create an almost identical set of annotations, but in a way that was much simpler and scalable. In a nutshell, here’s how it works:

The Annotation Technique

Elements bearing a class of “x” in the HTML page will be tagged with a numbered note, to be shown in annotations view.

And if the element has one or more classes already, just add it to the existing one(s), as multiple classes are A-OK.

In the switch.css file that defines view-specific styles, a counter is defined for all elements tagged with the “x” class when in Annotations view.

Then the counter is started, its results styled and set to appear as generated content before the start of each “x”-tagged element in Annotations view. From this, the note labels appear onscreen next to each of those elements.

Finally, the annotations themselves are inserted into the notes panel in the HTML page, written up and formatted as an ordered list, with one list item for every “x”-tagged element on the page, in the order in which they appear in the code.

The notes and the annotations lists aren’t yoked together, so this is the only place where you’ll need to manually match up the count/order of elements to list items.

And that’s the heart of the annotations functionality, explained. You could (and should!) strip out whatever you don’t need, if, say, you want the annotations without the complete 3-Layer-Cake Prototype framework. Non-commercial re-mix and re-use is very much encouraged under the Creative Commons license under which I’m releasing this work. And if you end up using this and posting something online, please let me know, as I’d love to check it out!