So, Mom wants to redesign her site. On the surface, this seems reasonable. However, she has some conflicting requirements.

First of all, take a look at her current site. (Yeah, it doesn't render quite right in Firefox--I'm fixing that, along with a lot of other things, such as heavy use of layout tables and abuse of Flash.) Note how compact each item on the navbar is--and the size of the whole thing despite that fact. And realize that several sections have a second level of navigation; the Books section has three levels. This sort of thing is a nightmare to design navigation for.

So, I'm making things heirarchical. My site map will look something like:

• Home
• Books
  • Bookshelf
    • Amethyst
      • Info
      • Excerpt
    • Emerald
      • Info
      • Excerpt
    • Amber
      • Info
      • Excerpt
    • Violet
      • Info
      • Excerpt
    • Lily
      • Info
      • Excerpt
    • Rose
      • Info
      • Excerpt
    • (and so on for future books)
  • Bookstore
  • 17th Century Recipes
    • Amethyst
    • Emerald
    • Amber
    • Violet
    • Lily
    • Rose
    • (and so on for future books)
  • Real People
    • Amethyst
    • Emerald
    • Amber
    • Violet
    • Lily
    • Rose
    • (and so on for future books)
  • Real Places
    • Amethyst
    • Emerald
    • Amber
    • Violet
    • Lily
    • Rose
    • (and so on for future books)
  • Family Trees
    • Chase
    • Ashcroft
• About Lauren
  • Biography
  • Appearances
  • Ask Lauren
  • Photo Album
  • Travelogue (with about three very complicated pages below it)
  • Articles
  • Links
• For Readers
  • Contest
  • Street Team
    • Lauren's Invitation
    • Enrollment Form
    • Message Board
  • Free Stuff
  • Puzzles
  • So You Want To Write Romances? (this so needs a shorter title)
• Keep in Touch
  • Guestbook
  • Newsletter
  • E-mail Lauren

A few of you out there are webmasters; you probably have some idea of how utterly hellish a layout like this is. I should be charging Mom thousands of dollars for a site this big (~59 page site, so $1010 if all of the pages were just plain HTML, which isn't the case at all), but I didn't have terribly high standards when I negotiated my price in ninth grade.

But I digress.

At the moment, the problem is the basic design and navigation. Mom has a few requirements:

1. She wants a fixed-width layout usable on 800x600 or larger.
2. She wants the body to be very simple graphically. ~10pt sans-serif font, mostly black with some color in the headers, minimal graphics.
3. She wants all navigation in the header, and doesn't want pop-out menus blocking the content.

That last requirement is the one that's causing me such trouble. I started with a design that looked something like (in glorious ASCII art):

    +---------------------------------------+
    |                                       |
    |                                       |
    |               (banner)                |
    |                                       |
    |                                       |
    +-------------------+-------------------+
    |                   |                   |
    |                   |                   |
    |                   |                   |
    |   (first-level    |   (second-level   |
    |    navigation)    |    navigation)    |
    |                   |                   |
    |                   |                   |
    |                   |                   |
    +-------------------+-------------------+

She thought that design wasted a lot of space (the first-level column was left-aligned, and the second-level was right-aligned, with a ton of whitespace in the middle). I agreed with that assessment, but her countersuggestion was something I can only consider to be crack-addled:

    +---------------------------------------+
    |                                       |
    |                                       |
    |               (banner)                |
    |                                       |
    |                                       |
    +-----------+---------------+-----------+
    | (first-   |               | (first-   |
    |  level    | (second-level |  level    |
    |  nav 1)   |  navigation)  |  nav 2)   |
    |           |               |           |
    +-----------+---------------+-----------+

Yes, the top-level navigation is split, with the second-level menu in the middle. No, there's no rhyme or reason to this design, except that it uses the space more efficiently.

Ugh.

We set the site aside for awhile, but finally came back to it today. She asked for me to try again on the design, and I came up with this:

    +-----------+---------------+-----------+
    |           |               |           |
    |           |               |           |
    |           | (first-level  | (second-  |
    | (banner)  |  navigation)  |   level   |
    |           |               |    nav)   |
    |           |               |           |
    |           |               |           |
    +-----------+---------------+-----------+

(Pretend the three columns are of equal width.) Finally, after much discussion, looking at sites and gnashing of teeth, we settled on something like this:

    +---------------------------------------+
    |                                       |
    |        (banner)           +---------+ |
    |                           |         | |
+---+------+                    | (photo) | |
|          |                    |         | |
| (cover)  |                    |         | |
|          |                    +---------+ |
|          |                                |
|          +--------------------------------+
|          | (first-level navigation)       |
|          +--------------------------------+
|          | (second-level navigation)      |
|          +--------------------------------+
+----------+

So...now to render that into HTML. Standards-compliant HTML that'll work on all the major browsers.

Somebody shoot me.