Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

How Should Web Designers Manage Layouts?

Last updated Oct 17, 2003.

By Molly Holzschlag

No doubt you're wondering how you should manage layouts. If tables are problematic, and CSS is great but there are browser support concerns there, what do you do?

Well, one solution is called "Transitional Design." In this scenario, the designer uses a combination of techniques, with an emphasis on the following:

  • Use CSS to define fonts. This is a very helpful technique because most all browsers in use today—even Netscape 4.x—support this aspect of CSS. Leaving the font element and associated attributes out of your documents can produce astonishing results in terms of reducing page weight and gaining far easier management over this aspect of your document presentation.

  • Use CSS to define backgrounds and background colors. Background graphics and color can all be managed via CSS rather than in the opening body tag.

  • Use CSS to define link colors. Again, this is very well-supported, so it's to your advantage to manage link colors in CSS. Even better, you get more options with CSS—you can create multiple link styles for a single page, create a hover color that looks terrific in supporting browsers and simply is ignored by those browsers that don't support it, and control whether a visitor to your site sees underlines beneath the links or not.

  • Eliminate spacer graphics. If at all possible, try to eliminate the use of spacer graphics. They are problematic for a variety of reasons; the main reason being that they confuse the heck out of assistive devices used for the disabled.

  • Reduce the use of tables for layout. If you can't go to a pure CSS layout, which many designers can't because of backward-compatibility concerns for those browsers without adequate CSS2 support, at least try to work to reduce how many tables you employ.

  • Avoid deeply nested tables. If, as you are working, you find that your design requires tables within tables, you may want to back up and reconsider ways to achieve the design without deep nests. Ideally, you'll have no nesting whatsoever, but if you find more than two tables within the main layout table, it's time to rethink your strategy.

  • Adhere to transitional Document Type Definitions (DTDs) within HTML 4.01 and XHTML 1.0. In these language versions, there exists a DTD that is referred to as "transitional." Using the elements and attributes within these DTDs, you can ensure that you adhere to the standards while using some presentational features within the markup. Adhering to the standard means being able to validate your document for fast debugging and, ultimately, conformance.

Figure 5 shows the Manhattan Public Library Web site, which uses transitional design to achieve its layout.

Figure 5Figure 5 Managing contemporary layout sometimes means combining conventions of the past with newer technologies.