Date: Wed, 12 Nov 2003 02:11:34 +0900
Mime-Version: 1.0 (Apple Message framework v552)
Content-Type: text/plain; charset=WINDOWS-1252; format=flowed
Subject: Files on their way
From: Michael Glaesemann <grzm@myrealbox.com>
To: pgsql-www@postgresql.org
Content-Transfer-Encoding: quoted-printable
Message-Id: <19EB2A18-146A-11D8-9A55-0005029FC1A7@myrealbox.com>

I've sent the files on their way to Andreas. I'm not foreseeing any=20
huge problems, but there are some things I'm concerned about and would=20
like to address. But perhaps a brief description of what I did will=20
make things a little clearer.

The great benefit of separating the presentation and content is that=20
you can use the XHTML file to define the document structure and the CSS=20
to dress it up, very much along the lines of using SGML and DSSSL. So I=20
looked at the page structure to think of a way to describe it.

There's the banner, consisting of the PostgreSQL masthead between two=20
ads. The masthead includes two images (PostgreSQL and the logo) and a=20
group of links arranged horizontally, and a background image to give=20
the striping.

There are two sidebars bracketing the page content. Each sidebar=20
includes a number of sections, such as the User Survey, Current=20
Versions, the Language selector.

In the most recent test*.htms, two boxes highlighting Latest News and=20
Upcoming Events have been placed at the top of the content section.

Though there are other ways to do this, I thought the most=20
straightforward was to use a very simple table structure to structure=20
the whole page. There were two primary reasons I choose the table: it=20
helps maintain the two sidebar columns perfectly below the ads, and it=20
provides an easy way to provide the gray background (using margins and=20
setting the body background color to gray). (As we'll see, this wasn't=20
the best choice, but one that we have a variety of ways of working=20
around.)

So I chose a three-row table consisting of four columns. The first row=20
is the banner. Each ad is in it's own cell, the PostgreSQL masthead and=20
the link bar are in another (with the links in their own div,=20
id=3D"bannerlinks", and the logo is in it's own cell.

The second row is pretty straightforward: left side in a cell, content=20
spans the next two, and the right side in the final cell. The third row=20
is the blue link bar on the bottom. The first cell includes "top", and=20
the other links are in a 3-cell span.

That's it for the tables. The "cells" in the sidebars are divs. Each is=20
id'd so they can be specifically selected via CSS, but I only used that=20
in a two cases: survey and gborg, because (in this version: Andreas'=20
latest examples don't include this) I wanted to tweak the <form> and=20
<ul> presentation in ways that may not be appropriate elsewhere.

The Latest News and Upcoming Events boxes are also divs set to float=20
left and right, respectively. This might cause some problems, as some=20
earlier browsers might not handle float well, but I wanted to get some=20
feedback first.

(Similarly, Netscape 4 in particular might =97okay, probably will=97royally=
=20
screw up this page. Netscape 4.x was released before CSS really got=20
going, but late enough that it tried to implement it. However there's a=20
way to keep the  CSS Netscape 4.x chokes on beyond it's reach, while=20
making sure later browsers that can handle it can read it. I haven't=20
done this yet, as I haven't tested it in Netscape. But it's something=20
definitely doable and worth doing. Just haven't done it yet.)

I think that pretty much covers it. I did rewrite some of the other=20
markup using your standard <p> and <h#> tags, and I used lists, both=20
<ul> and <dl> where I thought appropriate. Recently I've started using=20
<dl> more because it has the semantic meaning of holding the <dt> with=20
the <dd>. For example, I used them in the International and Websites=20
sections, as the blurb under each headline can be viewed an explanation=20
or description of the subsection. If you disagree, not a big deal. The=20
same presentation can be accomplished using <h#> and <p> (or any other=20
tags, for that matter). And I think I need to zero out the left margin=20
and left padding on the <dl>s in these sections, as the <dd>s don't=20
look properly centered. And another place I used a <dl> and need to fix=20
is in the points outlining the benefits of using PostgreSQL: a=20
straightforward <ul> would have given me the bullets (list-style: disc)=20
by default. Another way to fix this is in the CSS, by adding a rule=20
along the lines of

#content dl { list-style:disc }

Besides removing a bunch of nested tables and presentation markup, I=20
also got rid of a lot of <br /> tags, as the CSS gives us much more=20
control over things like paragraph spacing and headline margins.

Two things that jump out at me and need to be fixed/resolved:

1. Switching to German caused the right sidebar to gain some=20
not-so-nice width because longer German words wouldn't break and caused=20
the cell to widen beyond the 120px I defined it. (Of course this isn't=20
German's fault. Just a failing of the design in handling long words.)=20
Looking at the corresponding test*.htm, the current site isn't strict=20
about keeping the side columns exactly below the ads. One solution=20
would be to break the design into two tables: one for the banner (one=20
row, four columns), and one for the rest (two rows, three columns). A=20
few small modifications to the CSS, and we're good to go. Drawback:=20
lose the nice continuity along the sides. Practically, not really a=20
drawback.

2. When the browser window is narrower, the bannerlinks flows into a=20
second line. The result is white space under the ads (changeable to=20
another color, of course=97blue might make this less obvious), and an=20
interesting background image effect. I haven't played with this enough=20
to find a solution. One of course is to just absolutely define the=20
width. My personal preference is to let the site flow as much as=20
possible, trying to find a solution that doesn't cause the image-repeat=20
problem. With an absolute width there might be problems with narrower=20
browser windows.

There are some smaller style things that I'd want to change as well,=20
but it's just personal preference and easily changed in the CSS.

What do you think? Any serious breakage problems?

Michael