Weekly Freebies: 15+ Useful Bookmarklets for Designers

Bookmarklets can be invaluable tools for both web designers and developers that like to experiment and troubleshoot in the browser. Today we’ve gathered an awesome collection of free bookmarklets for everything from validating your HTML to rearranging elements on a page without code. Enjoy!

The Ultimate Designer Toolkit: 2 Million+ Assets

Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.

Explore Digital Assets

WHATFONT

What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that’s too complicated. It should be just a click away. Hence I wrote this tool, with which you can easily get font information about the text you are hovering on.

screenshot

Syntaclet

As a programmer it’s very common to be surfing the interwebs for various code snippets and examples. The problem is many websites have poor methods for displaying the sample code making it hard to read. This is where Syntaclet comes in. Simply click the Syntaclet Bookmarklet and it will automatically apply language specific syntax coloring with line numbers to all the code on the page.

screenshot

Bookmarklets Collection

This page has a bunch of bookmarklets created specifically for designers and developers. There are plenty of useful tools here for everything from checking out stylesheets to automatically activating checkboxes.

FFFFALLBACK

Web fonts are here, sparking an exciting new era in web design. FFFFALLBACK makes it easy to find the perfect fallback fonts, so that your designs degrade gracefully.

screenshot

Firebug Lite

A small bookmarklet to easily install Firebug Lite on any web page.

screenshot

SpriteMe

Background images make pages look good, but also make them slower. Each background image is an extra HTTP request. There’s a fix: combine background images into a CSS sprite. But creating sprites is hard, requiring arcane knowledge and lots of trial and error. SpriteMe removes the hassles with the click of a button.

CSSESS

I’m happy to announce the release of cssess (pronounced secess, like secession), a bookmarklet that helps you find unused CSS selectors on any site.

screenshot

Mobile Perf

It displays a menu with links that load other bookmarklets including Firebug Lite, Page Resources, DOM Monster, SpriteMe, CSSess, and Zoompf. The Mobile Perf menu is updated as new bookmarklets are released – so you get the latest tools automatically.

screenshot

DOM Monster

DOM Monster is a cross-platform, cross-browser bookmarklet that will analyze the DOM & other features of the page you’re on, and give you its bill of health.

screenshot

XRAY: look beneath the skin

XRAY is a bookmarklet for Internet Explorer 6+, and Webkit and Mozilla based browsers (including Safari, Firefox, Camino or Mozilla). Use it to see the box model for any element on any web page.

screenshot

MRI: test your selectors

MRI is a bookmarklet for Internet Explorer 6+, and Webkit and Mozilla based browsers (including Safari, Firefox, Camino or Mozilla). Use it to test and play with selectors.

screenshot

FontFriend

Handy tool from Matt Wiebe that lets you experiment with the typography of any CSS-typeset page on the fly, without refreshing or opening a new window. Check out this screencast, grab the bookmarklet, and start messing with typography you find online

screenshot

Design

Design is a suite of web-design and development assistive tools which can be utilised on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet.

W3C Validate This Page

This is the basic “Validate This Page” Favelet. It simply submits the URL for the currently viewed page to the Validator for processing. Results appear in the same window.

Layout Grid Bookmarklet

Simply applies a layout grid image to the body of the page. I have also created a Layout Grid Overlay Bookmarklet which creates a div, positions it absolutely and then applies the background image to the div. Because the image is transparent, you get a nice overlay effect. By changing the position of the div to “fixed” you can also create a nice Layout Grid Fixed Overlay Bookmarklet which may be useful on occasion.

screenshot

ReloadCSSEvery

One annoying aspect of writing a stylesheet is having to reload the page in your browser to see your incremental changes. There are ways to workaround this, but I find them less than ideal so I created ReloadCSSEvery. It refreshes only the CSS of a loaded page every 2 seconds so you can use your CSS editor of choice and see semi-real-time changes in your browser when you save.

Bookmarklet to install a WordPress Plugin

I’ve created a bookmarklet that you can use to install a WordPress plugin. While viewing a plugin in the WordPress Plugin Directory, click this bookmarklet, and you’ll be guided in installing that plugin on your site.

PrintWhatYouLike

Tired of printing web pages only to find your printout is full of ads, empty space and other junk you don’t want? PrintWhatYouLike is a free online editor that lets you format any web page for printing in seconds!

Liquid Page

I was once again changing the design of one of my websites when I realized that it would be great if I could just move things around on a page to preview the changes – without any coding. As it turns out, there is a solution to that problem: A bookmarklet and a few lines of JavaScript did the trick. Using jQuery and its UI extension, this actually turned out to be rather simple to implement.

Bookmarkleter

This tool creates bookmarklets from JavaScript code.

screenshot