This article
originally appeared in the Design & Usability Tactics newsletter. Click
here
to subscribe automatically.

When you think of Web design tools,
you probably think of major software programs, such as Dreamweaver, Fireworks,
and GoLive, your favorite FTP utility, and your browser. But most Web builders
also have an assortment of smaller, special-purpose tools that they rely on to
do their work faster and more efficiently. Some are stand-alone utilities and
others are add-ins to the main Web design programs.

Here are profiles of a few add-ins
from my Web design toolbox. I hope you find them as useful as I do.

Dreamweaver extensions

I’ve written books about Macromedia
Dreamweaver, so it’s no surprise that I use Dreamweaver as my main Web design
platform. One of the nice things about Dreamweaver is that the program is
designed to accept third-party extensions that add functionality to the base
program.

The Dreamweaver Exchange is a section of the Macromedia Web site
where you can find and download extensions for the program. There are hundreds
of extensions available, ranging from simple code snippets to suites of
utilities. Some are commercial programs available for sale, but most are free
contributions from the Dreamweaver user community.

Here are a few of the extensions
that I use:

  • Advanced
    State Insert (by Jeff Shaikh): Inserts a list of
    states into a form.
  • Auto Copyright (by Colm Gallagher): Inserts code that automatically adds
    the current year to a copyright notice, as in Copyright 2002-2004.
  • Calendar Popup (by Paul
    Davis): Inserts a pop-up calendar for input into a date field in a form.
  • Comment It Out (by C. A. Vijayan): Adds a command to the context menu in code
    view that makes it quick and easy to convert the highlighted code to a
    comment.
  • CSS Visualizer
    (by Macromedia): Adds outlines around block elements such as divs to make them visible in design view without
    pointing to the element with your mouse.
  • Just So Picture Window (by E.
    Michael Brandt): Inserts code to pop up an image in a new browser window,
    automatically sized to the image and/or the visitor’s screen resolution.
  • Lorem
    and More (by David Powers): Inserts your choice of several different kinds
    of dummy text into a page layout.
  • WebAssistPayPal eCommerce Toolkit (by WebAssist):
    Creates buttons with all the hidden fields needed to pass info to the
    seller’s PayPal account or shopping cart.

Most of these extensions are
convenience items. You could do the same thing by manually typing or pasting
the appropriate code into your page, but the extensions enable you to do it
with the click of a button or menu command.

Checky extension for Mozilla

Like Dreamweaver, browsers also
accept extensions that add features to the basic browser. One extension for the
Mozilla browser that is of particular interest to Web builders is Checky.

This extension adds menu commands
that enable you to submit the current page to a long list of validation and
page evaluation sites and displays the results on a new tabbed page. It takes
only a couple of mouse clicks to validate the page’s HTML, CSS, RSS feed, or
links; check it against accessibility guidelines; and more.

You can find Checky and other
Mozilla extensions at the Mozilla
Web site
.

Web Developer extension for Firefox

There are even more extensions available on
the Mozilla.org site
for the Firefox browser. The one I use the most is the
Web Developer extension, which adds a toolbar that is loaded with useful
features to help test and analyze Web pages.

Here’s a sampling of some of the
tools included in the Web Developer extension for Firefox.

  • Disable: Disables cookies, JavaScript, and more, selectively.
  • CSS: Views and edits the page’s CSS in a sidebar.
  • Forms: Converts GETs to PUTs, populates fields, and more.
  • Images: Shows or hides images, displays image dimensions and
    paths, outlines images without ALT attributes, etc.
  • Information: Displays access keys, div sizes, classes, and
    more.
  • Miscellaneous: Clears cache, cookies, authentication, and
    more.
  • Outline: Outlines block level elements, frames, cells, etc.
  • Resize: Displays the current window size or allows you to select
    a predefined size.
  • Validation: Validates the current page and displays the
    results in a new tab. The list of validators
    isn’t as long as Checky, but the major players
    are there.

Web Accessibility Toolbar for IE

The Web
Accessibility Toolbar
does for Internet Explorer much of what the Web
Developer extension does for Firefox. As its name implies, the main focus of
the toolbar is on accessibility checking, but it also includes some general Web
development features.

Here’s a quick overview of the
toolbar buttons and what they do:

  • Validate: Validates the current page through one of several validators.
  • Resize: Resizes the browser window.
  • CSS: Toggles CSS on or off and displays the current styles.
  • Images: Shows or hides images or alt text, displays a list of
    images.
  • Color: Displays the page in gray scale, lists colors used, includes
    contrast analyzer.
  • Structure: Displays heading structure and highlights various
    page elements, such as lists and tables.
  • Tools: Provides access to several accessibility checkers and
    other page analyzers; it also includes simulations of several vision
    disabilities.
  • Doc Info: Displays page weight, metadata, lists of links, etc.
  • Refs: Links to accessibility references.

Although the Firefox and IE toolbars share some of the same
features, they each have their own strengths. I use the Web Developer extension
in Firefox to test and troubleshoot my page designs and to analyze the
construction of other interesting pages. The outline feature is invaluable, and
the ability to quickly clear the cache and disable JavaScript or other features
speeds the testing process considerably.

In contrast, the IE toolbar excels
at accessibility testing. The color tools, including the color blindness
simulator, are particularly useful, and the heading structure display and
various lists come in handy from time to time.

Both tools make it fast and easy to
validate your pages, so there’s no excuse not to validate.