Site Check + Interactive Page Questions

Hmmmm... I posted this the other day, but it looks like I omitted most of the message, including the URL!

Anyway, I'd like to solicit opinions on a page I just put online at http://www.geobop.com/test/ It represents everything I've learned about Dreamweaver and style sheets to date. I used a page at http://www.fu2k.org/alex/css/layouts/3Col_NN4_FFFF.mhtml as a guide, then deleted most of the extraneous code. (I still have some code that I don't really understand; I'll get rid of it if I determine it serves no purpose.)

The links on this page don't work, and the fixed navigation menu scrolls only in Mozilla (and probably Netscape), not IE. The small black and white icons next to the names of the trees will be linked to pages with pictures.

Some people have compained that the design is too complex, and the background images behind the main text are distracting. Do you agree?

The articles are in two columns that are actually two floating divs, controlled by the following style sheet codes:

div.Left50 { width: 50%; float: left; }
div.Right50 { width: 49%; float: right; }
div.Left50Content { padding: 0px 25px 25px 25px; }
div.Right50Content { padding: 0px 25px 25px 25px; }

div.Left50 { }
div.Right50 { background: #cfc url('../images/bg/plants/trees/Conifers.jpg'); }
div.Left50Content { padding: 1px 25px 25px 25px; }
div.Right50Content { padding: 1px 25px 25px 25px; }

The text on the left is inside div.Left50Content, which is nested inside div.Left50, with a similar arrangement for the column on the right.

If you have Mozilla, click View > Use Style, then choose "One Column," and the table changes to a single column. It simply uses an alternate style sheet that replaces the above styles with the following:

div.Left50 { }
div.Right50 { background: #cfc url('../images/bg/plants/trees/Conifers.jpg'); }
div.Left50Content { padding: 1px 25px 25px 25px; }
div.Right50Content { padding: 1px 25px 25px 25px; }

By assigning no width, the columns almost span the page. So here's my question:

I want to use alternate style sheets to offer several themes, like Summer, Winter and Night. But if I offer each theme in either single-column or double-column mode, then I would have to create six style sheets.

So is there a way to change the columns without using a style sheet, or without using the View > Use Style system?

If you look at the navigation menu and click "Control Panel," you'll get an idea of what I'm trying to accomplish. Viewers will be able to choose a theme with View > Use Style, then they can further customize the page by clicking certain options in the Control Panel, like number of columns, font face, font size, etc.

I've seen websites that let viewers choose font size and other parameters, but I haven't quite figured it out yet. Any suggestions?



http://www.geobop.com/, GeoBearATgeobop.com (Replace AT with @)
Interests: Web Design, Linux & Political Reform

GeoBear wrote:

Hmmmm... I posted this the other day, but it looks like I omitted most of the message, including the URL!

Anyway, I'd like to solicit opinions on a page I just put online at http://www.geobop.com/test/ It represents everything I've learned about Dreamweaver and style sheets to date. I used a page at http://www.fu2k.org/alex/css/layouts/3Col_NN4_FFFF.mhtml as a guide, then deleted most of the extraneous code. (I still have some code that I don't really understand; I'll get rid of it if I determine it serves no purpose.)

Geo,

Hmm....Technically, I assume it's OK. Looked in both Safari and NN6.2
(Mac) and had no problems. But the visual design is a complete disaster.
1) Just because you can apply all colors of the rainbow (plus a
gazillion more) doesn't mean you have to. Find a color scheme, 4-5
colors and stick to it. At least the dominating should be pleasant for
the eyes. Not making tears run.
2) Just because you know how to apply background images doesn't mean you
have to. If you desperately want whatever it's supposed to depict, make
it/them softer.
3) That extremely annoying floating menu in red/white/blue is not only
stuck over text I (maybe) want to read. It's also ugly. See point 1) above.
4) You have jammed far too much content into one page. If I were you,
I'd make one page for each genus, with one or two photos and perhaps a
world map on each.
5) Don't be afraid of "empty" space. Text that goes all the way out to
the margins gives the impression that it's a lot of text, and people
will think "Jeez, I don't want to read all that!". If you have exactly
the same amount of text, but surrounded by *generous* margins, you'll
give the impression that's it's just a few lines that'll be read in
seconds. That's one of the reasons why "empty" spaces are very important
elements in visual design.
6) Why on earth two style sheets????? If Eric Meyer like to play around
and show what could be done with CSS, so be it. All you are doing is
adding confusion.
Sorry.

--
Dan Vendel - *GOF*
http://www.vendel.info
Contact me directly by clicking here:
http://contact.vendel.info
Formmail tutorial:
http://www.vendel.info/tut/formmail.html
Nested table demonstration:
http://www.vendel.info/tabletut/

I tend to agree with the other people about the design being too
complicated. Two column presentations are all very well on paper but on the
screen they do not work well as people will not scroll to the bottom of the
page and then come back up.

Your content is way too long for a single page. No more than three screen
scrolls and people will stop looking.

Finally you are absolutely crazy if you are designing a page that will not
work in IE given that it represents 96% of all browsers. A tiny minority
might download Mozilla but I ver much doubt it.

--
Regards

Paul Whitham
Valleybiz Internet Design
www.valleybiz.net

Team Macromedia Volunteer for Ultradev/Dreamweaver MX
www.macromedia.com/support/forums/team_macromedia
"GeoBear" <GeoBear (AT) geobop (DOT) com> wrote

Hmmmm... I posted this the other day, but it looks like I omitted most of
the message, including the URL!

Anyway, I'd like to solicit opinions on a page I just put online at
http://www.geobop.com/test/ It represents everything I've learned about

Dreamweaver and style sheets to date. I used a page at
http://www.fu2k.org/alex/css/layouts/3Col_NN4_FFFF.mhtml as a guide, then
deleted most of the extraneous code. (I still have some code that I don't
really understand; I'll get rid of it if I determine it serves no purpose.)

The links on this page don't work, and the fixed navigation menu scrolls
only in Mozilla (and probably Netscape), not IE. The small black and white

icons next to the names of the trees will be linked to pages with pictures.

Some people have compained that the design is too complex, and the
background images behind the main text are distracting. Do you agree?

The articles are in two columns that are actually two floating divs,
controlled by the following style sheet codes:

div.Left50 { width: 50%; float: left; }
div.Right50 { width: 49%; float: right; }
div.Left50Content { padding: 0px 25px 25px 25px; }
div.Right50Content { padding: 0px 25px 25px 25px; }

div.Left50 { }
div.Right50 { background: #cfc
url('../images/bg/plants/trees/Conifers.jpg'); }
div.Left50Content { padding: 1px 25px 25px 25px; }
div.Right50Content { padding: 1px 25px 25px 25px; }

The text on the left is inside div.Left50Content, which is nested inside
div.Left50, with a similar arrangement for the column on the right.

If you have Mozilla, click View > Use Style, then choose "One Column," and
the table changes to a single column. It simply uses an alternate style

sheet that replaces the above styles with the following:

div.Left50 { }
div.Right50 { background: #cfc
url('../images/bg/plants/trees/Conifers.jpg'); }
div.Left50Content { padding: 1px 25px 25px 25px; }
div.Right50Content { padding: 1px 25px 25px 25px; }

By assigning no width, the columns almost span the page. So here's my
question:

I want to use alternate style sheets to offer several themes, like Summer,
Winter and Night. But if I offer each theme in either single-column or

double-column mode, then I would have to create six style sheets.

So is there a way to change the columns without using a style sheet, or
without using the View > Use Style system?

If you look at the navigation menu and click "Control Panel," you'll get
an idea of what I'm trying to accomplish. Viewers will be able to choose a

theme with View > Use Style, then they can further customize the page by
clicking certain options in the Control Panel, like number of columns, font
face, font size, etc.

I've seen websites that let viewers choose font size and other parameters,
but I haven't quite figured it out yet. Any suggestions?


http://www.geobop.com/, GeoBearATgeobop.com (Replace AT with @)
Interests: Web Design, Linux &amp; Political Reform

PS.
Just took a look in IE5.1.3 on MacOSX:
No background images, but a butt ugly green color that could give anyone
epileptic seizures. Plus other stuff that didn't work...
Now I'm even more sorry: It really *is* a disaster. :-(

--
Dan Vendel - *GOF*
http://www.vendel.info
Contact me directly by clicking here:
http://contact.vendel.info
Formmail tutorial:
http://www.vendel.info/tut/formmail.html
Nested table demonstration:
http://www.vendel.info/tabletut/

"GeoBear" <GeoBear (AT) geobop (DOT) com> wrote

Hmmmm... I posted this the other day, but it looks like I omitted most of
the message, including the URL!

Anyway, I'd like to solicit opinions on a page I just put online at
http://www.geobop.com/test/ It represents everything I've learned about

Dreamweaver and style sheets to date. I used a page at
http://www.fu2k.org/alex/css/layouts/3Col_NN4_FFFF.mhtml as a guide, then
deleted most of the extraneous code. (I still have some code that I don't
really understand; I'll get rid of it if I determine it serves no purpose.)

I'm not going to bust you on the code itself, but the colors...man...I
almost saw that 16oz rib eye I had for dinner again. I'd not use code
that I didn't understand.

What I would do is to give each tree it's own page. Your main page would be
a LOT smaller then. That would give folks the ability to bookmark individual
pages easily.

If you haven't yet, get Foundations by Project Seven. It will make your life
a LOT easier - it's the manual Dreamweaver should have included.

Actually, that's good to hear. I want to pack in a lot of features, but I also want to keep it simple, and dumping some of the extras will make it easier to manipulate.

Does it look better now, or is it still too overwhelming? (http://www.geobop.com/test/) I gave it a plain white background and made the page background a simple light green. I also changed it to a single column with 75 pixels padding on the side, rather than 25.

"3) That extremely annoying floating menu in red/white/blue is not only stuck over text I (maybe) want to read. It's also ugly. See point 1) above."

Hmmmm... I thought it was small enough that it wouldn't interfere with the text. In Mozilla, it scrolls, so you can move it if it's blocking text. In Internet Explorer, it's stuck in the upper right corner.

If I go with a single column, then I can clear enough space on the right for the navigation menu. If it's "ugly," then I presume that's because of the colors. Actually, I'd appreciate something a little more conservative, too, and I changed it from red, white and blue, to gray, white blue. Does it look better now? I suppose I could also make it smaller still and use flyout menus for the content.

"4) You have jammed far too much content into one page. If I were you, I'd make one page for each genus, with one or two photos and perhaps a world map on each."

Yes, I'll probably break it into several pages.

"6) Why on earth two style sheets????? If Eric Meyer like to play around and show what could be done with CSS, so be it. All you are doing is adding confusion."

I just thought it would be fun to give visitors a few choices. It might even be education to add "habitat" or "ecocystem" style sheets, so they can feel like they're in a forest or a desert.


"Finally you are absolutely crazy if you are designing a page that will not work in IE given that it represents 96% of all browsers. A tiny minority might download Mozilla but I ver much doubt it."

I'm not trying to design a page that doesn't work in IE. I'm merely optimizing it for other browsers, partly as an incentive to ditch IE.


"Just took a look in IE5.1.3 on MacOSX:
No background images, but a butt ugly green color that could give anyone epileptic seizures. Plus other stuff that didn't work..."

Is the key word here IE5.1.3, or do webpages also look different when viewed on MacOSX? There are so many browsers to design for as it is - too many.




http://www.geobop.com/, GeoBearATgeobop.com (Replace AT with @)
Interests: Web Design, Linux &amp; Political Reform

Geo,

I was surprised at the vehemence of the criticism, but then realized I must
not have seen the site until you revised it! I thought it looked pretty
good, actually, though I agree you need to break up the pages more. I know
you've been working hard on it and learned a lot!

Bonnie


"GeoBear" <GeoBear (AT) geobop (DOT) com> wrote

Actually, that's good to hear. I want to pack in a lot of features, but I
also want to keep it simple, and dumping some of the extras will make it

easier to manipulate.

Does it look better now, or is it still too overwhelming?
(http://www.geobop.com/test/) I gave it a plain white background and made

the page background a simple light green. I also changed it to a single
column with 75 pixels padding on the side, rather than 25.

"3) That extremely annoying floating menu in red/white/blue is not only
stuck over text I (maybe) want to read. It's also ugly. See point 1) above."

Hmmmm... I thought it was small enough that it wouldn't interfere with the
text. In Mozilla, it scrolls, so you can move it if it's blocking text. In

Internet Explorer, it's stuck in the upper right corner.

If I go with a single column, then I can clear enough space on the right
for the navigation menu. If it's "ugly," then I presume that's because of

the colors. Actually, I'd appreciate something a little more conservative,
too, and I changed it from red, white and blue, to gray, white blue. Does it
look better now? I suppose I could also make it smaller still and use flyout
menus for the content.

"4) You have jammed far too much content into one page. If I were you, I'd
make one page for each genus, with one or two photos and perhaps a world map

on each."

Yes, I'll probably break it into several pages.

"6) Why on earth two style sheets????? If Eric Meyer like to play around
and show what could be done with CSS, so be it. All you are doing is adding

confusion."

I just thought it would be fun to give visitors a few choices. It might
even be education to add "habitat" or "ecocystem" style sheets, so they can

feel like they're in a forest or a desert.

"Finally you are absolutely crazy if you are designing a page that will
not work in IE given that it represents 96% of all browsers. A tiny minority

might download Mozilla but I ver much doubt it."

I'm not trying to design a page that doesn't work in IE. I'm merely
optimizing it for other browsers, partly as an incentive to ditch IE.


"Just took a look in IE5.1.3 on MacOSX:
No background images, but a butt ugly green color that could give anyone
epileptic seizures. Plus other stuff that didn't work..."

Is the key word here IE5.1.3, or do webpages also look different when
viewed on MacOSX? There are so many browsers to design for as it is - too

many.

http://www.geobop.com/, GeoBearATgeobop.com (Replace AT with @)
Interests: Web Design, Linux &amp; Political Reform

Hi Geo,
I'd have to say that I agree with your other opinons so far. The concept is
good, but the page is difficult to navigate. Dans suggestion that you limit
the colors to 4-5 is a good start to cleaning up the visuals! I'd go even
further though.....my graphics and interior design courses taught me a hard
lesson in the use of color. Pick three major colors...ones that compliment
each other...in any grouping...they can be vibrant or pastel. Then use one
predominantly, one as the lead color for links, etc, and one as an accent
color. Space it all well with plenty of white(people process information in
their brains using a method called "chunking" and white spaces chunk it up
for us). Background gifs are a nice touch so long as they are very
translucent. I know jump menu's are easy, but it'd be better to put the
info onto a three or even four pages and to use nav links to them. In the
case of web content....less is more! =)
You've bitten off a huge chunk of new stuff from the sounds of things. Keep
working at it....and don't feel like you have to put everything together
right away. Wade in a bit at a time and you'll do fine.
Leggy

"GeoBear" <GeoBear (AT) geobop (DOT) com> wrote

Hmmmm... I posted this the other day, but it looks like I omitted most of
the message, including the URL!

Anyway, I'd like to solicit opinions on a page I just put online at
http://www.geobop.com/test/ It represents everything I've learned about
Dreamweaver and style sheets to date. I used a page at
http://www.fu2k.org/alex/css/layouts/3Col_NN4_FFFF.mhtml as a guide, then
deleted most of the extraneous code. (I still have some code that I don't
really understand; I'll get rid of it if I determine it serves no purpose.)

The links on this page don't work, and the fixed navigation menu scrolls
only in Mozilla (and probably Netscape), not IE. The small black and white
icons next to the names of the trees will be linked to pages with pictures.

Some people have compained that the design is too complex, and the
background images behind the main text are distracting. Do you agree?

The articles are in two columns that are actually two floating divs,
controlled by the following style sheet codes:

div.Left50 { width: 50%; float: left; }
div.Right50 { width: 49%; float: right; }
div.Left50Content { padding: 0px 25px 25px 25px; }
div.Right50Content { padding: 0px 25px 25px 25px; }

div.Left50 { }
div.Right50 { background: #cfc
url('../images/bg/plants/trees/Conifers.jpg'); }
div.Left50Content { padding: 1px 25px 25px 25px; }
div.Right50Content { padding: 1px 25px 25px 25px; }

The text on the left is inside div.Left50Content, which is nested inside
div.Left50, with a similar arrangement for the column on the right.

If you have Mozilla, click View > Use Style, then choose "One Column," and
the table changes to a single column. It simply uses an alternate style
sheet that replaces the above styles with the following:

div.Left50 { }
div.Right50 { background: #cfc
url('../images/bg/plants/trees/Conifers.jpg'); }
div.Left50Content { padding: 1px 25px 25px 25px; }
div.Right50Content { padding: 1px 25px 25px 25px; }

By assigning no width, the columns almost span the page. So here's my
question:

I want to use alternate style sheets to offer several themes, like Summer,
Winter and Night. But if I offer each theme in either single-column or
double-column mode, then I would have to create six style sheets.

So is there a way to change the columns without using a style sheet, or
without using the View > Use Style system?

If you look at the navigation menu and click "Control Panel," you'll get an
idea of what I'm trying to accomplish. Viewers will be able to choose a
theme with View > Use Style, then they can further customize the page by
clicking certain options in the Control Panel, like number of columns, font
face, font size, etc.

I've seen websites that let viewers choose font size and other parameters,
but I haven't quite figured it out yet. Any suggestions?



http://www.geobop.com/, GeoBearATgeobop.com (Replace AT with @)
Interests: Web Design, Linux &amp; Political Reform

Geo,

"I was surprised at the vehemence of the criticism,"

They're probably just jealous because they know nothing about pine trees.

"but then realized I must not have seen the site until you revised it! I thought it looked pretty
good, actually, though I agree you need to break up the pages more."

Seriously, I generally have a pretty good eye for color, and I thought my page looked pretty nice with the dark green background. I'll still probably offer something similar through an alternate style sheet.

Speaking of which, I'm still soliciting information about how to switch certain features on and off independent of style sheets. Whether the scheme I used as an example works or not, I want to learn how to do that.

And check out what's his name's website at http://www.valleybiz.net That's a beautiful design. It's just too bad you can't learn anything about pine trees there!




http://www.geobop.com/, GeoBearATgeobop.com (Replace AT with @)
Interests: Web Design, Linux &amp; Political Reform

"GeoBear" <GeoBear (AT) geobop (DOT) com> wrote

They're probably just jealous because they know nothing about pine trees.

I grew up in a house that had 47+ loblolly pines in the yard. I've rakes
more pinestraw than I care to remember.

OT: what's the goal of your site?