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!
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
PowerPoint & Keynote
Sans Serif, Script & More
Icons, Vectors & More
Logos, Print & Mockups
Landing Pages & Email
Shopify, Tumblr & More
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.
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.
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.
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.
A small bookmarklet to easily install Firebug Lite on any web page.
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.
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.
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 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 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 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.
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
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.
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.
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.
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.
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!