I'm taking a short (I promise) break from my Getting Semantic With Microformats series because I need it, and I wanted to spend some time playing with and reviewing the Oomph microformats toolkit from MIX Online that I discovered this week.
This way, you (my beloved four readers) still get some microformat goodness, and I get a much-needed break from the intense research and writing I've been doing.
Let's get started, shall we?
Oomph? What Is It?
Oomph is a toolkit intended to make it easier for designers and developers to implement microformats. It not only has a cool name (well, more cheesy than cool), but it has some cool stuff:
- Cross-browser jQuery overlay that aggregates and exports microformats
- Internet Explorer Add-in that aggregates and exports microformats
- Sets of CSS for styling microformats
- Windows Live Writer plug-in for generating hCard information
And in the spirit collaboration and extensibility, the toolkit is on CodePlex, Microsoft's open source project hosting site.
All of this sounds pretty good, right? Yeah, to me too. So, I just had to spend some time with Oomph and really see if it is something I would use myself.
Cross-Browser jQuery Overlay
The first part of Oomph I wanted to check out was the jQuery overlay, which couldn't be simpler to add to a site.
Just two lines in the <head> of pages that contain microformats if you are already referencing the jQuery library (which I am):
<script type="text/javascript" src="https://visitmix.com/labs/oomph/1.0/Client/jquery-1.2.6.min.js"></script><script type="text/javascript" src="https://visitmix.com/labs/oomph/1.0/Client/oomph.min.js"></script>
What does this give you? Well, if you are reading this article on my blog (opposed to the RSS feed) in a browser, take a gander at the upper left-hand corner. That's the Oomph "gleam" (yeah, the naming is seriously cheesy):
That little icon is generated by the jQuery and indicates there are microformats (hCard and/or hCalendar) on the page. If that icon is selected, the overlay kicks in:
The overlay displays hCalendar information on the left and hCard on the right. If it detects more than one hCalendar or hCard on the page, it provides "Next" and "Prev" links to progress to the other sets of information.
Update: 2/19/2009
I've decided to remove Oomph from this blog due to a known bug/issue that causes conflicts with other jQuery calls on this site.
I still support Oomph and hope to get it back on my blog soon. But until this is fixed, I shall remain Oomphless.
Export Microformats
It also provides a wide range of export options (all of which work) for hCalendar:
- Google calendar
- Apple iCal
- Yahoo! Calendar
- Outlook
- 30 Boxes
- Windows Live
As well as for hCard:
- Apple Address Book
- Outlook
- Yahoo! Address Book
Mapping
Another interesting feature is that the overlay provides an option to view adr information contained within hCalendar or hCard on a map via Microsoft's Virtual Earth:
Not Entirely Cross-Browser
I tested the Oomph jQuery overlay across all the browsers to which I have access:
- Firefox (Mac/PC)
- Safari (Mac/PC)
- Chrome
- Opera (Mac/PC)
- Camino
- IE7
- IE6
Safari on the PC Gets No Love
It is functional across all browsers except Safari for the PC.
The Oomph icon would appear, but I couldn't trigger the overlay in Safari on my PC.
IE6 Is a Bitch (Of Course)
If you happen to be viewing this article in IE6 (but why on earth would you be doing that!?), you have to scroll all the way to the bottom to see this little icon.
And it totally fucks my footer layout.
Why? Because IE6 blows and you must upgrade. Now.
However, the Oomph developers have noted that the possibility of display conflicts (not explicitly related to IE6) that can be resolved by modifying positioning in the Oomph CSS (or maybe overriding it with greater specificity in my own CSS).
A Few Issues
While playing with the jQuery overlay, I noticed a few issues. These are relatively minor and will probably be resolved as the project evolves. Worth mentioning, nonetheless:
Email in hCard
For hCard microformats, the jQuery aggregator doesn't grab the right information for email link (<a class="email">) in an hCard. It appears to pull the content that displays on the browser, rather than the href="mailto:" value.
So, if you have something like this in your hCard (which I do):
<a class="fn email" href="mailto:[email protected]">Emily Lewis</a>
The jQuery hCard aggregator grabs "Emily Lewis" as my email address, rather than "[email protected]".
URL in hCalendar & hCard
For both hCalendar and hCard microformats, the jQuery aggregator appears inconsistent with URLs. It recognized the URL value for one hCalendar event on my site, but not for a different hCalendar. Same with hCards.
I validated all instances of hCard and hCalendar on this blog, and also confirmed that other aggregators recognized the URLs consistently.
I'm not entirely sure what the differences are that cause this issue. And I don't really have the time or interest to figure it out.
Page Load
Since adding the Oomph jQuery to my pages, I've noticed an additional 2-3 second delay in my page loads on my high-speed cable connection. Sounds negligible, but I noticed it, and that's not something I normally pick up on.
I am calling the Oomph JS from the visitmix server, which then calls the Oomph CSS from that server. But I have no idea (and it isn't even close to an area of knowledge for me) if the page load speed would increase if I was hosting it myself.
Internet Explorer Add-In
Now, on to Oomph's IE add-in.
Before I messed with the add-in, I first removed all of the Oomph jQuery from my site, so as not to get the two mixed up. Because, according to Oomph, the functionality would be the same.
Next, I downloaded the install file and ran it. Took about a minute. Simple.
Then I launched IE7. Voilá, the Oomph gleam icon appeared in the upper left-hand corner, just as it did with the jQuery.
When I clicked the gleam, the overlay appeared, and all the aggregated content was the same as it was with the jQuery:
- Both hCalendar and hCard information was aggregated
- Export links for both hCalendar and hCard were available and worked
- Mapping information was available for
adrcontent
The Problem Child: IE6
Because I like to torture myself, I checked out the add-in on IE6. And just as with jQuery, the add-in renders at the bottom of the page on my site.
And just as with the jQuery in IE6, the add-in screwed up my footer layout. However, not nearly as much as the jQuery did.
Fortunately, for me, these are non-issues, because I think of IE6 as a non-browser and I don't support it for my blog.
One IE6-specific issue that is annoying from a usability perspective: if there are multiple instances of hCard on a page, selecting the "Next" or "Prev" links reset the focus of the page to the top of the viewport. So the user must then scroll all the way back down to see the overlay information.
Issues
Other than the IE6 issues, the add-in functionality was fine. Although, it has the same issues I noted the Oomph jQuery has:
- Incorrect aggregation of email information for hCard
- Inconsistent aggregation of URL information for hCalendar and hCard
CSS Sets
One of the more clever things, I think, about Oomph is that the toolkit includes sets of CSS for styling hCard and hCalendar information.
This is really quite brilliant, because microformats use a standard set of class values, making them ideal for CSS sets and frameworks.
Here are some shots of the various styles in action, with hCard example on the left; hCalendar example on the right:
Light Rounded Corners
Dark Rounded Corners
Blue Rounded Corners
Notebook
Grunge
Basic Dark
This one comes in fixed- and auto-width options:
Issues? Not Really.
I peeked at these examples across all of my browsers and they all render relatively consistently (with the expected issues in IE6).
From a slightly negative perspective, I can't say I'm a huge fan of how the CSS itself was written. Not enough short-hand for my preferences.
That said, though, the CSS is well-commented, so would be very easy to work with and manipulate.
The only other thing that bugs me ever so slightly about the CSS sets is that they rely on a common/consistent way of marking up the microformats.
Personally, I apply microformats across the entirety of my blog (especially hCard), so the markup varies according to context. In this type of situation, the CSS sets couldn't be used as-is. There would have to be some modification.
But, even if you don't use these styles, they provide some very nice inspiration for what can be done with microformatted content.
Like I've always said, styling microformats is only limited to your CSS skills.
Windows Live Writer hCard Plug-In
I don't use Windows Live Writer, but I wanted to see how the Oomph plug-in worked, so I set it up (the lengths I go to for my four beloved readers).
Not even going to comment on Windows Live Writer, but the Oomph hCard plug-in was easy to add and easy to use. I just downloaded and ran the install file, and the option appeared in my list of plug-ins:
The plug-in gives you a form to enter contact information:
And upon submit, adds it to your Live Writer page:
I took a peek at the source:
<div class="vcard"><img class="photo" style="float: left; margin-right: 4px" alt="photo of Emily Lewis" src="http://www.ablognotlimited.com/images/emilyLewisThumb.jpg"><span class="fn n"><span class="given-name">Emily</span> <span class="additional-name">Paige</span> <span class="given-family">Lewis</span> </span>
<div><a class="email" href="mailto:[email protected]">[email protected]</a></div>
<div class="adr"><span class="locality">Albuquerque</span>, <span class="region">New Mexico</span> <span class="postal-code">87106</span><div><a class="url" href="www.ablognotlimited.com">www.ablognotlimited.com</a></div></div>
Perfectly acceptable and valid.
Though, I'd personally prefer indented and formatted markup, not to mention more semantic. And I'd prefer that it not generate the inline styles. And I don't like the "divitis."
But that's just me.
So this seems like a great tool for Live Writer users, though I'm not too sure how many of them are out there. I didn't even know what Live Writer was until I had to test this plug-in.
Final Say
At the core of it all, I love microformats, so I'm a fan of Oomph.
I believe anything that attempts to not only spread the word about microformats, but to make it easier for people to implement and use is a good thing.
hCard Plug-In
Personally, I don't see myself ever using the hCard creator. Primarily because I don't use Live Writer.
But even if I did, I love hand-coding. I don't use any of the creators out there. So it isn't a knock against Oomph.
CSS Sets
I also don't see myself using the CSS. But, again, this is because I have a tendency (one which I'm trying to break) to want to style things myself. I don't even use the CSS frameworks out there.
This says more about me as a stubborn front-end developer than it does about the Oomph CSS (or CSS frameworks, for that matter).
IE Add-In
As for the IE add-in, I'm going to keep it installed on my work Dell laptop. Doesn't seem to hurt anything, and it tells me when microformats are on a page. Since IE lacks most of the cool browser add-ons I use to tell when microformats are present, this is useful to me.
jQuery
Finally, the Oomph jQuery. I'm going to keep it in place for now. At a minimum, if you are reading this article on my blog, I'd like you to be able to see it in action.
I also think I could easily mess around with the Oomph CSS to get it to look a little nicer and maybe even get some IE6 cooperation.
Oomph = Useful Toolkit
It is definitely a useful addition to my blog, and tells all users that there are microformats present. This is especially cool for those users who don't know what they are and don't use the browser add-ons that tell them when microformats are on a page.
And, at the end of the day for me, it is all about promoting microformats.
Oomph achieves that.
♥ Share the Love