Bulletproof Tools

Fortunately, a few tools are available that make testing various states of a page's design quick and easy. Like any good tool, if it's easy to access, easy to use, and doesn't get in the way, it's a keeper. If you want to test a page's readability in the absence of images and/or CSS, you can do so using a few different methods: favelets, the Web Developer Extension toolbar for the Firefox and Mozilla browsers, or the Web Accessibility Toolbar for IE/Win.

FAVELETS

Favelets are tiny applications written in JavaScript that dynamically trigger events on a Web page. The JavaScript is contained in a bookmark or favorite that the browser can store, offering single-click access. This JavaScript is really just a long string of commands that's put into a hyperlink. Favelets can do handy things like validate the current page's HTML, toggle or disable style sheets, reset the dimensions of the browser's window to simulate different screen resolutions, and much more.

One such repository of favelets can be found at Accessify.com (www.accessify.com/tools-and-wizards/accessibility-checking-favelets.asp) (Figure 6.15), where a list of helpful links is available. Bookmarking these little snippets of JavaScript to your favorite browser enables quick access to various test modes.

Figure 6.15. Accessify.com is a useful collection of resources and links devoted to Web site accessibility.

For instance, in Figure 6.16, I've dragged the "Disable stylesheets" favelet to my browser's bookmark bar. Now disabling CSS for any site is just a click away at any time. Applying the 10-second usability test mentioned earlier in this chapter just got a whole lot easier.

Figure 6.16. After you drag a favelet to the browser's bookmark bar, it's there and ready to disable style sheets on any site you happen to land on.

^tip

Find more favelets at these sites: http://tantek.com/favelets/ and www.andybudd.com/bookmarklets/.

Similarly, other favelets can alter the page in additional ways. For instance, the "Show all DIVs" favelet outlines all <div> elements, giving you an instant view of the page structure (Figure 6.17).

Figure 6.17. Accessify.com looks like this after you enable the "Show all DIVs" favelet, which outlines all <div> elements with a red border.

Because of their unobtrusive nature, favelets can become part of your everyday design work and allow you to check your bulletproofness at any time.

WEB DEVELOPER EXTENSION

If you're a Firefox or Mozilla browser user, I highly recommend the Web Developer Extension toolbar, written by Chris Pedrick (www.chrispederick.com/work/firefox/webdeveloper/). The toolbar is essentially a collection of actions, much like favelets, that are applied to the current page. The actions are grouped in a toolbar at the top of the browser (Figure 6.18).

Figure 6.18. The Web Developer Extension contains dozens of actions via drop-down menus from the toolbar.

Every test imaginable is included here. For example, under the Disable menu, you can quickly test the page with images turned off and make sure background colors are specified along with their related images, as described earlier in this chapter.

Figure 6.19 shows the Disable Images option applied to SimpleBits; setting this option instantly turns off images so that you can check for readability. Other options combine the best favelets (resizing the window, validating the markup and style sheets, etc.), with other options such as the ability to edit a site's CSS right within a sidebar. This is handy for quickly testing small edits.

Figure 6.19. Checking the absence of images is as simple as clicking the link to instantly reveal a page's bulletproofness.

The Web Developer Extension creates a "bulletproofing dashboard" of tools, indispensable for anyone who creates pages for the Web. Testing for the absence of images, CSS, and a bevy of other scenarios is no problem.

WEB ACCESSIBILITY TOOLBAR

Much like the Web Developer Extension, the Web Accessibility Toolbar offers a dashboard of helpful tools for users of IE/Win (Figure 6.20).

Figure 6.20. Check pages on their level of accessibility with the Web Accessibility Toolbar for IE/Win.

In addition to validation, window resizing, and CSS options, the toolbar includes extra accessibility diagnostics that can be instantly applied to any given Web page. This is a great option for those using Internet Explorer for Windows.

VALIDATION AS A TOOL

I had mentioned automatic page validation as a favelet and feature of the Web Developer Extension, but validation of markup and CSS is a tool in and of itself.

Validating a page's markup and CSS against the specifications written by the World Wide Web Consortium (W3C) ensures better, faster rendering of pages and thus gives your designs the greatest chance of being properly delivered. Think of this as you would spell-checking a paper and making sure all your T's are crossed and your I's are dotted.

Complete validation can sometimes be difficult, if not impossible, on large-scale sites, with large teams all working on the same documents. Further complicating matters is content management software that unintentionally spits out markup that is invalid, which makes the challenge for good- intentioned designers even harder. It's often a goal to strive for, but perfection is sometimes out of a single person's hands.

But what I'm stressing here is the importance of validation during the initial design phase of a Web siteanother tool to leverage while you're striving to make your sites bulletproof. As you're building flexible, accessible designs, don't forget to validate your markup and style sheets as you go along; doing so may save you the headache of an unknown rendering error.

For example, a single unclosed <div> element could mean the difference between a functioning CSS-based layout and one that's aggravatingly broken. I can attest to this: I've spent hours trying to fix an error, but because I failed to validate the page, my simple omission of a closing element became the obvious root of the problem. By regularly validating your files, you're preventing an overlooked mistake from ruining your designs. And that one overlooked mistake could mean different results in different browsers. A validated page stands a better chance at being read no matter which browser is reading it.

How to validate

^tip

For more on choosing DOCTYPES, see www.htmlhelp.com/tools/validator/doctype.html.

Validating your XHTML is as simple as using a DOCTYPE at the top of your pages, then running those pages through a validator to check for errors. The DOCTYPE tells the validator (and any other software that cares to know) what rules your page is intending to stick by. For example, the bulletproof examples used throughout this book use the XHTML 1.0 Transitional DOCTYPE, and so have the following code at the very top of their pages:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> 

You may, of course, choose to use a different DOCTYPEit's just important to settle on one and understand the rules associated with it so that proper validation is possible.

A validator is an application that parses the document and checks for errors against the W3C specification. The DOCTYPE declaration at the top of the page tells the validator which spec to use.

The W3C itself has a free Web-based markup validator (http://validator.w3.org/). Using it is as simple as entering the URL to check a page's validness (Figure 6.21). The aforementioned favelets and Web Developer Extension provide one-click access to this tool by sending the current page's URL directly to the W3C's validator.

Figure 6.21. You can find the W3C's free Web-based validation tool at http://validator.w3.org/.

I often use the W3C's "Validate by File Upload" feature, which allows for the uploading of local files that you are working on that aren't yet available on the public Web. The validator will take your working file and validate it as it would a page out on the actual Web. Even easier is to use the "Validate Local HTML" feature in the Web Developer Extension toolbar (mentioned earlier). Choosing this option will automatically upload a local HTML file that's currently being viewed in the browser. Again, it's that early design phase where I find it most helpful to stay on top of validating errors.

In addition to validating markup, it's just as important (and just as simple) to validate your CSS. The W3C offers its own validator (http://jigsaw.w3.org/css-validator/), which works almost identically to the markup version mentioned earlier. Via a favelet or toolbar extension, this validator's functions are also just a single click away.