case study 1

Veronica's Rant

main page

• veronica's rant
  • the site to a viewer
  • the structure of the site
  • spacer gifs
  • title graphic
  • programming
  • bad design

the site to a viewer

I recently completed a small site for myself called veronica's rant. I used a few formatting tricks that I thought might be helpful to others out there. I originally sat down to discuss each trick in turn, but quickly realized that the easiest thing would be to simply bring a dummy version of the site to this site and discuss it.

Click here to get a new window that will show the site as a web surfer would see it.

First thing you should notice is the vertical black strip running down the left area of the page. A vertical black stripe. When was the last time you saw something like that? Better yet, the black stripe seems to hold up the black box with the white lettering.

Pretty kwel, eh?

the structure of the site

OK, click here to get a better view of the workings of the page, and let's go through its construction.

The page uses two tables, one hold the title graphic and the other a big formatting table. There are other pages to format the links, but they're not that important. All page margins for NN and IE have been removed (through HTML and not style sheets). The formatting table is set at 100% of the viewing area both horizontally and vertically. This means no matter how big the browser window gets, the page will fill the window from top to bottom. This also means that the content will continue to stretch out vertically as resolution increases.

There are four columns at work here. Three columns are fixed in width. The fourth, right-most column is a wildcard width. This means that as the browser window increases in width, the right-most column will increase in width.

spacer gifs

To get the fix and wildcard columns to work right, I had to insert spacing gifs into the columns. The gifs are one pixel high and as many pixels wide as I need. For instance, the left-most column is 150 pixels wide. To make sure I get the column that wide, I inserted a spacing gif one pixel high and 150 wide.

Why do I have to do this? Why don't I just set the width with the TD tags? Netscape 4.7 and earlier have a known bug concerning column widths, and to get the wildcard column width thingie to work, one has to use spacer gifs to keep the columns from collapsing.

And where are these gifs? Usually authors use transparent (that is, invisible) gifs to aid in table formatting. My gifs are red, and you can see them toward the bottom of the page. I made them red when I was designing the site and liked the look so much that I left them red. Since the spacing gifs are located in fixed-width columns, the cumulative effect of using the gifs causes a long red line to appear from the left of the window. Actually, as you can see, the long red line is a collection of spacer gifs.

The other unusual thing about these gifs is that they are located at the bottom of the table, and not the top. I did this because since the table increasingly stretches vertically at higher and higher resolutions, I was getting too much dead space at the top of the page.

The most narrow column, the black strip running down the left side of the site, is just an everyday column with its background color set to black. In order to get Netscape 4.7 to color an empty cell, I had to fill it with something. I chose the non-breaking space entity, or  .

title graphic

The graphic at the top of the page is not part of the content formatting table. I found that it was easier to work with that way. Notice that it's in its own table. That table has a fixed left column (where the graphic resides) and a wildcard right column (with a non-breaking space entity to make sure that its background color will be painted in Netscape 4.7). Since the title graphic never moves and the left columns of the formatting table are fixed, no matter the resolution the title graphic and columns remain glued together.

The page is built for minimum resolution at 800. It resolves fairly well at 640 (though the right-most links, depending on the length break across two lines).

programming

The JavaScript is there to make a little x mark next to each link when they are moused over. This code works in Netscape as well as Internet Explorer. I also use a bit of code to automatically date stamp the page (the update area toward the bottom).

bad design

This site breaks many design rules. You might have noticed the non-standard link colors, the dark, low contrasting colors, and the use of link colors for non-hypertext. I have removed the underline on the links as well. The only thing the site does really well from a usability aspect is resolve horizontally well at every resolution. The use of the scaled formatting table is a nifty device, but it does mean that a page can stretch so much at high resolutions that it can look empty.

However, I decided on this look based upon my putative audience, and, frankly, I just liked it, so I went with it.

If you want to see my uneven, updated-when-I-want-to jounally site, go to