When you’re trying to organize your favorite websites, the common thing to do is save them as bookmarks, which are folders that allow you to organize information so you can access in an easy way to it at anytime, but there is more than just having your bookmarks organized, you can use your bookmarks toolbar to place something known as the bookmarklets, which are tiny pieces of JavaScript code that allows you to do different things that will enhance your experience while you’re navigating.

Today we are going to explain the benefits that you can obtain by using bookmarklets, we will show you also examples of some of the nicest bookmarklets out there.

Bookmarks and Bookmarklets, what is the difference?

Well, the difference between this two is that the bookmarks are elements that direct us to a determined URL, helping us to skip the process of looking for the site every time that we need it. You can organize your bookmarks on folders that are placed on the task bar of your browser, or you can leave them at the bookmarks toolbar, which provides you instant access to them.

On the other hand we find the bookmarklets, which are tools that allow us to do more than just finding an URL, this objects can extend the functionality of our browser, regardless of the one we use, usually Bookmarklets are able to work on different browsers. Unlike plugins or add-ons, bookmarklets don’t affect your browser’s performance. Finally, it’s useful to have some bookmarklets that can easily improve our navigation times and effectiveness, now we are going to show you a short list of some of the greatest bookmarklets on the web.

1. Quix

Have you ever gotten stressed out while trying to organize your bookmarks library?, some browsers offer some nice plugins that helps you manage your bookmarks in an organized way but they also imply to sacrifice a lot of the browser’s performance. Quix does not slow down your browser, thanks to the fact that it only works when the user needs it, all you need to do is to add the shortcut to Quix on your toolbar and there you’ll have it.

The great thing about Quix is that it doesn’t need space for store your bookmarks, instead, what it does is to provide a command series that lead you to many different routes, including social networks, integration commands, search engines and many others.

For start, you need to drag the Quix object to your bookmarks toolbar, so you can use it at any time, after that, if you’re on Firefox, right click over Quix and select properties, then enter q as a keyword and accept, now you can click Ctrl + L (⌘ + L on Mac) and then type q and enter, that will automatically open the Quix form field, this form field will display every time you follow this track or click over the button, the form field is the place where you can enter a value of the large list of commands that Quix has to offer you. You can check on Quix’s website the information regarding other browsers.

As you can see, Quix it’s a great tool to access many of your bookmarks and resources in a faster and organized way, you only need to remember the shortcuts so you don’t have to dig into your large collection of bookmarks. This is definitively a truly recommended resource for all the web lovers and developers out there.

2. Layout Grid Bookmarklet

This is a nice bookmarklet for all the web developers and designers, although is not as complex as Quix, it’s still a very useful tool.

Yes. what this bookmarklet does is that it places a layout grid image on the body of any website, a very useful tool when you are trying to measure distances and proportions of and specific page. Because it’s a bookmarklet, it doesn’t have to be downloaded or installed, simply drag the button to your bookmarklets toolbar. You can find on the author’s website another couple of bookmarklets similar to this, only with few changes on it.

3. WTFramework

Great tool for web developers that are wondering about which JavaScript framework was used on a website and simply don’t want to go check the source code.

After dragging the WTFramework to the bookmarks toolbar, you only need to click on the button and a black frame will appear on the upper right side of the browser where the information concerning the JavaScript source will be displayed (jQuery, MooTools, etc).

This bookmarklet is a straight-forward tool, instead of wasting time on checking the code source, you only need to click on WTFramework and the info will come out.

4. Slayer Office

Slayer office is a large bookmarklet compilation where you can find a great list of bookmarklets.

The list offers you a variety of bookmarklets, including color, rulers and even HTML viewers, definitively a great tool to have nice bookmarklets in one place.

It’s a helpful tool due to the quality of bookmarklets that are included on it.

5. Aardvark

With this implementation you can check the properties of a website in terms of its elements so you can take some actions about it.

Aardvark allows you to select different elements of a website and even clear or isolate it.

We find this tool very useful for those who don’t have much experience on checking source codes but are looking for it.

6. Edit Website

There is no real use for this bookmarklet, but we are sure that many of web developers and designers will find it great.

What you can do with this tool is modify any website locally completely like you want, it can be useful for making some website tests but more than that it’s definitively an amusement bookmarklet.

It’s fun to be able to change our current websites to our taste, just to break the routine.

7. W3C Markup Validation

This implementation is great because it allows you to use the W3C validation as a bookmarklet instead of having to go to the W3C website.

Thanks to this tool, you can check the complete analysis of a website, finding on the process a list of errors and recommendations. After clicking on the bookmarklet button, you will be taken to a new window where a complete list of errors and suggestion will show up.

8. W3C CSS Validation

Similar to the previous bookmarklet, this one focuses on CSS, analyzing the complete style sheet of a website.

This is an excellent tool that will assist you on finding CSS errors both in anonymous websites as in yours, without having to explore the complete style sheet. The great thing about this is that it not just only counts the errors, but tries to explain them in a simple way.

9. Firefox Resize Bookmarklet

When making website tests, usually the developer needs to constantly switch between different screen resolutions so he can makes sure that everything is getting OK, usually to do this, the person needed to go to the screen properties and change the resolution manually.

Not only different resolutions but also alignments, that way you can check one site to the right side while reviewing another on the left.

10. Design

Design is one of the nicest resources for web developers. After dragging the Design button to your bookmarks toolbar, you will only need to click and an easy to read menu will pop up.

Design offers you the option of placing an overlay grid fully customizable, a rule to take the measures you may need, a crosshair similar to the Autodesk software and a unit measure tool. Great bookmarklet for web designers.

One of the nicest things about Design is the grade of customization that offers to the user, once again, a highly recommended bookmarklet.

11. FontFriend

Awesome tool for those who love playing with fonts, FontFriend is a simple bookmarklet that goes on your bookmarks toolbar in order to be used.

After placing the button, FontFriend will allow you to see which fonts are being used on any website and change them to the ones you like without having to put your hands inside the code and refreshing pages, a recommended implementation for developers and designers.

12. jQuerify

This bookmarklets has two uses, the original purpose is to insert jQuery inside a website that doesn’t have jQuery on it, so you can play with the website using this language.

But what happens if the website already uses jQuery?, well, then the second use comes, which is the chance to find out which jQuery version was used on the selected website. Pretty cool bookmarklet.

13. jQuery Plugin Detector

We believe that this could be an awesome complement to the previous bookmarklet of the list, making the jQuery analysis a little bit richer and complete.

What you can do with this bookmarklet is to identify which jQuery plugins were used on the construction of a determined website. This is surely useful when you find something that amazes you and you want to know how was it done.

14. PageZipper

Probably one of the greatest bookmarklets around, PageZipper will improve your search times a lot, because it saves you from clicking on the “next” button over and over.

As you can see on the screenshot, this bookmarklet merges all the next results in a single page, similar to the progressive loading system that can be found on the Iconshock’s library, great implementation for optimizing your researches.

15. MRI

With this bookmarklet you can taste and play with selectors in an easy and fast way.

A simple box opens once you’ve clicked on the bookmarklet button, there you need to enter the selector value so you can test it.

16. Visual Event

The best way to explain this tool is by quoting their author’s words, they describe Visual Event as a bookmarklet that visually shows the elements on a page that have events subscribed to them, what those events are and the function that the event would run when triggered.

Useful implementation for web developers.

17. ReCSS

With ReCSS, you can reload the CSS of a website once you have complete any changes, it’s a simple tool that surely more than one will appreciate.

And that’s it, there you have it, 17 of the greatest bookmarklets for web designers and developers, we hope you find useful this article and share it with your friends, also let us know if you remember a bookmarklet that fits in this article and we didn’t mention, see you soon guys.