worriedFirst 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)
- Amethyst
- 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
- Bookshelf
- 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
But I digress.
At the moment, the problem is the basic design and navigation. Mom has a few requirements:
- She wants a fixed-width layout usable on 800x600 or larger.
- She wants the body to be very simple graphically. ~10pt sans-serif font, mostly black with some color in the headers, minimal graphics.
- She wants all navigation in the header, and doesn't want pop-out menus blocking the content.
+---------------------------------------+
| |
| |
| (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.
