Fancy Email Signatures with hCard Microformat

I recently redid my email signature. I’ve been using an HTML signature for a while and my friend Kent complained to me one day that my emails always wrap odd on the iPhone. I figured out that I had an HTML element with a minimum width around 300 pixels. Fine for a computer, but it made the iPhone mail program scroll - in the worst way possible - horizontally.

I figured since I was going to redo it I would simplify, but also wanted to add some function. So, I decided to make use the hCard microformat in the signature. It wasn’t too hard to get right, and it looks normal when viewed but an hCard aware client would see the data markup.

<div style="width: 100%; margin: 14pt 0px; padding: 2px; border-top: 1px #dddddd dashed; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 10pt; color: black;" id="hcard-Jamie-Thingelstad-Personal" class="vcard">
    <a style="white-space: nowrap; font-weight: bold;" href="/" class="url fn">Jamie Thingelstad</a>
<div><a href="" class="email"></a></div>
<div style="white-space: nowrap;" class="tel">mobile: <span class="value">612-810-3699</span></div>
<div>find me on <a href="aim:addbuddy?screenname=jthingelstad" class="url">AIM</a> <a href="[](" class="url">Twitter</a> <a href="[](" class="url">Facebook</a> <a href="[](" class="url">LinkedIn</a></div>

I found two tools that helped with this a lot. There is an hCard creator that helped with figuring out what the structure should look like, and very importantly an hCard validator that you can pass a code fragment into and it validates and decodes it.

With all that said, I don’t think there is a single email client that will honor hCard. But, if one comes along I’m ready.

Jamie Thingelstad @jthingelstad

This work by Jamie Thingelstad
is licensed under a Creative Commons
Attribution-ShareAlike 4.0 International License