The murmur of the snarkmatrix…

August § The Common Test / 2016-02-16 21:04:46
Robin § Unforgotten / 2016-01-08 21:19:16
MsFitNZ § Towards A Theory of Secondary Literacy / 2015-11-03 21:23:21
Jon Schultz § Bless the toolmakers / 2015-05-04 18:39:56
Jon Schultz § Bless the toolmakers / 2015-05-04 16:32:50
Matt § A leaky rocketship / 2014-11-05 01:49:12
Greg Linch § A leaky rocketship / 2014-11-04 18:05:52
Robin § A leaky rocketship / 2014-11-04 05:11:02
P. Renaud § A leaky rocketship / 2014-11-04 04:13:09
Jay H § Matching cuts / 2014-10-02 02:41:13

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.

July 12, 2009 / Uncategorized

9 comments

Dan says…

A small point, but setting the User Agent string does not change the actual rendering engine used by Fluid but merely gives that info out to the webserver. It advertises itself as a different browser than it really is, and it’s useful for when a site “requires,” say, Internet Explorer to run (see: many bank sites) and allows one to trick the webserver into serving you up content that previously had been locked behind a compatibility warning. The rendering engine remains WebKit.

Thanks, Dan – I knew this, but my “tells Fluid to run a different web engine” suggests the opposite – one of those “editing artifacts” I’m always warning my students about! Read that line as “tells Fluid to identify itself as a different web engine.”

For any other Snarkmarket readers who’ve tried this, I’m curious to know what you’ve come up with – especially if you have some good sites you use or other smart variations on this scheme.

So glad you hepped me to this. I’m using it for Google Voice and it’s golden. It’s harder than it should be to figure out how to keep all your clicks in the app window instead of kicking to main browser, but beyond that it’s a godsend.

Wow, Google Voice is a great idea. Let me try that…

There are a few points I should add.

1) Fluid apps are scriptable. Essentially, it’s got Greasemonkey baked right in. If you’ve ever said, “I wish I could have Greasemonkey in Safari,” Fluid is the application that does that.

2) Even better from this point of view is Cruz, which is the Fluid-based web browser. Where Fluid pares everything down, Cruz beefs it up – you can add mobile browser windows to sidebars, specify all sorts of behavior, making it a very flexible alternative to Safari, Flock, etc.

(I’ve thought sometimes about putting together the ultimate research and writing browser with Cruz/Fluid – perhaps for another time/post.)

3) It’s hard to figure out at first how to add scripts, because by default, when you create an SSB, it restricts you to the URLs associated with that immediate application. Any link you click that takes you out of the page takes you to your default browswer. As soon as I built a Fluid app using Google Voice, I saw exactly what Mike wrote about above – because the app generates lots of different URLs, Fluid’s default settings pop open your browser right away.

This is configurable though, in the Preferences panel of the individual app. You can let the app navigate to any URL, or add and removed URLs (with * as a wildcard) to the whitelist. With Google’s web applications, I usually just add *google.com* to the acceptable URLs, which allows the application go to any Google site. I also usually add *userscripts.org*, which allows you to search for and add Greasemonkey scripts. When I still can’t figure out what a site’s doing, I let it navigate to any URL until I can.

Wait wait wait. You guys have Google Voice accounts? Why don’t I?

I got mine like three days ago. And I had to talk to a friend who works for Kraft to get it. (It’s a little known fact that Google is actually Kraft Foods’ third-largest subsidiary.) It’s coming, Robin. It’s coming.

And if it’s any consolation, you actually have to press a button to record incoming calls. What is this, the Byzantine Empire?

Fluid with GVoice is nirvana. And if you’re an iPhone user like me, this will rock your world: http://www.mobilitee.org/archives/514

(There is a third-party GVoice app for the iPhone.)

The snarkmatrix awaits you

Below, you can use basic HTML tags and/or Markdown syntax.