Quick and Easy: 5 Essential Bookmarklets for Web Designers

The World Wide Web, there is no lack of useful tools for web designers. Often, but they must be installed or integrated in a web project. The advantage of bookmarklets, however, is that they are simply added to the favorites and can be applied with a click.



Anyone who places great emphasis on compliance with a baseline grid as a web designer, is well served with Gridwax. The bookmarklet puts just such directly on a Web site. About the Shift and arrow keys it is possible to easily change the start position and the distance between the base lines.

With Shift and the arrow up and down arrow keys on the distance between the lines is changed by one pixel. With Shift and the left arrow and right arrow keys to select the starting position of the grid is changed.

Responsive Design bookmarklet

For testing responsive layouts that responsive design bookmarklet is useful. It displays a toolbar on top of the site to be tested can be selected via the standard resolutions for smartphones and tablets in portrait and landscape orientation. The site is then displayed within the selected resolution.

There is also the option of displaying the respective on-screen keyboard for the iPhone and the iPad. So can be tested very good, if a form is still well visible and operable for example, in On screen keyboard.



A particular challenge for web designers is the implementation of accessible Web sites. Here it is important to honor content taking into account the ARIA Policy. The bookmarklet Accessify not found in the source code low level of awards and gives information about how the award can be improved.

The bookmarklet informed about, among other things, such as images, links, forms and tables can be better distinguished, to make them accessible.


To ensure that forms work, they must be thoroughly tested. For this it is necessary to fill out forms again with inputs. autoPopulate Boorkmarklet sets available, which fills forms with the click of a mouse pseudo values. For various standard fields such as name, e-mail address, mailing address, several values ​​can be entered, of which one is selected randomly.

The bookmarklet recognizes on the basis of regular expressions, which expects an input form field and is one of the predefined values. Not always match the regular expressions on the names of the input fields. However, one can be done with JavaScript and whittle the bookmarklet so that it fits on the form to be tested.



Subscribe and never miss a post!

Subscribe to the free newsletter now and get fresh content delivered straight into your inbox. (No spam, we promise)

Comment Policy:

Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please. You can wrap code in [lang-name][/lang-name] tags.

Tell us what you're thinking...

If you want a picture to show with your comment, then get Gravatar!