Bookmarklets in the design world

Why we sometimes use bookmarklets on the design team at Medium

In my day-to-day design work, I use many different tools. Some of the most common include:

  • conversations with other designers
  • early sketches on whiteboards or in notebooks
  • high fidelity mock-ups in Sketch or Photoshop
  • static or interactive HTML prototypes
  • temporary changes made on a Medium server running locally (with a local database)
  • actual code changes deployed to the production server, available under a private variant only for me or other Medium employees

However, sometimes it’s important to use slightly more… esoteric solutions. Not necessarily the big guns — just guns specific enough to get the task done.

So, once in awhile I put together a Keynote presentation (great for illustrating flows and transitions), a bunch of static mocks glued together with InVision (great for usability testing flows)… or maybe a weird half-production server, half-iframe concoction that I barely understand myself.

And, some other times, I use an old-fashioned bookmarklet.

Design bookmarklets

What’s a bookmarklet? It’s a little piece of JavaScript embedded into the bookmark itself.

Bookmarklets have been around since the beginning of the web, today often used by services like Readability or Pocket to send the current URL somewhere else, or to look at the contents of the page. In theory, however, they can also modify the page you’re looking at.

Here’s an example of a simple bookmarklet. Go to this page, drag the bookmarklet to your bookmark bar, and then click on it.

Test bookmarklet: Install it

You might ask: Kind of cool, but not really. And what does it have to do with being a designer?

Well, I sometimes use bookmarklets to test various visual or UI changes to the site, allowing people to quickly toggle through some options using the very page they’re currently looking at. Here’s an example of a bookmarklet I built to test various designs of drop caps on Medium:

I put it together and then sent internally around Medium so others could comment on the idea and pick their favourite drop cap.

Unfortunately, owing to security limitations on medium.com (more on this later) I can’t easily share this very bookmarklet with you… but here’s a test bookmarklet changing the colour of Wikipedia text from default to dark gray, light gray, and blue, and back to usual black.

Wikipedia text colour bookmarklet: Install it or view its code on GitHub

(Note: the bookmarklet won’t work if you’re viewing Wikipedia over HTTPS.)

What’s great about bookmarklets

  1. Building a bookmarklet is pretty simple, especially if you have a ready-made framework.
  2. Any bookmarklet you build can be used by others. Asking them to install it is trivial: go to a simple page, drag the bookmarklet to your bookmarks bar… and then, on any page you want, click the bookmarklet to affect the underlying page.
  3. With the proper framework in place, you can update the bookmarklet code and style without worrying about asking everyone to re-install their bookmarklets.
  4. Bookmarklets operate on any site you want (although see caveat emptor below). That includes the live site, and that means you get immediate access to real-life scenarios, rather than some temporary dev data on your dev server.
  5. Bookmarklets are Turing machines: they can modify the page by just injecting extra CSS, but they can also be much more elaborate, using JavaScript to modify DOM, fetch extra files, etc.

Our bookmarklet framework

It consists of three pieces:

  1. A simple page containing the bookmarklet. This is the page you send other people to to “install” the bookmarklet.
  2. A JavaScript file containing actual code modifying a page. (We don’t want to keep much code in the bookmarklet for the reasons that will become clear in a moment.)
  3. Any extra files (e.g. CSS) that the bookmarklet might want to fetch.

The page for bookmarklet installation could be as simple as this:

I use the Unicode recycling symbol (♺) in the name as a hint that you can click the bookmarklet over and over again to go through all the options.

The bookmarklet code, executed the moment the user clicks it, is just scaffolding:

(function(){ if (typeof designBookmarkletStart != 'undefined') { 
  designBookmarkletStart()
} else { 
  var scriptEl = document.createElement('script')
  scriptEl.type = 'text/javascript'
  scriptEl.src = 'http://www.aresluna.org/design-bookmarklets/wikipedia-text-colour/bookmarklet.js?' + (Math.random())
  document.querySelector('head').appendChild(scriptEl); 
}})();

To elaborate:

  • The bookmarklet doesn’t actually contain any code modifying the page. It just holds a simple loading routine to fetch that code from elsewhere (or execute it again if it’s already fetched.)
  • The actual code is loaded from a JavaScript file on the server. The random number attached to the URL ensures it’s not being cached.
  • All the names are preceded with design to ensure they don’t conflict with other names on the site.

Then, the JavaScript file invoked by the bookmarklet simply cycles through all the options, and fetches extra files as necessary.

Bookmarklet issues

Security restrictions. As Internet matured, some sites started being more restrictive about what exactly is allowed to modify their contents. Using Content Security Policy, a website can prevent any foreign bookmarklet from affecting it:

Fortunately, even if your website employs these, as in-house designer you should be able to talk to your security team and ask to allow you to use bookmarklets for your live site. (I did exactly that with our amazing security team at Medium.) One restriction, for example, might be that they are hosted on a specific domain your company or organization controls.

Ephemerality. By their nature, bookmarklets only appear when they’re invoked. Going to a new page resets the changes, and bookmarklet needs to be “applied” again. This is often good, but if you’re interested in something more permanent, a Chrome extension might be better (it’s a bit like a bookmarklet on steroids), or even a dedicated style manager like Stylish.

Visibility. Make sure that the there’s some sort of an indicator that the bookmarklet is running — it reduces the confusion about whether you’re seeing a live site, or a version that’s modified. (I learned this the hard way after announcing we shipped a certain visual change… only to realize I was looking at my bookmarklet’s effects and the code hasn’t yet been deployed.)

I usually programmatically put a red line above Medium logo so it’s obvious you’re looking at the altered site:

That’s it! Grab the code on GitHub, modify it as you see fit, and let me know if you ever find this technique useful — or whether you’re interested in seeing more articles like this one.