Fluid: Creating Web Apps For Your Desktop

If you have been a consistent reader of Web.AppStorm, you know that there are some great applications out there for the web. There are many times that I wish a lot of these were actually on the desktop instead. Take for example, Pandora, I love using it, but there is not native desktop app for it. Well, about a year ago, I came across a solution that has been such a great way to enjoy them natively.

In this post, let me show you how to use Fluid, an application that changes a web page into a desktop like app. I don’t know about you, but I am moving more and more toward using the web for a lot of my daily tasks, email, calendar, social networking, etc., and I hate having so many tabs open in my browser. With Fluid, I can change all of that and have these websites launch by itself versus being stuck on the web. Let me show you what I am talking about.

Creating Your Fluid App

Editor’s Note: Fluid is only for computers running Mac OS X, and it’s by no means a new tool. That said, if you’re new to the Mac, or have just started using Web apps regularly, it’s an app many of us rely on, and we’re sure you’ll find it useful. And if you’re on a PC, you can get something similar with Mozilla Prism or IE 9′s Pinned Sites.

The first thing you need to do is go and download Fluid from their website. Once you have done that, you are now ready to start creating your very own web-enabled desktop apps.

Next, you are going to want to find a website that you want to turn into a Fluid like app. For the sake of this post, I am going to stick with a great site called Mint. The first thing you are going to want to do is enter in the website address into Fluid. Secondly, you are going to want to name the app, in this case, I am going to name it “Mint”. Then you are going to want to designate where you want it to live. For me, to make it easy, I just assign it to the Apps folder.

Creating a Fluid app

Creating a Fluid app

At this point, you now have the URL of the site, the name, and where you want to put it; the last thing you need to do is click on the Create button and let it do its magic. You have now just created your very own Fluid application. It really is that simple to do.

Example of a Fluid App

Example of a Fluid App

Customizing the Icon

If you decide that you want to do a little more with Fluid you can also customize the icon for it. You could just leave it the way it is, but you have to be aware that most favicons don’t come out looking that great. In most other cases, you get a fuzzy icon that just doesn’t look good at all. There are some websites that know that you can make a fluid web app out of their site so they have designed a decently looking favicon, like Mint has done.

But, let’s say you don’t like the website’s favicon, and you want something a little different, it is very easy to get a decent looking icon that you can live with. There are a couple of different ways that you can do this. One, is to do a Google image search for the specific icon you are looking for. In this case, I am going to type in “Mint icon” and find the one that I like and download it. Secondly, I can also do a Google search for “icons” so that I can find websites that have icons that I can then search for and find the one that I want to use. For example, DeviantArt is a great site to go to to find some great looking icons. That is where I found the icon below for my Mint app. Once you download the one that you want to your computer, all you have to do is select it when you are choosing your icon in the Fluid app.

Mint's favicon (left) and one that I chose from the web

Mint's favicon (left) and one that I chose from the web

Another thing to watch for is apps that have special Fluid integration. Most web apps aren’t designed for it, but there are some that will give you notifications and special features once they’re running in Fluid.

Conclusion

That is pretty much how you can get started to create your own Fluid application. If you want to get a few extra features, you can pay $5 and get some other options like full screen apps for Lion. Personally, I don’t need the extras that are offered so I stick with the free route, but that is up to you if you think you will use them or not.

Fluid apps are a great way if you want to get your web applications onto your desktop. For some it works great for this very reason, but if you are like me and like to keep as much as you can on the web, Fluid may not necessarily be the best option for you. Like I always say, it doesn’t hurt to try it out and see if you like it or not and whether it fits into your workflow. Go and check out our post on the 100 Web Apps to Rule Them All and you can find some great ideas for web apps that can be converted to Fluid apps. You can also feel free to leave your Fluid app suggestions in the comments below, would love to hear what you guys have come up with.


Summary

Fluid is an application that converts websites into desktop applications.

8
  • http://www.crazymind.in ashutosh

    nice article…………..can u tell me this application is supported on windows platform ya not……please reply my comment.
    keep it up…
    thanks…

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow