Scrumptious, a social bookmarking/comments app I began building recently, has a bookmarklet.
The bookmarklet is added from the demo homepage.
It’s not the first time I’ve made a bookmarklet for a website, the first time being WebWait.
I found the Scrumptious edition more challenging though, for several reasons. This brief article outlines the challenges. Some I’ve solved to an extent, but all need further work.
Launch UI Challenge
The most obvious challenge is, how do you explain to users what they can do with a bookmarklet. Most users aren’t geeks and I suspect most people still haven’t heard of bookmarklets. Or what are sometimes called “favelets”, since IE users have favourites, not bookmarks, which further highlights the problem. Here, I’ve explained with some text, but it ideally needs a diagram and perhaps a link to a separate page with a more detailed explanation, alongside a video.
Overlay UI Challenge
The next obvious challenge is UI design of the comments overlay. We’re overlaying comments onto a page. One of the issues was using a z-index that’s higher than what’s on the site, hence my article on max z-index. Other questions too. How much transparency, if any? What kind of positioning and scrolling, and how wide should it be?
Coding Challenge
Bookmarklets need to be fairly small. IE6 limits you to just 508 characters, so if you are doing anything remotely interactive, you’ll need to make the bookmarklet pull in a script from elsewhere, using On-Demand Javascript. This is a good practice anyway (as bookmarklet guru Alex Kirk explained to me a while ago) because it means you can always update the app. The downside is you still have to be quite concerned about size, as you want the bookmarklet to come into effect straight away. For this reason, I wrote the Scrumptious bookmarklet without using JQuery, which meant going back to Javascript 101, and lots of ugly low-level DOM manipulation therein.
Deployment Challenge
While there are various websites that let you cut-and-paste Javascript code to build a bookmarklet, I wanted to automate the process. Continuous integration, Automated Deployment, and all that. Luckily, John Gruber has a bookmarklet builder perl script. I yoinked and tweaked it so that I could keep the Scrumptious bookmarklet in its own form.
Another issue is the URL of the Javascript which the bookmarklet requests. Since Scrumptious can run on different servers, this URL will change depending on where the server is stored. Right now, there’s no server-side processing - all server-side content is static HTML. So I wrote a shell script to set the bookmarklet which any site operator could use.
Modularity Challenge
A bookmarklet is not the only place Scrumptious injects itself into the page. There’s also a Greasemonkey script under construction, and I’ve experimented with JetPack. I’ll also be building support for a site toolbar, so that an intranet operator could let you click on a “comments” link and inject Scrumptious comments on the page (so that users don’t have to bother installing the bookmarklet, at least to comment on intranet sites). The bookmarklet script has to be flexible enough to cover these subtly different scenarios. For example, the Greasemonkey script wants the comments overlay to be closed initially with a small button to launch it; the bookmarklet wants it to be open initially; and the Jetpack and toolbar want it to be off altogether until its explicitly launched.
