dynamic vs. fixed: a proposal for peace at the table
October, 1999.
By Molly E. Holzschlag. (Link to original article.)
What happened to table manners? They seem to have dropped down and rolled away like so many undesirable peas, left for the dogs to sniff at and the cats to bat about. The borders have been drawn—on one side sit the Dynamics, arms crossed, demanding that dynamic table layouts are the only appropriate way to go, ever. Across from them are the Fixed folk, insisting that fixed table layouts are the absolute way to maintain the integrity of a given visual design.
The debate rages on. Is there a right or wrong approach? The Dynamics argue that the entire purpose of the Web is to be accessible, so tables that fill the entire, available screen space are where it's at. The Fixed assert that while indeed, space is always of concern to visual design, the precise placement of elements on a page is what they're desperate to attain.
As any good mom will tell kids battling away at the dinner table, there's no right or wrong answer here. The truth lies somewhere diplomatically in the middle. This month, I'm going to play the Good Mom and propose a method by which we can reach a peace treaty using both dynamic and fixed tables, as well as providing some sensible techniques to address the table debate once and for all.
Resolving the problem
The crux of the issue can be summed up in one word: resolution. Dynamic and fixed table design arguments center around the fact that people use different computer resolutions when surfing the Web. The legacy VGA resolution for PCs was 640x480; today's typical configuration is 1024x768. Most Macs ship with 800x600. General computer users rarely change resolution defaults, although computer and design professionals tend to do so. When designing for 640x480, I recommend a fixed width of 585 pixels. This ensures that all of your site visitors will be able to view your page without ever encountering a horizontal scrollbar.
Statistical reporting agencies such as StatMarket (www.statmarket.com) and Browserwatch (browserwatch.internet.com) show that the majority of users are moving up in the resolution world (see Table 1). This is good news, because it means more flexibility for designers—no matter how fixed on their position they might be.
Table 1. StatMarket reported the below resolution statistics on July 21, 1999. My Web site statistics for the same day reported 800x600 resolution making up the majority of visitors at 51.5 percent, 640x480 resolution hovering around 25 percent, and higher resolutions making up the remainder.
| Resolution | Percentage of visitors |
|---|---|
| 1280x1024 | 2.13 |
| 1024x768 | 25.01 |
| 800x600 | 54.15 |
| 640x480 | 13.8 |
| others | 3 |
But anecdotal reports and an awareness of visitors can really sway a more conservative developer's approach. Take, for example, a person very close to me. He'll remain nameless fearing the wrath of the Big Blue company at which he works. Until very recently, he was stuck using Netscape 2.0 on a low-resolution monitor. Now, one would think that IBM would be using the latest and greatest—but obviously this is not always the case.
In small business, this phenomenon exists as well. I have walked into numerous client offices where Windows 3.1 and low-resolution, low-version browsers were commonplace. Another, oft-overlooked concern is for folks with impaired vision. Lower resolution renders larger images and text on the screen, so many older adults (the second largest growing online population) have their computers' resolutions set low.
If you begin to think about widespread, international visitors, you'll begin to see why you might want to consider catering to this important audience.
Another challenge with fixed versus dynamic tables is the reality that many surfers—especially those using Macs—resize their browser windows to sizes smaller than the available screen space. Add to that the fact that even lower resolutions or minimized screen sizes are popularized in handheld computing devices, and low-resolution issues remain a reality.
So just how do you address these concerns? First, know the audience for your site, then understand the options and alternatives available.
Defining the terms
Let's take a look at our basic options. We'll start with dynamic design. A dynamic layout is one in which the primary table controlling a page's organization uses percentages rather than pixels to determine its width (and sometimes height). This allows for screen-resolution concerns to be set aside. No matter what the site visitor's resolution is, the layout will adjust to the available space.
Example 1. The HTML code needed to produce a simple, dynamic table.
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="50%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
</table>
The upper portion of Figure 1 shows a dynamic table at 800x600 resolution. The lower section shows the table at 640x480. Notice how the cells dynamically change to fit the space. Note: I've set my border to 1 so you can see the tables clearly.
Figure 1. The upper table is a dynamic table viewed at 800x600 resolution. Beneath it is the same table at 640x480. Note how the cells adjust to the space, rather than keeping a fixed size.
Pure dynamic tables are based on percentages. You can add padding or spacing to gain some white space, and of course you can make your tables more complex—as long as you don't deviate from the percentage approach. Table 2 summarizes the pros and cons of dynamic table design.
Table 2. Pros and cons of dynamic table design.
| Pros | Cons |
|---|---|
| Resizes automatically to available screen space. | Emphasis shifts away from strong visual design. |
| Resolution concerns become less important. | Less concern with audience may result. Less concern with usability. |
| Tables can be simplified—less weight as a result. | Elements are positioned with less precision, and may shift or relate poorly to other elements on the page. |
Fixed designs use tables that are very specific in terms of width (and sometimes height) in pixels. A fixed table also often relies on graphic elements, such as single-pixel GIFs, to maintain the layout integrity and avoid table cell collapse.
Example 2. The code for a simple, fixed table.
<table border="0" width="585" cellpadding="0" cellspacing="0">
<tr>
<td width="200"></td>
<td width="10"></td>
<td width="375"></td>
</tr>
</table>
The code for a simple, fixed table appears in Example 2. Figure 2 shows a fixed table at 640x480 resolution, with the screen set to full view. Note that there's no space to the right. Figure 3 shows the fixed table viewed at 800x600. There's no change in the table's physical size, but there is additional space to the right. For a look at the pros and cons of fixed table design, see Table 3.
Figure 2. The fixed table viewed at 640x480.
Figure 3. The same table at 800x600. Note the size of individual cells and the entire table remain fixed, with additional space appearing at higher resolution.
Table 3. Pros and cons of fixed table design.
| Pros | Cons |
|---|---|
| Design is as precise as possible. | Unnecessary white space can upset the design's balance. |
| Control over element relationships is at a maximum. | Requirement of additional table cells, spacer GIFs to prevent cells from collapsing in certain browsers, and complexs tables can cause extra page weight and code confusion. |
| Awareness of audience is paramount. | Designer must make decisions about how to manage different resolutions. |
By now the differences between pure dynamic and fixed tables should be clear. The concern at this point is to find a methodology, consider all our options, and employ a straightforward technique that will help us to create the most appropriate design for each individual project we encounter.
Rule 1: know your audience
Determine who your audience is. You can find this information by gathering statistics (using something like Netscape's Hitometer or WestSideStory's HitBOX) on who is using a given site, looking carefully at the site's desired demographics, and responding accordingly.
Rule 2: let your content determine your method
It's said that "Content is King." Therefore, let content rule! Dynamic tables are especially effective with text-rich pages, where graphics can shift somewhat without the integrity of the layout being particularly affected (Figure 4).
Figure 4. Content rules! Design student Kristin O'Hearn chose to use a dynamic table layout for this simple but effective design.
Any time you have a situation in which the content is text-rich and the graphics exist primarily to accessorize the page, dynamic tables are a perfect choice.
I've noticed that most people who come from a design-oriented background are strongly drawn to fixed table design. Fans of dynamic tables should understand that despite the well-argued point of compatibility, the Web is now a highly visual place. Visual designers accustomed to pixel-by-pixel control are very frustrated by the limitations of the Web, and rightfully so.
The bottom line? If visual design is inseparable from your content, fixed table design is going to be your best solution. While you won't have pixel-by-pixel control, you will have the most control possible with today's available technology.
Figure 5 shows a fixed design. The designer, Amber Wardynski, decided that she wanted specific placement and proximity that could not adequately be addressed by a dynamic table layout. Whenever strict and complex designs are desired, fixed tables are almost always the answer.
Figure 5. Specific placement demands a fixed table design!
Rule 3: combine fixed and dynamic where appropriate
Of course, you can very successfully combine dynamic and fixed methods to achieve a good balance of visual design and dynamic layout. To do this takes a bit of compromise—you have to use both percentage and pixel components to achieve the desired results.
Let's say you have a left navigation menu that you want to fix tightly into a specific width. You have information on the right that you want to fix as well, but the elements within the center of your page are primarily text and spot art that can flow dynamically. The solution is to combine methods, as in the code in Example 3.
Example 3. Combining dynamic and static methods.
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="200"></td>
<td width="10"></td>
<td width="100%"></td>
<td width="10"></td>
</tr>
</table>
Note that while I've fixed the first two cells and the last cell, my third cell uses a percentage. What's more—it uses 100% as its width. When combined with the 100% table width, the end result is that the fixed cells will remain at precise widths, whereas the entire table will expand to fit the available screen space. With this kind of combination, expansion occurs in the third cell only (Figure 6). Pretty nifty, don't you agree?
Figure 6. The Tucson Weekly uses a fixed table to the left to manage the blue margin, and a fixed table to the right for the right-hand navigation. The content in the center is dynamic, adjusting to the available screen space no matter what the visitor's resolution is.
Rule 4: center fixed designs
Another handy tip is that when you do choose to fix your table designs—center the design! Here's why:
- At lower resolution, a fixed design set to that resolution will take up the full available window space.
- As resolution increases, equal parts of white space appear to the left and right margins, but the design's integrity is left intact.
- Any concern regarding too much visual white space versus a tight design are balanced by the resulting equalization of space.
- Compare Figures 5 and 7: Figure 7 shows the same material in a centered layout.
Figure 7. Centering a fixed table distributes the available blank space evenly when the page is viewed at any resolution higher than the one for which it was defined.
Another choice: be a people pleaser
If you want to please everyone, you can opt for a JavaScript sniff-and-route. Such a script can predetermine your site visitor's resolution and deliver a page designed specifically for that resolution. More work for you, but if you're hell-bent on having your fixed design appear with absolute integrity regardless of the resolution, it's a viable solution.
I found a cool JavaScript resolution sniff-and-route script at the JavaScript Source (javascript.internet.com) and made a minor modification to it in the BODY portion of the script (see Example 4).
Copy the code into the HEAD section of your default HTML page. Now place this code in the BODY of your page:
<body onload="redirectPage()">
Then, change the "www.yoursite.com" references to relative or absolute URLs of your own.
Peace, at last
Are you ready to dig in and enjoy your table time? You should have a clearer idea now about how to approach the concerns with method as well as passion. Enjoy your main course with confidence, and be sure to share dessert with me, molly@molly.com.
