July 12, 2009
Webapps Without Walls
When you use mobile-optimized webpages for a while, inevitably you’re going to find a few that you like better than their desktop counterparts. They’re trimmed-down sure, but they give you quick access to what you really want, perfect for a quick peek to see whether you’ve gotten a new email, a file has uploaded, or if the weather’s going to change before you go outside.
For these sort of things, you don’t need to fire up your whole browser, update your extensions, and parse through all of your old auto-saved tabs just to see something that probably isn’t going to be there anyways. All you need is a little web-connected widget that tells you the same thing.
Do you know how to make a widget? Neither do I. But I do know how to use an application called Fluid for the Mac to make single-site-browsers (or SSBs) to do one thing, do it very well, and otherwise get out of the way.
At its basic level, Fluid creates an OS X application using Webkit (the guts of Safari) for individual webpages. I use this for Gmail, for example. Gmail runs on my Mac with its own icon, in a window without any toolbars or other clutter, that I can start without opening my browser, and that won’t crash if (or when) my browser does. It even displays dock badges - which means when I’ve got a new email, I can look at the dock see a little number on the application’s icon. Which, by the way, I was able to pick myself - Fluid will convert almost any image into an OS X icon.
That’s nice enough. But you can also tell Fluid to identify itself to web pages using other engines besides Safari’s. A Fluid-built SSB can show itself in multiple versions of Firefox, Internet Explorer, or — and this is the kicker - MobileSafari, the web browser used for the iPhone.
Weirdly, you can’t select this when you first create your app. All you pick is the URL and your program icon (which defaults to the web favicon). But all you have to do, once you’ve created your browser, is to click on the program name, then “User Agent,” to run the site as a mobile browser once you restart.
Why is this important? Well, after you create the application, you have a few more options. One that I’ve never used is to embed your SSB into the Desktop. This is nice presumably because you can close all of the other apps and just show the one you use most frequently. But I keep files and folders on my desktop, so it’s never worked.
The other, which I like a lot, is to convert the SSB into what’s called a “MenuExtra SSB.” The name makes it sound like you’re going to get extra menus or something, but in fact, you get a good deal less. This option runs your SSB not out of your dock, but your menu bar, up there with always-accessible apps like “Airport,” “Clock,” and “Volume.”
If you pick MenuExtra SSB with an ordinary web engine, it’s a little weird - when you click the app’s menu bar icon, you get either a huge browser window or a little window where you need to scroll around to see everything. It’s jarring. But with MobileSafari, it’s perfect. You’ve got a little iPhone-sized window where you can fire up a mobile site - then quickly close it by clicking the same button.
Why would you want to do this? I use the mobile SSBs for Facebook (especially when I just want to check a message or number and not get lost in the labyrinth), Gmail (when I want to check email without having to log in to chat, or waiting forever for the application to start, or worrying about clearing spam, etc.), Google Translate (perfect for a quick lookup), Google Reader (sometimes, since I mostly use NetNewsWire), Pandora (which is currently wonderful), Google Chat (when I want to log into chat but not email - it’s complicated), and Dropbox. If you don’t like any of the rich client Twitter applications, it’s great for Twitter, too. (I use, and like, Tweetie.)
The last one has truly been a lifesaver. I have a 50GB Dropbox account and an older computer that I sometimes use that only has an 80GB hard drive. Syncing the entire account would kill that HD - all of my clever symbolic-link ruses to try to get Dropbox to sync to an external drive have only create giant cache files full of pain. But I don’t even want to have everything synced to my old computer - I just want to be able to access it sometimes. Dropbox in the menu bar lets me stay always logged-in, and quickly navigate to the file I need, download it or read it, and get on with whatever else I need to do.
So that’s it. Fluid is terrific - it creates stable and powerful but lightweight web clients that just work on almost any site you can think of. You can also use the MobileSafari capability to create slick sidetabs in any regular SSB… but I think that’s enough functionality for now.
PS: All of this stuff I have learned elsewhere - if you want fancy pictures or a more explicit walkthrough, google “Fluid MenuExtra” or look at the Fluid site. I’m really just trying to sell you on the idea of it - webapps without walls.