Build HUD Palettes for Quick Access on Mac - Tutorial
Creating Independent Website Access
Many users frequently access specific websites like Twitter, Gmail, Facebook, or MakeUseOf. Have you ever desired a method to launch these sites rapidly and in isolation, distinct from numerous other browser tabs?
Fortunately, this is achievable. Several techniques exist to accomplish this objective.
Methods for Isolated Website Access
One approach involves constructing a site-specific browser utilizing applications like Fluid. This allows for a dedicated browsing environment for each chosen website.
Alternatively, a more advanced method is available. Users can create custom interfaces, often referred to as HUDs, for these websites.
This can be accomplished through the use of Automator and its associated website popup automation action. This pathway requires a greater degree of technical proficiency.
Building HUDs offers a unique way to interact with frequently used web applications, providing a streamlined and focused experience.
Understanding HUDs
For those unfamiliar, HUD is an acronym representing Heads-Up Display.
A graphical user interface element designed to convey information about a current task within a desktop application, presented in a non-intrusive, separate window. (Wikipedia)
The utility of HUDs stems from their ability to deliver information in a separate manner that remains non-distracting. They commonly showcase concise data related to an ongoing activity. A prime illustration is found in first-person shooter (FPS) games, where small windows indicate health, power, weapon details, and ammunition counts.
Mac OS X provides several examples of HUD functionality. These include display modes for Exposé and Dashboard, floating tool palettes within iPhoto, and displays for QuickTime controls when in full-screen mode.
The inherent characteristics of a HUD make it ideally suited for presenting rapid, independent (and often miniature) windows featuring content from preferred websites.
Creating an Automator Workflow
Initially, the Website Popup automator action must be downloaded and installed onto your computer system. Successful installation necessitates administrative privileges.
As Website Popup functions as an Automator action, the Automator application is required for its utilization. Launch the application and select a suitable template. For this particular project, either the "Application" or "Service" template is recommended.
Configure the service to accept no input, then incorporate the "Get Specified URLs" action from the library. The search function can be employed to locate specific actions quickly. Subsequently, modify the web address within the action to the desired URL.
Following this, integrate the "Website PopUp" action into the workflow. Several adjustable settings are available within this action.
The first setting concerns "Site Size". Options include "Large", "Medium", "iPhone", "iPhone (Landscape)", and "Custom", with corresponding input fields for pixel dimensions.
The second setting, "User Agent", allows you to specify whether the site should identify the HUD as "Safari" or "iPhone".
The "Position" setting determines where the HUD will appear. You can choose between "Centered" or "At Pointer" positioning.
The function of the final setting, "Output", remains unclear. No discernible difference in results was observed regardless of the selected option. Therefore, it can be left at its default setting.
Once all settings are configured, save the workflow and assign it a descriptive name.
Keyboard Shortcuts for Quick Site Access
Having recently created a HUD palette for a frequently visited website, the final step involves assigning a keyboard shortcut for rapid access.
This assignment is accomplished by navigating to "System Preferences - Keyboard - Keyboard Shortcuts - Services" within your system settings.
With the shortcut defined, you can now launch your preferred site through a heads-up display at any time, directly from within any application.
To demonstrate the versatility of this technique, consider two HUD configurations created for MakeUseOf. The first utilizes iPhone settings for both Site Size and User Agent.
This results in a compact window displaying the mobile version of the MakeUseOf website. Conversely, the second configuration employs "Large" for Site Size and "Safari" as the User Agent.
Consequently, a full-screen window appears, presenting the complete desktop version of the MakeUseOf site.
This methodology can be applied to any website you desire. Simply repeat the process for each site.
Here are further examples of compact HUDs developed for platforms like Facebook, GMail, and Twitter.
Web applications are particularly well-suited for conversion into HUD palettes. These are my selections. What websites or web apps would you choose to access in this manner?
Feel free to share your preferences in the comments section below.
