WhatfettleHardboiled hCards

Safari 4

I recently came across Andy Clark‘s could you be a dick competition. Andy’s book “Transcending Web Design” is a lovely explanation of the value of graded browser support which together with his advocacy of Microformats, his open letter to Taylor Swift and the CSS3 and Web typography goodness on for a beautiful web has made me something of an unashamed fan. I already have a S&N pin and a chance of contributing to his next book was too good to miss.

But, and you must have known there was a big fat but coming, I don’t have sufficient ready cash, hard-disk space or time to play Adobe Photoshop updater tamagotchi. Like many people, I make stuff using a browser and not vendor tools from a parallel universe. It’s an approach outlined in Andy’s own presentation: “Walls come Tumbling Down“. All this led to a self-corpse-munging of a conflicted Robby The Robot-esque proportion: a business card .. as an image .. for a Web design book .. a business card as an image .. for a Web design book ..

That conflict cost me time and now the competition is closed with the results declared. So I’ve put what I might have entered here:

http://whatfettle.com/2010/01/Hardboiled/

This is just a bit of HTML marked up as hCard meaning you can use Firefox operator or a service such as h2cx to download vCards.

As you can probably tell I’m no rock-star Web designer and am scared silly by the notion that means I should COMPLY WITH STANDARDS. I did however, have a bunch of fun playing with some of the new CSS properties appearing in modern browsers. These work to varying degrees in a different browsers as illustrated by a collection of screen shots:

Hardboiled Set

I also took the time to ensure the page contained valid CSS and valid HTML 5.

The source, including attributions for fonts and the couple of royalty free images used is up on github. If someone cared enough we could start adding in hacks and work-rounds to solve some of the glitches for the hard of browsing. What would be cool is if the markup was the same across all the cards, independent of the stylesheet used. I guess that’s my next challenge.