In this post, I’m gonna run over some useful bookmarklets that have helped me with web design and hopefully will aid some of you. Now, you might be wondering, what on earth is a bookmarklet? A bookmarklet is a browser addon stored in a bookmark. When clicked, they use javascript to add in functionality to browser. If that’s still not clear, just watch one of the videos below, what they do should become more apparent! Now, without further ado, 3 that have helped me with web design!

live.js

First on the list is live.js. This bookmarklet will monitor the current page’s CSS and Javascript, looking for any changes. If any changes are applied to the CSS, they are dynamically applied to the HTML. If any changes are made to the Javascript, the page will reload.

This has been done before in dedicated apps, but I’ve found live.js is such a lightweight and easy solution. I’ll often kick open my text editor, head over to the deployment page and fire it up. It’s quick and simple.

Fount

Next up is Fount. Fount tells let you determine the font family of any piece of text by clicking on it. It also tells you the font size, weight, and style.

I love seeing great typography in pages, it’s a great source of inspiration. Fount let’s me quickly see what fonts a page uses and allows me to keep it in mind for any future projects I might have.

Markup.io

Finally, there is Markup. Markup lets you draw on any webpage with a variety of tools to express your thoughts, make a point or just simply edit it.

It’s worth it’s weight in gold when asking for design critique. Instead of someone telling you this elements looks great/terrible, you can highlight it straight on the web page and send it over.

Have any of these helped, do you use any bookmarlets that you’d like to recommended? Let me know in the comments.