6 Free Tools Every Web Designer Should Have

Whether you're troubleshooting your site's CSS or editing your template files, there are all kinds of free tools available that can help improve your productivity.

6 Free Tools Every Web Designer Should Have

In this article, I'll show you a few of the free web design and development tools I use on a regular basis.

Note: I primarily work with Drupal, but you should find these programs useful for any kind of web development.

1. Color Calibration

Before you do any work involving color or design, you need to make sure your monitor is displaying accurate colors, at an appropriate brightness. An uncalibrated monitor can lead to your designs looking too dark, or off-colored, on other screens. Calibrating your monitor to a standard gamma level helps you make sure your designs look great on a wide range of monitors.


Some companies sell monitor calibration hardware for hundreds of dollars, but you can do a reasonably good job yourself with QuickGamma, a free, software-based, color calibration tool. It allows you to calibrate the red, green, and blue channels individually, for maximum accuracy.

2. Editing Code

Everyone has their own preferences when it comes to text editors, and many hours could be spent debating which one is best when it comes to working with Drupal, but there's one thing everyone can agree on: A good text editor should save you time and make your life easier.

Komodo Edit

Komodo Edit does just that. It's a free, open source editor, with plenty of professional features, including multi-document editing, syntax highlighting, autocomplete, regular expression search/replace, built in function call tips for PHP, JavaScript, jQuery, and more. Komodo Edit also has the best remote file editing capabilities of any editor I've tried, as well as a useful plugin system.

3. Page Design Debugging

As a Drupal themer, I spend a lot of time working inside web browsers, testing out layout changes, or tracking down bugs. I do most of my testing with Firefox, the main reason being the incredible Firebug extension.


Firebug is perhaps the most powerful web page debugging tool ever created. The number of useful things is extension lets you do is staggering.

Its simplest and most useful feature is the ability to click anything on the screen and see both the HTML and the CSS behind it. Everything is editable in real time. You can add, edit, or disable CSS attributes and HTML tags, and see the changes reflected instantly in the page.

Beyond editing, Firebug also handles everything from JavaScript debugging, with breakpoints and watch statements, to checking HTTP headers and graphing individual page element load times.

4. Page Design Debugging... in IE

One thing Firebug can't do is make your site render properly in Internet Explorer. That's where the Internet Explorer Developer Toolbar comes in.

IE Dev Toolbar

Think of it as "Firebug Lite" for IE 6 and 7. While lacking most of the more advanced features Firebug provides, IE Dev Toolbar does let you inspect elements and change their CSS attributes in real time. This ability alone can be invaluable in tracking down cross-browser layout bugs.

5. Color Picker

When working with designs in Firefox, I often need to check the color value of an image or background. This used to involve taking a screenshot and pasting it into an image editor.


These days I use the Colorzilla Firefox extension. It works just like the color dropper in Photoshop or Paint, letting you get color information with a single click. You can even right click Colorzilla's icon to copy the color value to your clipboard, in a variety of formats (like hexadecimal or RGB). Double clicking the icon will open a color palette, which is useful for finding similar colors.

6. Web Developer Toolbar

When working with a content management system like Drupal, it's often useful to be able to disable your cookies or cache temporarily.

Web Developer

The Web Developer extension for Firefox will let you do just that, and a lot more. This toolbar gives you the ability to disable images, cookies, cache, CSS, Java, and JavaScript with just a few clicks. It also provides quick access to page validation, form tweaks, layout highlighting and more.

But wait, there's more!

Those 6 are just a few of the great free tools out there for web developers. Others worth a mention include PuTTY, a great SSH client, Notepad++, a lightweight alternative to Komodo, and PNGGauntlet, the best PNG compressor ever.

If you liked this article, be sure to check out How To Survive Traffic Spikes With Drupal.

post to del.icio.usSubscribe

Posted by John on 2009-01-22