?

Log in

No account? Create an account

Previous Entry | Next Entry

On design

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.

Comments

( Read 8 comments — Leave a comment )
sangochan
Nov. 9th, 2004 05:40 am (UTC)
All I can say is: good luck. Better you than me.

Phew. That does NOT look fun.
codepoetica
Nov. 9th, 2004 06:29 am (UTC)
^__^

Actually, that last one does look fun to me. Kinda like Gentoo Stage1 is fun.

May I point out, though, that the bottom chunk of her current site, aka from
"Be good to yourself and take this title home as soon as it hits the shelves."
--Carol Carter, Romance Reviews Today

and lower, is practically unreadable? There's a mixmash of ~7 different visual typefaces there! The only thing different from geocities-grade web design would be the lack of a low-contrast background bitmap!

In short, this site gives me a splitting headache.

Can I hope that you'll fix that sort of thing as part of the redesign?

/me hopes he hasn't torn apart something Brent thought was really good..
brentdax
Nov. 9th, 2004 11:27 am (UTC)
and lower, is practically unreadable? There's a mixmash of ~7 different visual typefaces there!

They're all Arial (or another sans-serif). Three colors, all of which are standard across the site and appropriate for their backgrounds; slight variation in font sizes, only one of which is inconsistent (and which I'm not terribly happy about).

But yes, that section will no doubt be reworked.
brentdax
Nov. 9th, 2004 11:29 am (UTC)
Oh, and the difference between that banner and Gentoo Stage 1 is, essentially, that there are instructions on how to build Gentoo from stage 1. The frightening aspect of that banner is that I'm not sure how to make it happen.
nathanbp
Nov. 9th, 2004 12:09 pm (UTC)
Tables. lots and lots of tables. Probably. this is why I don't do web design ^_^;;
codepoetica
Nov. 9th, 2004 01:29 pm (UTC)
Ack! Hell no! :D

Relative or absolute positioning on a fixed-size floated div containing the image =)
nathanbp
Nov. 9th, 2004 08:09 pm (UTC)
...doesn't that not work very well across different browsers?
brentdax
Nov. 9th, 2004 11:47 pm (UTC)
( Read 8 comments — Leave a comment )