Using Microformats for Better Online Experience

Ajax was able to prove to us that you do not need to refresh the whole webpage just to access single information in one part of the webpage. When efficiently built, an Ajax-based website could easily become a powerful website with interface that was not thought of years ago. Today we see websites that can update itself without even changing the whole webpage.

For example, an Ajax based newsfeed generator will just display the latest news in one part of your page while you enjoy a game or two in another part of the browser. One big example of multi use in a single website is PageFlakes.com. The website is highly efficient that an empty box could even be embedded with an application or a game such as videos from YouTube.com or mini-games that can be embedded in other websites.

But the rendering of these Ajax based websites with standard coding has its disadvantage. Among them is cross browser compatibility. Unfortunately, IE is does not want to go with the easy way of accepting standard codes. We may be able to see this in IE8 but that feat was supposed to be done many years ago.

Going back to coding, the interoperability of the website makes coding even more difficult. If you are developing an application composed of API and mash-ups, you will have a very difficult time developing the website. Considering 80% of the users today are on IE, developing a website is very difficult.

That is where Microformats come in. Using Microformats, you should be able to load a website in different browsers in only one coding. Microformats are basically a technique on how we code an HTML format. To understand this format better here is an example of a standard website rendered as simple HTML:

<div>
<div>David Stern</div>
<div>Been There Inc.</div>
<div>***-***-1234</div>
<a href="http://sample.com/"> http://sample.com/</a>
</div>

This is what happens when you sprinkle the same code with Microformat markup:

<div class="vcard">
<div class="fn">David Stern</div>
<div class="org"> Been There Inc.</div>
<div class="tel">***-***-1234</div>
<a class="url" href=" http://sample.com/"> http://sample.com/</a>
</div>

The above format was build in a known variation of Microformat called HCard which basically connotes that you have a virtual card with all the information that you want to place. Since it is associated with HTML one of the smartest ways of using Microformat is through AHAX, a variation of Ajax that uses HTML.

But that does not mean it can be transported to Ajax. The beauty of Microformat is that it can easily operate on almost any language aside from being compatible to other browser. In this case, this unique mark-up could be applied to a number of APIs.

One classic example is the Google Maps API. Regularly we will be able to integrate the usage of this API and will interact with different browsers. You will notice nothing as a user but developing this function is very difficult. With Microformat, the information stays basically the same. The trick comes from the fact that it uses common formats such as MS Excel’s .csv so that it could be read with different browsers.