case study 2

Firearms Articles

main page

• veronica's rant
  • the site to a viewer
  • the structure of the site
  • spacer gifs
  • heading graphics
  • the graphics
  • potential problems
  • conclusion

the site to a viewer

I've been building a site for a friend. This task has been a little more difficult that I thought it would be. Folding pre-existing articles, written for another site, has been challenging. Content drives presentation and vica versa. The original pieces, built for a full-screen presentation, are now squeezed down into a center column

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

Big gifs, right? A lot of graphics. There is the masthead, and the column headers. Let's look at the site in another way. I'm going to color all the invisible gifs red and I'm going to take all the table cells that hold the gifs and color the backgrounds green and aqua.

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.

Let's take a look at the masthead graphics. There are two graphics, one displays the word firearms and the other the word articles. They are much smaller than they appear. They each sit in a cell of the four cell table that runs across the top of the page. The first graphic is pushed to the top of its cell with alignment attributes, and the second pushed to the bottom of its cell. Each cell is then colored the same as the background color of the graphics, which is white. The result is a presentation much larger than the graphic itself.

The third cell holds a spacer gif, a long invisible one pixel width graphic to prop up the height of the table. This allows me to get a minimum height to the whole table and thus gives me control over arrainging the first two graphics

The fourth cell contains only text. The motto of the site, technical, political, relevent, is created with text and a div with an assigned style. No pictures.

spacer gifs

The rest of the page is made with a second table. I created a thin row that holds four spacer gifs. The gifs are in the first two columns and the last two columns. The middle column is set to a percentage of the page and will readily expand with the resolution of the screen. The columns on either side of it are fixed in size. To get this mix of expandable and fixed columns, you need to insert spacer graphics to get a minimum width for the fix-size columns.

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.

Usually authors use transparent (that is, invisible) gifs to aid in table formatting. For demonstration, I'v colored the gifs red.

The most narrow columns look like thin black strips. These columns are simply cells colored black with a non-breaking space in them (for Netscape, which won't color a cell without something in it). There are no graphics used to get the color

heading graphics

Under the spacing gifs are headings for each section/column. These headings are graphics, but like with the masthead, I used a small graphic with a white background color and then set the table cell color to white. This gives the appearance of a much larger graphic.

the graphics

The site appears to use more graphics area than it does, which results in a fairly quick download. I also was able to chose good graphics, that is, graphics that compressed well.

Since the site holds a collection of articles and links to news sites, I went with a typewriter kind of font. It was a natural to make the font black and set in on a white background. That's only two colors, just about the smallest palette you can get. Next, as explained before, I made the graphic area as small as possible and colored the balance of the page with HTML and CSS.

Finally, since the colors in the graphics come in large areas (as opposed to a lot of little bits of black floating around on the white background) the graphics will compress very well. Gifs compressed well when there is a lot of one color running horizontally in the graphic. The large black fonts on the simple white allow for good compression.

potential problems

The trick with using a small graphic inside of a larger colored table cell works pretty well as long as the graphic a) has a transparent background or b) has edges that are the same exact color as the table cell. See this article about potential problems with colored background gifs inside table cells colored by the browser. This article demonstrates that not all browsers represent colors in the exact same way.

conclusion

By leveraging the browser's ability to color the page, I was able to use as few and as small as graphics as possible, but was still left with the look I wanted. I realied on solid CSS font and placement control to do the rest, and avoided the complexity of nesting tables.