My "Can't Live Without 'Em" List of Web Design Tools


I know, I know, pretty much every web designer out there has published a list of helpful tools they just couldn’t live without. And there are some great lists out there — I can easily waste an entire day just browsing from list to list and looking at all the nifty applications that can help make a web designer’s job just that little bit easier.

But I have a few handy little apps of my own that I’d like to add to the lists out there…because after all, you just can’t have too much of a good thing. Some are free, some are not, some are probably found on every other designer’s list, but all of them are well worth checking out.

HTML and CSS Tools

TopStyle – I own several html editors, and I admit I use them all for certain things, but my html/css/php editor of choice is this compact, easy to configure application. It has some terrific tools that make troubleshooting coding errors a snap (the tag matching feature is a must-have) and even has handy helpers for choosing color palettes, cleaning up your css, and overall site management. And best of all, with its intuitive menus and great built-in help files, you can set it up and learn to use its features in no time.

Firebug – This Firefox add-on is a must-have for troubleshooting layout issues, tweaking designs, and getting things downright pixel-perfect. One of my favorite ways to use it (aside from troubleshooting) is for trying out different design versions without having to create multiple mockups of a page. You can swap out colors, images, borders, change placement of elements, etc with just a few clicks, and see the results instantly on the screen.

Image Editing and Color Tools

Irfanview – Handy little photo editor that allows you to quickly resize, crop and do basic touchups on your photos.

Pixie – I’ve tried several color selection tools, but this tiny application is a fave. Need to match the colors in a logo to the colors in a site? Just launch this little helper, mouse over the color area on the screen, and you’re done. Simple and brilliant. I often use Pixie in combination with this Color Palette Creator to get a range of shades of a given color for use on a site.

Fireshot – This is another add-on for Firefox. With Fireshot, you can create quick screenshots of your browser window, or the entire web page. Add notes, text, drawings, shapes, crop, edit and save, email or simply copy the result to your clipboard. Great for quick tutorials on using a web application’s admin features, pointing out a section of the layout that needs tweaking, etc. And I have to admit…I’m a sucker for the camera shutter sound effect.

File Management Tools

Bulk Rename Utility – I recently worked on a project where an ecommerce site owner discovered he would have to rename in excess of 400 alternate product view images in order to get them to work with a custom script. He was not a happy camper until I shared this free utility with him. With just a few clicks, we were able to rename all of the photos in a matter of minutes. The flexibility of this utility is simply outstanding — with a little creative thought, it can handle pretty much any renaming needs you might have.

Dust Me Selectors – Over time, any large web site accumulates css styles that become obsolete, but are still cluttering up the stylesheet. Dust Me Selectors is a Firefox add-on that creates a list of selectors that aren’t being used. Great for cleaning up an overgrown site.

HTML Link Validator – We’ve all done it. You play with different versions of a page, and in the process wind up uploading index-test.html, index2.html, index-new.html to the server. Or, you’re updating a file, and want to preserve the original version as a rollback option if needed. So you end up with file.php, file.php.orig, file.php.bak, file.php.032009 and so on. Or, if you run an ecommerce site, you may have products that have been inactivated, but the images are still on your server. If you’re careful, you remember to clean up those files, but all too often, they get left behind on the server as orphans. Over time, the number of orphans on even a well-maintained site can get overwhelming. This handy tool will browse your server and find those orphaned files so that you can delete them.

Be Sociable, Share!

Comments are closed.