- Featured Columnists
Table of Contents
- Web Basics
- Publishing on the Web: Putting Files on the Server
- Web Design Process and Workflow
- Project Management
- Mark My WWWord: HTML and XHTML
- Standards Compliance
- Visual Design and the Web
- Color Theory
- Working with CSS
- How to Create CSS Menus
- How Should Web Designers Manage Layouts?
- Shining Examples of Bad Design
- Get Your Site in a Festive Mood: How to Quickly Change Styles
- Designing Mobile Web Sites
- Designing for Mobile Devices
- Books and e-Books
- Online Resources
- Meta Tags and Search
- Enhancing Web Page Interaction
- Web Graphics
- Web Page Optimization
- Overview of Servers
- Server Programming Basics
- Careers in Web Design
- Intellectual Property for Web Designers
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 todayeven Netscape 4.xsupport 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 CSSyou 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 5 Managing contemporary layout sometimes means combining conventions of the past with newer technologies.