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.
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. Export All Sites (by Macromedia): Automates the process of exporting all site data for backup. —>
- 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.
- 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.
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.