layout and colors

disaster-master's picture

She has: 2,154 posts

Joined: May 2001

Below are three links to the same page. The layout is basically the same on each but the colors are different. I still have some table issues to iron out but this is the jest of it. Let me know what ya'll think about the layout, which color looks best and it you see any errors in other browsers. I am using IE 6.
Thanks!!

#1 http://aavfd.org/newindex.html
#2 http://aavfd.org/newindex2.html
#3 http://aavfd.org/newindex3.html

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

I prefer the red one, but the logo/title doesn't really do anything for me! I'm also not sure about the dotted line running next to the navigation and the black & white picture top left looks a bit lost to me.

I get a scrollbar at 800*600.

Are you planning on having rollovers at all?

Julia - if life was meant to be easy Michael Angelo would have painted the floor....

disaster-master's picture

She has: 2,154 posts

Joined: May 2001

Ok...line is gone on the red one. I think that does look better. Yes I will do rollovers. I just started this last night and haven't gotten that far. I am working on some more stuff for the top (logo, pic) but am having a hard time getting something that looks good. They don't really have a logo other than what is on the Alabama Patch.

taff's picture

They have: 956 posts

Joined: Jun 2001

I think I'm leaning towards the gray although I must confess that none of the 3 really grab me Sad

Perhaps once you dress it up a bit.

I find yellow a tough colour to work with. It too easily becomes garish in conjunction with other colours yet doesn't stand up well alone.

.....

disaster-master's picture

She has: 2,154 posts

Joined: May 2001

I have change the title and pic at the top on the red one...# 2. Take a peek at it and see if it looks any better. I took the little fire cross off of the patch. It was hard to clean up so as not to look jaggy. Still not sure if I like or not.

Taff if you think these are bad, look at the current site.
current site

taff's picture

They have: 956 posts

Joined: Jun 2001

eek! that IS bad!

Actually, I don't think your design is bad at all, I just don't think the red/yellow is working. Maybe I just have something against yellow Smiling

.....

Busy's picture

He has: 6,151 posts

Joined: May 2001

OK, first up would you like me to spell check it for you Laughing out loud hehe me fail english, unpossible Sticking out tongue

After humming and harring I'd pick the red, yellow is close behind but dont like the dotted line. on the red thou the black text buttons are a little hard to read.

are you going to set the margins to 0 ?

in Netscape 4.7 there is no scroll bar on the grey one but there is a gap between the black and start of the grey, also there is no right hand border, the red and yellow ones have the same problems

the culprit is:

missing a   its the first cell before the left section, also found this one:
and and a few more after them

disaster-master's picture

She has: 2,154 posts

Joined: May 2001

If I set the margins to 0 it is left aligned and looks funky. I am aware of the table problems. Dreamweaver done it!!! Wink

I see tons of in the code and some have widths and some don't. If I try and fix them, it changes the layout so that it is all out of ka-wack. I put   in the one that is and it made a space about 20 pixels in between the left nav bar and the main body. Confused
I am doing another one now starting from the beginning to see if I can get rid of all that junk.

I am also aware of the gap at the bottom of the left colored table....it won't fix!! I think my dreamweaver is defective. Wink

disaster-master's picture

She has: 2,154 posts

Joined: May 2001

Is this one cheesy with the fire at the top? I think I have the table problems fixed with this one.

http://aavfd.org/newindex4.html

Abhishek Reddy's picture

He has: 3,348 posts

Joined: Jul 2001

Oh no! The Fire Department's on fire!!! Laughing out loud

That is really what I thought on seeing it. Perhaps a doused fire (smoky/sooty/with foam) like image would suit it better.
Or, what could be more symbolic of a fireman than his hat? Maybe a firetruck with several firemen visibly on it. Laughing out loud

You could add a glow to the text. Maybe a flame BG for the text, but very transparent.

As for the rest of the page, I think it's pretty good. I only have qualms about the right-aligned top navigation bar. Almost every other piece of text is centered, so it might be better being centered.

And some voice in the back of my head appears to be screaming, "Use buttons for the navigation! Use buttons for the navigation!" The text is a bit like the one last puzzle piece that doesnt fit. Smiling

The colors are really nice, though. Overall, it's a great improvement from the first three pages, and especially, their original. Laughing out loud

I don't have any table problems on either IE5 or NS6. No scrollbar on 800*600. Only load time is a little high on my 56k. But that could just be my useless ISP. Sticking out tongue

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

I guess I'm a little too late with this but oh well..

Of the first three you posted I actually liked the grey the best. I felt that the red was just too overwhelming - too much red!, and the yellow stands out too much from the rest of the design. They eye is drawn to the yellow rather than the logo and content area.

You should definitely do something different with the logo -rather boring right now.

Busy's picture

He has: 6,151 posts

Joined: May 2001

The flames could be seen as a bit chessy, Stick with the icon Smiling
but they are excellent flames if you made them, havent seen any flames that well done in yonks (ages)

In Netscape there is a thin white line between the bottom of the flame section and the black section and no right border line, apart from that everything lines up good.
oops forgot, the flames and name banner have a slight different color background to the section its in
(hope i havent confused you, i'm still on my first cup of coffee Smiling)

I realy like that firemen/woman image at the bottom of the page

disaster-master's picture

She has: 2,154 posts

Joined: May 2001

Below is a link to a revised version with buttons. What do you guys and gals think? Buttons are all linked to the original home page and links in the black bar at the top are not fixed yet so no need to comment on that. Logo/title will have to do for now until I hit a creative streak. I just can't get with it on that.

I am not sure exactly what is going on the the stupid table on the left that holds the buttons but for some reason I can get it to align up properly at the bottom. It doen't look too bad right now but I'll be netscape will trash it. (no offense to NS users)Wink

http://aavfd.org/newindex2.html

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

I like this one! Works fine in Opera 6. The only thing I can think of is to maybe break up the navbar if you can - that's a few too many options. I'm not sure how else you could do that though. Also move up the newsletter form so it's more likely to be noticed, and change that AAVFD to just "Subscribe to Newsletter" - acronyms can be hard to process right away, even when the meaning is more obvious, so you might as well make it easy for people. Do the same in the title as well.

taff's picture

They have: 956 posts

Joined: Jun 2001

Quote: Originally posted by disaster-master
I am not sure exactly what is going on the the stupid table on the left that holds the buttons but for some reason I can get it to align up properly at the bottom. It doen't look too bad right now but I'll be netscape will trash it. (no offense to NS users

Ayup. Netscape trashed it. No offense taken. If it wasn't for testing, I doubt I'd have Netscape installed (4.78 btw)

Netscape is also missing the email submit box - not sure why, I don't have time to delve into the code.

I like the overall look. The yellow is toned down enough to satisfy even me Smiling I'd try something other than default for the text links though (no shortage of pet peeves here!)

Is there any way they could get you a cleaner version of the logo? This one appears to be a scan/photo of an embroidered crest.

.....

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

Looking good, the only thing I don't like is the centered text on the buttons & maybe break them apart a bit???

disaster-master's picture

She has: 2,154 posts

Joined: May 2001

http://aavfd.org/newindex2.html

I have added a 5 pixel space in between the buttons and it does look much better. I realize there are too many but there really isn't any thing else I can do. That is the reason I had first used text links and divided them into sections.

Do you really think that the text on the buttons would look better left aligned instead of centered? Geeze, I don't want to re-do 28 buttons again. Maybe I will try that later and see what it looks like.

The subscribe thingy isn't for the newsletter. I had that but the owner brought it to my attention that it isn't a newsletter. I am not sure exactly what this is for because it isn't working.

As for the AAVFD accronym, I tried putting the whole thing and it is just too long. I feel that the target audience will know what this is.

As time passes, I will get my hands on better graphics to improve things. If anyone accidentally figures out how I can fix the left hand table at the bottom let me know.

Thanks.Wink

Busy's picture

He has: 6,151 posts

Joined: May 2001

It looks the same in Netscape 4.7 as it does in IE 5 except the email input box thingy part.
you just forgot to inclose the input tags in tags Smiling

I suppose you have no choice on the counter, if you dont you could always put it on the bottom left.

I'm with The Webmistress on the buttons as well, a easy way to change things like this is to make your layout in whatever graphic program (and make it with layers so you can change fonts, colors etc) then once you think you got it right, save as the programs format, .psp or whatever, then if you need to edit things later, like the button names all you need to do is just switch that layer off and create a new one, or cut/paste the text to where you want it.

nearly forgot, like your new icon

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Quote: Originally posted by Busy
all you need to do is just switch that layer off and create a new one, or cut/paste the text to where you want it.

With 28 graphics in question here that's still a rather time consuming task. She still has to go into every single text layer, change the alignment, slice, optimize and save 28 different graphics all over again. I was going to say something about that alignment but really I think they look fine. It actually might look worse left-aligned in my opinion. Try it in your graphics program and see how it looks if you get a chance.

disaster-master's picture

She has: 2,154 posts

Joined: May 2001

All is need are opinions on the top part. I have added a small patch next to the title in newindex3 and newindex2 is title only. What ya think???
Does it look CHEESY? haha That is a good word to describe stuff that looks awful.Wink

http://aavfd.org/newindex3.html
http://aavfd.org/newindex2.html

Busy's picture

He has: 6,151 posts

Joined: May 2001

index3 in netscape4.7 looks best
(index3 in IE has a scroll bar and thicker black border around the top)
the drop shadow in index2 is just a little to much.
neither look chessy

disaster-master's picture

She has: 2,154 posts

Joined: May 2001

One more question. To BOX or not to BOX????

I believe that since I am having so much trouble getting the black box to be uniform on all sides this may be better and easier to work with.

Oh, can someone tell my why the contact link in the black strip isn't changing colors on mouseover???

http://aavfd.org/newindex4.html

Busy's picture

He has: 6,151 posts

Joined: May 2001

The mouseover works find for me in IE, maybe you werent holding your tongue the right way Sticking out tongue hehe

to box or not to box? if the effect is a box, I wouldnt worry to much if it displays differently in different browsers, but personally I'd set the page on the margins (margins 0) or center the page and use a different color outer background.

I know you only wanted the top section noted, but your mouseover images on your naviagation are delayed, you may want to preload these images.

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

I say have it as is on newindex2, centered with the surrounding box. Looks better that way at larger resolutions.

disaster-master's picture

She has: 2,154 posts

Joined: May 2001

Does it look better at larger resolutions now?
http://aavfd.org/newindex4.html
The owner likes this one so I think we will be using it.

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

Yeah that looks good Laughing out loud

They have: 11 posts

Joined: Nov 2001

I looked at your site in IE 5.5, NS 6.1, and ns 4.76 @ 1280X1024.

all three looked MUCH better than the pages linked to it! my personal preference was index3.html. the logo seemed to balance and draw interest to the head of the page.

disaster-master's picture

She has: 2,154 posts

Joined: May 2001

I finished the site last night other than a few little adjustments here and there. This is the fastest that I have ever completed a site.... WHEW!!!

Would like to have a quick look-over from ya'll and see if you notice any thing that needs attention. I am going to work on optimizing the graphics a bit more, keywords, and take care of a few other code problems tonight.

http://www.aavfd.org/

Thanks for everyones help (especially in the cgi department)Wink

taff's picture

They have: 956 posts

Joined: Jun 2001

Nicely done!

Shall I nitpick? Smiling

The newsletter has a huge chunk of whitespace at the bottom before the menu.

The page titles could use a little something. Right now they are just plain black default (ie times new roman) H3 tags.

Personally, I'd go with a colour for the links (red perhaps?) so that they stand out better. Too easy to confuse them with subheadings and sections merely made bold for emphasis.

Look at all those fire department links! A lot of them need to be redone too. Hmmm - who do I know that specializes in that sort of thing... Laughing out loud

.....

disaster-master's picture

She has: 2,154 posts

Joined: May 2001

What do the FD links need? there shouldn't be any broken ones. I checked those last night.

taff's picture

They have: 956 posts

Joined: Jun 2001

Sorry for being vague. The links are fine, best I can tell. It is many of the sites themselves that need facelifts.

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

I agree with the headings looking a wee bit boring (I don't like the font). Only other thing is that on all the pages expect Board of Directors the links are red then grey once visited on the BoD they are black???

Julia - if life was meant to be easy Michael Angelo would have painted the floor....

disaster-master's picture

She has: 2,154 posts

Joined: May 2001

Could someone using Netscape take a look at this page and see if it displays correctly? It is in PDF format.

http://www.aavfd.org/conference.pdf

Thanks

taff's picture

They have: 956 posts

Joined: Jun 2001

ah. I meant to bring this up. Before I forget...

I don't recommend that you put a pdf link smack into your navigation like that. You should lead to an html page explaining that the file is a pdf and then supplying a link to both the file and the reader.

Now for your actual request (heh)... neither browser actually reads the pdf files. Rather they run acrobat inscreen if they are configured to do so. In my IE, the pdf opens in a browser window. Not so with NN. It treats the links as a file download and asks me what to do with it. I think it is just the way Netscape happens to be configured. Mine is a recent reinstall and it escapes me as to how I had it working previously. I think there may be a plugin for it.

All the above makes a good case for warning users that they are clicking on a PDF link Smiling

.....

Busy's picture

He has: 6,151 posts

Joined: May 2001

works in Netscape 4.7 and 6 but takes a while to load, 356kb is a big file
in 4.7 it displays at 61% and fits the screen, on ver6 displays at 67% and is 1 1/2 screens (has a scroll bar)

would it be better as two seperate pages, one on top of the other ? if its read like a book (at 100%) you have to go down then up and over then down again

disaster-master's picture

She has: 2,154 posts

Joined: May 2001

Good point on not having a pdf right in the middle of my navigation....didn't think about that until you mentioned it. Anyway, I have made a HTML page for that and will put the pdf link somewhere on that page.

I was just wondering about the pdf and netscape. I had someone tell me that they see it fine in IE but in NS they have to put it at 400% to see it. Could this be opperator error maybe?

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.