Lessons Learned Implementing the hResume Microformat

I made two changes of my own while using hResume. I sweetened the (generated) markup and discarded the object tag.

Pimping the Markup

There are many tools for creating hResume markup, but the ones I tested ended up creating something similar to the following code:

<div class="experience vevent vcard">
	<div class="htitle">
		<object data="#j" class="include"></object>
		<span class="title">Coffee Bringer</span><br/>
		<span class="org">My Employer</span>, <span class="location">My Location</span>
	</div>
	<div class="date_duration">
		<abbr class="dtstart" title="2008-01-01">January 2008</abbr> - <abbr class="dtend" title="2008-03-01">March 2008</abbr>
	</div>
	<div style="clear: both">&nbsp;</div>
	<div class="description">Bringing coffee to fellow web designers while they work.</div>
</div>

The markup kinda misses the point of being human readable (a main objective of Microformats). At first glance, the employer, job title, date, location, and description should be marked up as a definition list. In my opinion, however, describing the data using a table would have an additional advantage: The description could be put into the table footer using the tfoot tag. This way it references to the rest of the data the good-old HTML way.

<table class="vcalendar experience vevent vcard" summary="Experience Overview">
	<thead>
		<tr>
			<th scope="col">Title</th>
			<th scope="col">Duration</th>
			<th scope="col">Employer</th>
			<th scope="col">Location</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan="4" class="description">Bringing coffee to fellow web designers while they work.</td>
		</tr>
	</tfoot>
	<tbody>
		<tr class="htitle">
			<td class="title"><a class="include" href="#j" rel="#j">Coffee Bringer 2</a></td>
			<td class="date_duration">
				<abbr class="dtstart" title="2008-01-01">January 2008</abbr> -
				<abbr class="dtend" title="2008-03-01">March 2008</abbr>
			</td>
			<td class="org">My Employer</td>
			<td class="location">My Location</td>
		</tr>
	</tbody>
</table>

This has the additional advantage that it displays nicely in the browser even when CSS is turned off. But wait, isn't the object tag missing?

Good-Bye Object Tag

The object tag inside the Microformat links each vevent element to the vcard later in the hResume. The Safari browser, and presumably any software using WebKit, renders the reference of the object so that it displays the whole page (and vcard) every time. It's the correct thing to do, I guess, but it makes the visualization of the resume overly-complicated.

The Wiki entry on hResume describes a workaround to this by setting the dimensions to zero.

<object data="#j" class="include" width="0" height="0"></object>

Safari rendered the data accordingly (by not showing it), but the page's display performance stayed unbearably bad (duh, it rendered the entire page anew inside each vevent). I, therefore, discarded the object tag all-together. I don't think it's a big loss, since the vcard is still there inside the hResume. A better option may be to add the reference along with the title using a link and the rel attribute instead, as seen in my code above.

Conclusion

There is still some changes to be made to the hResume Microformat before it can be considered "1.0". Turning the vevent markup into a table and rethinking/discarding the object tag may be two useful advances for the format.