20 Must have Bookmarks for Web Designers

Bookmarks are often used to save a certain page that is of interest to you. With just a click you can re-visit the information that you need.

Here is a list of 20 very helpful web designer and developer bookmarks.

WTFramework - Learn JavaScript Framework Used
Ever wondered which JavaScript framework was used on a specific website but was too lazy to check the source code for the answer?


Xray
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.


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


Slayer Office - Favelet Suite
This is a favelet that combines most of my development favelets. When invoked, a div element will appear in the top left corner of your browser window with a list of all the favelets I’ve included. Simply click the link you want to invoke the favelet. An “info” icon is available to take you to the favelets information page here on slayeroffice.


Aardvark - Display Elements & More


ReCSS - Reloads The CSS
This little bookmarklet makes refreshing your CSS a breeze. It comes in quite handy when you’re developing dynamic applications.


W3C Markup Validator
This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.


W3C CSS Validator
Check CSS and (X)HTML documents with style sheets. See any possible error & get the recommendations.


Resize Browsers
When testing a design in various resolutions, these bookmarklets resizes your browser to the mentioned popular sizes.

So, rather than updating the resolution of the computer, this method is way faster.


BuiltWith - See The Ingredients Of A Website
BuiltWith is a website analysis tool, providing technical analysis and SEO optimization information to further your website’s marketing, sales and navigation effectiveness.


Super Screen shots - Instant Screen Shot
When you need to get a screenshot of a webpage, but don’t want to use an image editing or screenshot software, this bookmarklet helps alot.

It, almost instantly, presents you the full page screenshot & also you can set the size & format form the page displayed.


Browser Compatibility Test
Browsershots makes screenshots of your web design in different browsers.


Google Translate
Get translation with a single click and make your webpage instantly available in other languages.


Picture Finder
At first look this site doesn’t seem that attractive, but once you try your first search you’ll find a neatly done flash interface with photo previews, sorted by origin.


Brands of the World
Best brands of the World is the most comprehensive resource and one of the most visited web sites where visitors can browse and access copies of the world’s famous brands and logos.


What the Font?
Submit an image to WhatTheFont to find the closest matches in our database.


Icon Base
Icons play a very important role in the user interface and are essential for the success of your company.


Colorzilla
Advanced Eyedropper, Color Picker, Palette Viewer and other colorful goodies for your Firefox


Color Schemes
Canonical (Huge) List of Online Color Resources for Designers


Web Design from Scratch
More than a tutorial, this’ a DIY (Do It Yourself) Guide to WEB 2.0 Style. It’s constantly updated. I personally love this site. The guide tells you step by step what makes a design looks web 2.0 and how to achieve it.