How to Build HUD Palettes to Quickly Access Your Favorite Sites [Mac]
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.
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.
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.
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.
Next, add “Website PopUp” action. You will notice that there are several settings that you can adjust in this action.
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.
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“.
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.
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.
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.
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.