How to Make an App From a Web Site in macOS

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. fluid in the applications list
    click to enlarge

  3. 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.


  4. click to enlarge

  5. 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.

  6. click to enlarge

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

  8. click to enlarge

  9. 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.

  10. click to enlarge

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

  12. click to enlarge

  13. There’s Gmail!

  14. click to enlarge

  15. 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.
  16. right click in a fluid app

  17. With Gmail – you get an added extra bonus of having the icon display your new unread emails via the Dock icon.
  18. fluid gmail dock icon

  19. 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.
  20. keep gmail fluid app in the dock

  21. 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.

  22. fluid with the clipboard enabled and the plugins menu displayed

  23. 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.
  24. fluids cover flow view
    click to enlarge

  25. If you select the Thumbnail button from the bottom left corner, the view will switch from Cover Flow to Thumbnails.
  26. fluid iphoto thumbnail view
    click to enlarge

  27. For more info on Fluid, and to view some screencasts of it in action, check out the Fluid Community.

If this article helped you, I'd be grateful if you could share it on your preferred social network - it helps me a lot. If you're feeling particularly generous, you could buy me a coffee and I'd be super grateful :)

buy a coffee for simplehelp.net


Home » Mac » How to Make an App From a Web Site in macOS

Leave a Comment

Your email address will not be published.