ASD Web Design Guidelines

Part 3: Good Design Habits

As with anything, if you develop good habits to begin with, you don't have to break them later.

Stick with the 216 color web palette

If you've looked at even one tutorial about building web pages, you've probably run into this already. If you haven't, there are links on the last page of this article that can explain it, sometimes in great detail, sometimes not. The good news is that you don't really need to understand it in great detail, mostly because as the Internet has matured, the software to create web pages has started taking that palette into account.

Make sure your pages degrade gracefully

"Degrading" is an industry term for backwards compatibility, which means ideally, any browser should be able to look at your page and get the information that's on it. The <noframes> tag described in Part 4 is a good example. Another example is JavaScript. If you use JavaScript for a function on your page, make sure that a browser that doesn't support JavaScript won't be left out in the cold when they don't get that function. For example, if you use JavaScript to make a button look like it's being pressed down (called a rollover by most WYSIWYG HTML editors), an older browser will still see the original button, but not the pressed one. That's probably okay, because it doesn't limit the functionality of the button, just the coolness of the animation. HOWEVER, if you use JavaScript to make a navigation menu and that's the only way to get around your site, then you've just locked out a measurable percentage of browsers. So that leaves you two options -- don't use the menu at all, or (better) provide a text menu somewhere on the page.

Provide a bare-bones, text-only alternative site

This is an option when you just have to do something on your site that isn't supported by some browsers or assistive technologies. A text-only site addresses all of the issues above, but can create more work. It's usually not necessary to create a complete mirror site if you code your main pages correctly.

Test, test, test!

I can't stress this enough. Before you post your site (or even just a new page), make sure it's going to work! At a minimum, you should check it on a Mac and a PC, in both Navigator and Explorer! If you've done anything tricky, make sure it displays correctly. Ideally, you should check it with a text-only browser like Lynx or MacLynx. It can also be enlightening to view your pages in Navigator or Explorer without loading the images.

The two biggest surprises for people who design on one platform and have never browsed on the other are the differences in the way fonts and colors look. Windows tends to darken things (dark blue becomes black, dark red becomes brown) and Microsoft uses larger default text sizes, so that page so carefully crafted on a Macintosh with all the line breaks in the pixel-defined table goes kerblooie on Win98.

It's also a good idea to run a code validator on your pages, especially if you're using a WYSIWYG page editor like Adobe Pagemill or Claris HomePage, particularly the older versions of these. Almost all WYSIWYG editors older than a year or two create non-standard code that can be problematic. I'll write more about that later.

You should also test your site for accessibility. The best site that I've found for this is Bobby (http://www.cast.org/bobby/). Not only does Bobby tell you where potential problems are, it gives you suggestions for fixing them.