More Microformats Highlighting / journal / hicksdesign

25/09/06

More Microformats Highlighting

As well as some tweaks and improvements to my first attempt, I’ve added highlighting of XFN attributes to the list. I’m too lazy to do the XFN thing, but others seem to like it. Maybe one day.

It works by revealing the relationships when hovering over the name, like this (again, taken from adactio)

Animation of XFN highlighting

There is a caveat. This is only CSS, and apart from having the potential to mess up some site layouts, can only work when the author has added a class of “n” or “fn” to the link (as used in hCard). Otherwise, it would go about showing all sorts of rel attributes that wouldn’t be quite so interesting (such as ‘alternate’).

After trying out all sorts of complicated styling, I’ve decided to keep this all as simple as I can bear, so as not to mess things up too much. Do leave feedback if there is anything you want adding! In particular, I’m looking for feedback on whether to use ‘vCard’, ‘Contact’, just an address book icon, or just a microformats icon. What would be the most useful and understandable?

Technorati Tags Tags: css, microformats

Comments | RSS

Remy Sharp said 696 days ago:

Hi,

I saw your blog on a Safari plugin for microformats on Friday and it inspired me to do a bit of JavaScript magic. I’ve not managed to write a ‘true’ plugin, but I have pretty much replicated the suggested functionality in a bookmarklet.

http://leftlogic.com/info/articles/microformats_bookmarklet

The idea really being that you can import individual contacts or calendar events.

Chris said 696 days ago:

I think the microformat icon is essentially useless. It looks nice but it means nothing unless you’ve been to microformats.org. ‘vCard’ is equally mysterious. You and I know what it is but the barebones average folk may not. I think the address book icon is the most univeral thing you can go for with contact added next to it, perhaps.

pauldwaite said 696 days ago:

Good question. I guess vCard is older and used on phones, thus more likely to be widely known than hCard, or just an icon.

pauldwaite said 696 days ago:

> “You and I know what it is but the barebones average folk may not.”

I think it’s interesting trying to consider who this might be targeted at. I’d suggest it’s audience is people who use a computer to store contact information. I’d baselessly speculate that straight away, this eliminates a good 60-80% of the population of the UK or America.

Of the remaining folk, I’d suggest some of them might have heard of vCard, as it’s the one existing standard for storing contact information on mobile phones and computers.

But I do kinda like the idea of labelling it with “contact”or something similar, as I guess it’s got a bit more general meaning than “vCard”.

caleb said 696 days ago:

@ jon hicks
â€¢ i like the idea of implementing the microformats in useful ways, but until they are adopted by non-techie folks (read: a part of iWeb, Blogger, et cetera, and IE ) they need to also be styled in a way that is human readable without the need for plug-ins and other tech magic.

@ remy sharp
â€¢ that java bookmarklet is slick, and it works in the latest nightly of camino. thanks.

Ryan Miglavs said 696 days ago:

At this point, I believe the talented Mr. Hicks intended this CSS to be added on the client-side, i.e. putting it in your own custom style sheet in your browser. Designers such as ourselves are intrigued by the idea and technique by which Mr. Hicks has elegantly exposed the Microformat data, but I for one will alter this if I include it in a site. One of the alterations would be to make it appear just a bit less technical and more generic (“Contact” instead of “hCard” or “vCard” for example).

Therefore, if I understand the intended audience correctly to be nerdy web power-users like ourselves, then Mr. Hicks’ CSS works great as is.

As I said, this makes a great template to add to published sites, particularly using Dan Cederholm’s :hover suggestion. Thank you, Jon. Marvelous work again.

Jon Hicks said 695 days ago:

Remy – that bookmarklet is the shizzy! Thanks for doing that!

Ryan – You’re quite right, this is not meant for use on sites, this is a client side thing for those that want it, which at the moment is probably people who already know about Microformats. Having said that though, it does need to make sense. I’ll change the ‘vCard’ bit back to contacts again.

Dave Child said 695 days ago:

Nice.

Microformats are fun. I spent some of the weekend converting my site so that commenter names are in hCard format and so on, and am making more of an effort to use them generally. I can’t help but wonder if there will ever be enough people using them that they fulfil their potential.

Gerben said 695 days ago:

can’t you use a ‘buddies’ icon. something like the msn messenger icon.

#10

Jon Hicks said 695 days ago:

Gerben – I don’t think so. The information displayed is contact information, and I want to make the connection with Address Book rather than Chat. It is a very Mac centric view (deliberately), but the assumption is that PC folks are more likely to be using Firefox with Tails.