Transparent Window App: Using Fluid.app to Compare Mockup and Markup

Recently, Mav (my fellow bearded developer at PatientsLikeMe) asked if I knew of any Mac apps that could take a mockup and overlay it on top of a browser window. This way, you can compare the original mockup to the final output for consistency. While I didn’t know of any existing apps to pull it off, I knew how to make one! Use Fluid.app.

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.

Fluid app creation screen

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.

Appearance preferences for your new app

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

Advanced preferences for your new app

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.

Sidebar with overlay

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

Enjoy!

Comments are closed.