Subject: Files on their way

From: Michael Glaesemann <[email-masked]>
Date: Wed, 12 Nov 2003 02:11:34 +0900

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

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

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

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

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

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

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

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

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

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

(Similarly, Netscape 4 in particular might —okay, probably will—royally 
screw up this page. Netscape 4.x was released before CSS really got 
going, but late enough that it tried to implement it. However there's a 
way to keep the  CSS Netscape 4.x chokes on beyond it's reach, while 
making sure later browsers that can handle it can read it. I haven't 
done this yet, as I haven't tested it in Netscape. But it's something 
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 
markup using your standard <p> and <h#> tags, and I used lists, both 
<ul> and <dl> where I thought appropriate. Recently I've started using 
<dl> more because it has the semantic meaning of holding the <dt> with 
the <dd>. For example, I used them in the International and Websites 
sections, as the blurb under each headline can be viewed an explanation 
or description of the subsection. If you disagree, not a big deal. The 
same presentation can be accomplished using <h#> and <p> (or any other 
tags, for that matter). And I think I need to zero out the left margin 
and left padding on the <dl>s in these sections, as the <dd>s don't 
look properly centered. And another place I used a <dl> and need to fix 
is in the points outlining the benefits of using PostgreSQL: a 
straightforward <ul> would have given me the bullets (list-style: disc) 
by default. Another way to fix this is in the CSS, by adding a rule 
along the lines of

#content dl { list-style:disc }

Besides removing a bunch of nested tables and presentation markup, I 
also got rid of a lot of <br /> tags, as the CSS gives us much more 
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 
not-so-nice width because longer German words wouldn't break and caused 
the cell to widen beyond the 120px I defined it. (Of course this isn't 
German's fault. Just a failing of the design in handling long words.) 
Looking at the corresponding test*.htm, the current site isn't strict 
about keeping the side columns exactly below the ads. One solution 
would be to break the design into two tables: one for the banner (one 
row, four columns), and one for the rest (two rows, three columns). A 
few small modifications to the CSS, and we're good to go. Drawback: 
lose the nice continuity along the sides. Practically, not really a 
drawback.

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

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

What do you think? Any serious breakage problems?

Michael

---

From: Josh Berkus <[email-masked]>
Date: Tue, 11 Nov 2003 10:04:02 -0800

Michael,

> What do you think? Any serious breakage problems?

Give us a URL when it's up, and I'll test multiple browsers.

-- 
Josh Berkus
Aglio Database Solutions
San Francisco

---

From: Michael Glaesemann <[email-masked]>
Date: Wed, 12 Nov 2003 03:21:00 +0900

> Give us a URL when it's up, and I'll test multiple browsers.

Thanks. Andreas had me send them to him via email. I'm sure he'll let 
us know when when and where they're available.

Michael