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!
19+ Million Digital Assets, With Unlimited Downloads
Get unlimited downloads of 19+ million design resources, themes, templates, photos, graphics and more. An Envato subscription starts at $16 per month, and is the best unlimited creative subscription we've ever seen.
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.
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.
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.
Firebug Lite
A small bookmarklet to easily install Firebug Lite on any web page.
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.
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.
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.
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.
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.
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
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.
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.
