Categories: Mac

How to Make an App From a Web Site in macOS

Share

Using the absolutely fantastic app Fluid, you can run any web application (Gmail, Facebook, Twitter – the list is endless) on its own, as its own application. The benefits of working this way are numerous – if one app crashes, it won’t bring them all down (ie. a regular browser). You can create shortcuts to the specific app/site in your Dock or Applications folder (or both). This brief tutorial, which could also be called “an introduction to Fluid” – will give you the rundown on using it, configuring and using its plugins and more.

Please note: Even though this guide was published back in 2008, the software still exists, and still works perfectly – even in macOS 11 (Big Sur). The steps and screenshots in this guide may have changed slightly, but you’ll still be able to follow along.

Update: Fluid now offers a few extra features for a small fee. The core functionality is still completely free.

  1. To get started, download and install Fluid. The installation is as simple as unzipping the file and dragging it to your Applications. Launch Fluid from there.


    2. click to enlarge

  2. From here you’ll be prompted to create your first Fluid app – which is almost painfully easy. Enter the URL of the site you want to create an app for. In this example I’ll use Gmail. So the address is https://mail.google.com/mail/

    The Name I’ve used is Gmail – but you can of course name it anything you want – Email, Mail, Google Mail etc. The Location refers to where you want the app to be created. The default, Applications is perfect.


    3. click to enlarge

  3. You can use the websites favicon as the Icon for your app, but before you do that, you may want to check out some of the fantastic work shared at http://www.flickr.com/groups/fluid_icons/pool/. In that Flickr pool you’ll find dozens of quality png files to use as icons. So I grabbed a Gmail icon from that pool, and that’s what I’ve opted to use. To change the default click the Icon pull-down menu and select Other…. Then navigate to the image you want to use and select it.


    4. click to enlarge

  4. Now that you’re done, click Create.


    5. click to enlarge

  5. A couple of seconds later you’ll be prompted with a Success! window. From here you can directly launch the app by clicking Launch Now or you can click Reveal in Finder.


    6. click to enlarge

  6. And there’s your new Fluid app – Gmail.app – in Finder. Double-click it to launch Gmail.


    7. click to enlarge

  7. There’s Gmail!


    8. click to enlarge

  8. If you right-click (ctrl-click for single button mouse folks) anywhere in the background, you’ll be presented with the a few options – Back being the one that comes in handy most often.

  9. With Gmail – you get an added extra bonus of having the icon display your new unread emails via the Dock icon.

  10. And as with all (almost all) OS X apps, you can right-click (ctrl-click) the Dock icon and select Keep in Dock if you’d like to have it handy all the time.

  11. Fluid comes with a couple of plugins enabled by default. They are Clipboard and Thumbnail – both of which are incredibly handy.

    When you have a Fluid app up and running, select the Plugin menu bar item (it’s the one that looks like a piece of Lego – see the screenshot below).

    With Clipboard Plug-in selected a side window will appear. You can drag and drop pictures, URLs and selected text into this clipboard for re-use/temporary saving.

  12. If you select the Thumbnail Plug-in you’ll be presented with a very cool “Cover Flow” view of all the links on the page you’re currently viewing in your Fluid app.


    13. click to enlarge

  13. If you select the Thumbnail button from the bottom left corner, the view will switch from Cover Flow to Thumbnails.


    14. click to enlarge

  14. For more info on Fluid, and to view some screencasts of it in action, check out the Fluid Community.
Leave a Comment
Published by
Ross McKillop
December 31, 2020 10:39 pm