Making native looking web applications

I have been using this new service fefoo for a little over two weeks. More than the service and the atrocious homepage whats really intriguing about the application is the native UI that the website uses. Once you search something from the homepage the toolbar it renders on the next page looks and feels native on nearly every browser and platform that I have seen. It is supposed to be a search application and when you search there is a toolbar on top. The way the UI is rendered for this toolbar was somewhat of a mystery.

The toolbar is the one thing on the website that makes it so useful and since it seems like a part of the browser chrome it feels more like an extension. This is one mystery that I could not easily figure out. Using the trusty firebug I was able to figure out some of the mysteries around the native looking toolbar.

The first thing that makes a UI look native is the font. The first way is to make a note of each and every UI font that is being used on every OS you want to support. But that would be one cumbersome task. And also on windows users can select their own fonts so there was some way to find out the font being used by the application. The whole thing boiled down to the font property in CSS. After looking around using firebug I figured out that the font was being set using a property menu.

This one little property does all the magic. The form given below should look like a native UI form on most platforms. There is no other magic just set the CSS font property to menu.

Name:
Name:

This is a test

body
{
  font: menu;
  font-size: 11px;
}