The Web Designer's Toolbox

As a web designer, you'll find lots of free and paid programs that perform certain tasks quickly and effectively. Accumulating a good set will save you a lot of time.

Color Programs

Dealing with color is one of the thorniest issues you'll have. There are literally millions of colors available and because web colors are expressed in the somewhat mysterious HTML color format (#000000 to #FFFFFF), it can be hard to find the exact colors you want.

With millions of colors to choose from, an HTML color picker tool is an essential part of every web designers toolbox. There are lots of features available: suggesting 'complementary colors' to the one you've chosen, for example. Some let you take a picture of your screen and click on parts of it to see which HTML color is being used -- useful when you see a color somewhere that you think would work great on your website.

My personal favorite is Color Schemer from www.colorschemer.com -- it has all the features you could want in an HTML color picker. If you're after something free, though, you should try the more compact Pixie, from www.nattyware.com/pixie.html. It sits in the corner of your screen and tells you the color code of any color you hover over.

HTML Checkers

There's not much competition when it comes to HTML checking. You need W3C's HTML Tidy, or one of the many programs based on it (see http://tidy.sourceforge.net/). Tidy can clean up disastrous HTML, including the type of problems produced by programs like Dreamweaver and Microsoft Word. Even if you think your code is great, chances are Tidy will be able to make it smaller and better.

Mozilla Firefox Extension

When you use Firefox as your web browser, you gain access to lots of extensions which can be installed quickly and easily. Since so many people using the browser are web designers, a great many of the extentions are for web development tasks. This makes Firefox an ideal browser to use when you're creating a website.

Which extensions are most useful? Here's a quick list:

Web Developer's Toolbar (http://chrispederick.com/work/firefox/webdeveloper/). This is the most useful Firefox extension for web designers. Its best feature is that it lets you experiment with CSS styles 'live', so the style of your page changes as you do it -- a great way to write CSS.

LinkChecker (http://www.kevinfreitas.net/extensions/linkchecker/). You absolutely must check your website for broken links, which is usually quite a chore. Because LinkChecker integrates with the browser, it can check your links for you on-the-fly. It highlights working links in green and broken ones in red. Simple, but effective.

HTML Validator (http://users.skynet.be/mgueury/mozilla/). Lets you check whether your pages are valid HTML without having to type all their URLs into an online validity checker. Takes a lot of the pain out of code validation.

SearchStatus (http://quirk.co.za/searchstatus/). When you're trying to monitor your site's position in search engines, this extension is indispensible. It shows you the Google PageRank and Alexa ranking for your site, giving you an idea of both the link popularity and traffic the site gets. It also lets you check who links to your site, and whether the search engines have added it to their index yet.

As a website designer, you must create your own web designer's toolbox. Your toolbox will save you both time and money.