Fluid.app allows you to make site-specific browsers (SSBs) that contain just a single web page. This way you can take any web apps that you use all day every day (for example Gmail, Campfire, or Twitter) and pull them out of the browser. This way they always stay open, are easy to command+tab to (like a regular app), and aren’t lost in the browser tab shuffle. It’s a little productivity booster.

Fluid also allows you do do things like make the app into a overlay window (sits on top of all other apps) or even be semi-transparent. That’s what we’re going to use for this example. So, let’s fire up Fluid.app.

Here, we’re creating an app called “Transparent Window”. As for the URL field… you can really pick any URL. In many cases you’ll probably be dragging an image to the window anyway. Now create and launch your app. From your new app, open the Appearance preferences.

Oooooh, Window Opacity! Yup, that’s what you want. Set it about halfway. Then open the Advanced preferences.

Here, choose “Allow browsing to any URL”. By default, Fluid apps don’t let you navigate away from the main site you named when building the app. This is to keep the app focused on not turn it into another browser. But this will allow us to open mockups from any site or even drag images to the window. You’re done!

You can use this app for overlaying mockups or comparing Webkit rendering to lesser browsers.

Here’s a screen shot of my sidebar in Transparent Window (WebKit) sitting on top of the sidebar in Internet Explorer 7.

(Yeah, IE7 doesn’t like pseudo-elements.)

Enjoy!

Wait, What’s Fluid.app?

Fluid is a free Mac application that creates Site Specific Browsers (SSBs). An SSB allows you to run a single web site or application as a stand-alone Mac application, independent of your other web browser windows or tabs. This way, it is always instantly available via the Dock or application switcher, with no fumbling of tabs. Also, if your browser crashes, your important sites (in SSBs) are kept safe from harm.

What types of apps might you want to run in a SSB? How about your CRM, project management app, feed reader, email app, etc. Anything you use a LOT.

If you’re on Windows, Mozilla’s Prism creates SSBs, but the main highlights of this article are Fluid/Safari-only.

Setting It Up

When you fire up Fluid, you need to choose the URL (m.google.com) and the name of your application (I chose “Mobile Google”). You can then choose a custom application icon. Why do this? Otherwise it’ll go with the teenie little favicon the site uses. There are plenty of high resolution application icons on Flickr you can use that will look more like OS X icons.

Once you enter all that information, you can launch your new app.

Changing the User Agent

Hey wait, that didn’t look like the iPhone version! Nope. You’re still just looking at the generic mobile version non-iPhone users will get. Take a moment to think about how lucky you are that you have an iPhone.

Here’s how you change the user agent in Fluid so that it thinks it is an iPhone:

I’m going to guess that you need Safari’s “Develop” menu turned on in order to do this. You can do that via the “Advanced” pane in the Safari preferences.

Opening External Pages

While I don’t want to do any extraneous surfing from this new SSB, I also monitor things like the BatchBook support forums and our Summize searches in Google Reader. So, if I want to open something quickly to take action, I’d rather just do it right in my little SSB. So, I do this by setting this preference below:

And there you have it. You’ve got a handy little Google Reader (and Gmail/Calendar/Docs/etc.) widget on your desktop at all times. Enjoy!