Do you have websites that you visit often, such as Twitter, Gmail, Facebook, or our beloved MakeUseOf? Have you ever wished that you could open them quickly and independently, separated from lots of other tabs in your browser?

Well, actually you can. There are several ways to achieve that goal: one of them is building a site-specific browser with the help of Fluid. Another more adventurous path is building HUDs of those websites with the help of Automator and website popup automator action.

HUD What?

Just in case you are wondering, HUD stands for Heads-Up Display:

Elements of computer's GUI which will allow the transmission of information concerning the current task in a running desktop application in a separate window that is designed so as to not distract from the current task. (Wikipedia)

Why would anybody want to use HUD? The key is in the words "information", "separate", and "not distract". HUDs are usually used to display quick information of specific elements on a running task. The easiest examples are the small windows on FPS games displaying health and power level, weapon type, and remaining ammo.

On Mac OS X, we can see many examples of HUDs in the form of display modes for the Exposé and Dashboard applications, floating tools palettes in iPhoto, displays for buttons and controls in full screen QuickTime, etc.

The nature of HUD makes it perfect to display quick and independent (mini) windows of our favorite sites.

Building Automator Workflow

The first thing that you should do is download the Website Popup automator action and install it to your system. The installation requires you to have admin access.

heads up display

Since Website Popup is an automator action, we need Automator to use it. Open the app and choose the template that you want to use. For our project today, I suggest you use either "Application" or "Service". Both choices will create independent and easy to access workflows, but I personally would pick Service over Application as you can set Service to be always available from the Service menu.

computer hud

Set the service to receive no input and add "Get Specified URLs" action from the library (you can use the search function to quickly find any specified action). Then change the web address in the action to the URL that you want to open.

computer hud

Next, add "Website PopUp" action. You will notice that there are several settings that you can adjust in this action.

computer hud

The first setting is the "Site Size". You have the option to set the HUD palette to "Large", "Medium", "iPhone", "iPhone (Landscape)" and "Custom" size along with the size input boxes where you can write down the number in pixels.

The second setting is the "User Agent". You can choose whether you want the site to detect your HUD as "Safari" or "iPhone".

The "Position" setting will let you determine the position to open the HUD. You can set the value to be "Centered" or "At Pointer".

I don't really understand the function of the last setting - the "Output". I found no difference in the result whichever option that I chose. So I just let it be.

After everything is set, save the workflow and give it an appropriate name.

head up display

Shortcuts, Rinse & Repeat

You have just finished building a HUD palette to one of your favorite sites. The final touch that you can apply is to assign a shortcut key combination to it so that you can access it quickly.

Assigning the shortcut requires you to go to "System Preferences - Keyboard - Keyboard Shortcuts - Services".

head up display

Now you are ready to open your favorite site via heads up display anytime and from within any application using the assigned shortcut key.

To illustrate the possibilities, here are two HUDs of MakeUseOf that I built. The first one is using iPhone options as the Site Size and User agent. I got a small window and the mobile version of MakeUseOf.

head up display

While the second one is using "Large" in Site Size and "Safari" as the User Agent. As a result, I got a full screen window and the full version of the MakeUseOf site.

05 MakeUseOf Large.jpg

You can use this method with any other websites that you want. Just rinse and repeat. Here are examples of other mini HUDs that I built for Facebook, GMail and Twitter.

heads up display

Web apps are the perfect candidates to be turned into HUD palettes. Above are my picks. What about you? What sites or web apps would you like to access using this method? Share your list using the comments below.