January 28th, 2009

Turn Web Apps into Desktop Apps with Fluid

fluid1 Turn Web Apps into Desktop Apps with Fluid
As a web designer, I spend a large amount of time on the internet, using lots of web apps like Freshbooks, to send and track estimates and invoices to my clients, SQL Buddy, a much more beautiful alternative to PHPmyAdmin which I have installed on my own hosting server to manage mySQL databases, Google Reader, to keep myself up to date with my favourite news, and the list goes on.

If you’re like me, you will wish that the developers have built the web apps native for Mac OS X, so that your browser won’t be cluttered with too many tabs. I’m not saying that by turning all your web apps into desktop apps won’t clutter up your dock, but at least resource hungry web apps that are AJAX or Flash driven (eg. Picnik or Photoshop Express) won’t consume too much memory for your browser’s liking.

Meet Fluid (Free)

Fluid not only convert your frequently used web apps into desktop apps, or Site Specific Browsers (SSBs), it also does a little more. Take Google Reader or Gmail for example, you’ll be able to see unread counts as a dock badge on your dock icon like this (also applies to Gmail):

fluid unread counts1 Turn Web Apps into Desktop Apps with Fluid
If you use Twitter, you can even turn Hahlo.com (a Twitter web app client optimized for iPhone) into a menu item, complete with Growl notifications, watch the video below to see how to do that.

Here’s a couple of web apps I have converted into a Mac OS X native desktop application:

Google Reader

fluid google reader1 Turn Web Apps into Desktop Apps with Fluid
mySQL Database – SQL Buddy

hex sql database1 Turn Web Apps into Desktop Apps with Fluid

fluid freshbooks1 Turn Web Apps into Desktop Apps with Fluid
The possibilities are endless. For instance, I like to manage mySQL databases as a standalone application so that I can put it on my other screen without needing to switch to my browser to manage a database during a development process. If you don’t have dual monitors, switching to a web app is only a matter of Cmd+TAB.

Coupled with QuickSilver, Launchbar or any other application launchers, it’s even easier to launch your frequently used web apps quickly, avid app launcher users will know what I mean.

How does the app work?

fluid interface4 Turn Web Apps into Desktop Apps with Fluid
Converting a web app into a Mac app is easy, launch Fluid and you’ll be greeted by a user friendly window. Enter the URL of the web app you’re converting, the name of the app, and choose between using the website’s favicon as a dock icon (not recommended as your icon will be blurry), or choose your own icon (highly recommended). If you have an image file eg. png, jpg, gif, bmp, but not sure how to convert it into a Mac icon, go here, or if you don’t mind paying for a native Mac OS X icon convertor, here’s a good looking and functional one.

It’s that easy, the following are more videos to learn more about Fluid (the TinyURL feature is really handy):

The Fluid Thumbnail Plug-in:

Fluid TinyURL Features:


Mac Apps . Web Apps