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