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.
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
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:
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
- 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.
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 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.
- 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
- Miscellaneous: Clears cache, cookies, authentication, and
- 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
Web Accessibility Toolbar for IE
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
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
- Color: Displays the page in gray scale, lists colors used, includes
- 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
- 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
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.