Need advice for webpage layout and appearance

airbornflght

As some of you know I'm the webmaster for my fraternity. Currently running the site on joomla and all is well for the most part but I don't like the template and want to get away from it. I did a little work making it look more original, but it just isn't gonna cut the cake.

So after a couple of hours in fireworks I came up with the attached file below. I know it's far from perfect but I think I'm happy with it so far. It feels too empty though and I need help perfecting the idea. Also, I had one person say my choice of colors for the background 'made us look gay' I don't think so but I'd appreciate constructive criticism.

site is www.okstatedelts.com if you want a reference point

edcentric

I am not going to comment on layout, but you are using the wrong picture. You need one where some of the guys are at the top helping the the guys still climbing. The peopel need to be doing something, not just standing around.

Ok, I will comment on the layout. Use shaded backgrounds for the title bar and the side bar. Use something that doesn't make reading too difficult but will set the areas apart. Maybe this will help fix some of the empty white space look.

airbornflght

anyone else?

jared

Let's face it. The colors you got to work with are purple and yellow - it going to have a degree of gayness to it.

The background has to go. Those stripes are way to distracting and take the focus off the site. On a widescreen monitor they are it's going to burn your eyes.

I suggest playing around with some gradients, pixel patters, or combination of. Might wanna try taking the hue of yellow down a notch.

Here is what I did in about 3 mins in photoshop.

airbornflght

I like what you did. what exactly is a pixel patter? I'll look it up.

I expect a certain level of 'gayness' but I want it to look respectable but I am hesitant of saturating the yellow into a more gold color. My thought initially was that it would make the site look more powerful or at least less 'flimsy' in stature. But then at the same time I thought that the darker color would over power the content area. Thoughts?

I really am a beginner to the web design thing and one I get the design ironed out I am going to need tons of help getting it all properly sliced and marked up.

jared

*pixel pattern

Sorry I didn't proof.

Yeah just keep knocking out more drafts until you come up with something you are happy with. Also it might help to look at some web galleries, such as cssmania.com, for some inspiration.

Good luck

airbornflght

Where did you get the pattern that you used? All the ones I've found have been multi colored and not really what I'm looking for.

Even if I could find a black and white one and use it as a layer mask which is what I'm guessing you did, that would be cool.

jared

The best source I have found to date is http://k10k.net/

The colors are usually terrible even on the best patterns so you'll have to take photoshop and do some surgery on them.

airbornflght

Ok. I did some more work and made a few slight changes and am looking for a little feedback

First I ditched the border on the white container and went for a drop shadow. Second I bolded the main menu bar in order to give it a little more prominence in the design. I picked some colors for the menu and link mouse overs which I'm not completely happy with at the moment. And I reworked the background into what I thing will be a lot less distracting than my revenge of the seventies stripes.

The last thing I did was make two versions and the only difference is the top. On one the container is floating and the other, well less so. I think I like the first one but I thought I'd get some feedback.

Again, all suggestions are welcome, criticism even more so. And does anyone thing that it looks too plain? I think that sometimes, but then again I also have the tendency to overwork a design and make it too cluttered if I'm not careful.

jared

Personally I like the 2nd one with there page will go all the way to the top and I assume all the way to the bottom.

It helps hide some of the background. If you had some really cool image or something in the background which you wanted to show it off I would say mockup A might not be a bad choice, but I'd want to hide as much of it as possible.

Secondly i'd try dropping the opacity of your drop shadow/dark outer glow.

airbornflght

ok. My question is how would I see how taking it from the top won't be hard to do and makes sense to me. But what about taking the container all the way to the bottom? I thought the container would only stretch as far as there was content?

Would there just be a blank space between the body and the footer as in your mockup you did?

airbornflght

Ok, did a quick revision with your suggestions and now that I see it I like it going from top to bottom. I think it's getting close. I'm definitely gonna sit on it a while longer and keep making revisions.

How hard is this going to be to markup? I've never done a css based website completely from scratch so I'm a little anxious about it because css looks simple enough at first but it can get pretty overwhelming. Especially since I'm wanting to make it fluid with in bounds (min/max width) and also accessible/compliant.

Then once I get it marked up in html I have to plug all of joomla's php/markup into it if I understand the process correctly. But that doesn't worry me nearly as much as translating from fireworks to xhtml/css

jared

Markup on this will be cake. Its a very basic and well structured site.

Let me know when you start chopping things up if you need any help.

cheers

airbornflght

Do you think the design would benefit from making 'pods' for the left hand menus or the top menu being style any more instead of just two horizontal rules above and below some plain text?

airbornflght

Ok, I went ahead and added a little more styling to the menu areas and I think there was a net improvement to the design. Especially since there is a definite seperation between the header and content area of the page now, which seemed to be lacking before even though there was two lines.

Linc

airbornflght wrote:

Also, I had one person say my choice of colors for the background 'made us look gay'

So one person is a toolbox. Thanks for sharing.

jared wrote:

it going to have a degree of gayness to it.

You have both got to be kidding me right now.

I'll go back to ignoring this conversation now.

jared

Nothing to see here, move along

airbornflght

Do you think it's a step in the right direction?

Am I going the right direction by just doing a redesign? Or should I look at a paradigm change in how the content is organized and presented? I want to make sure I'm doing the right thing here.

Nomad

I would make the gradient much, much softer. Don't make it transition to white, but a slightly lighter color of that yellow. As for what you did with the purple bars recently, I would go back to what you originally had.

The text you're using on the photograph with the arc is not very good, I would scrap the text entirely and do something else.

airbornflght

Ok. so as far as coding goes I've done the background... beyond that I'm clueless with css.

Does anyone have a tutorial or something I could read or else get some one on one from someone?

jared

In a nut shell without getting to detailed you background for the entire page is gonna be like

[HTML]
body {
background: #CCC url(images/yourimage.jpg) top repeat-x;
}
[/HTML]

Where as #CCC should be the color the background fades to.

Once you get that figured out let me know. It gets fun when you wanna get the drop shadow setup because then we get to use some transparent .pngs

airbornflght

yeh, I did the background thing. right now I am at:

(x)html:
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
****** http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Oklahoma State Delts</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
</body>
</html>
[/HTML]

css:

body{
	background-image: url(bg3.png); 
	background-color: #fffbcd;
	background-repeat: repeat-x;
}

Also, I see you had 'top' in your css, what does that do because the page is displaying properly?

Oh yeh, I set up my dev server (ahh the perks of having a business class internet connection) http://66.76.244.242/NewTemplate/

jared

Don't worry about the top think, I just do that out of habit, it's not needed since all modern browsers start the background at the top anyways.

Also, I looked at your background image. Don't use a png for that. Flatten the image in photoshop and then recrop that. If someone goes to your site in IE6 its going to looked ****ed because IE6 doesn't support transparent pngs.

Now for you main page container you are going to have an element like

[HTML]
#container {
background: #fff (images/yourbg.png) repeat-y;
width: 960px (or whatever width you have);
margin: 0 auto; (centers the element)
}
[/html]

airbornflght

Will do, just a couple quick questions, I noticed that for the container you had a .png listed, but you said that IE6 doesn't support transparent pngs, which I'm going to need for the drop shadow won't I?

Also, don't I need to add min-height: 100% to the container and also the html and body tags? From what I've read this is the way to do what we want. But IE6 doesn't recognize the tag so you have to add a little js?

airbornflght

Ok. made the changes and it's not working. Even if I just add some text into the body I don't see anything. I'm confused.

(x)html:
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>

****** http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Oklahoma State Delts</title>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>

<div id="container">lorem ipsum dolor some random text...</div>

</body>
</html>
[/HTML]

css:

body{
	background-image: url(bg3.png); 
	background-color: #fffbcd;
	background-repeat: repeat-x;
}

#container {
	background: #fff (cbg.gif) repeat-y;
	width: 958px;
	margin: 0 auto;
}

Linc

airbornflght wrote:

But IE6 doesn't recognize the tag

That's why you shouldn't recognize IE6 (unless required to do so by myopic rules or laws). Close IE6 and never test in it again. Your life will be better and people using IE6 are used to websites breaking and looking like crap by now.

Am I completely out to lunch or should (cbg.gif) be url(cbg.gif)?

jared

I'll mock up a base template when I get home tonight and show you what I am talking about and post it tonight. It should make things a lot easier for you.

You use a transparent .png for the container, and then we will give the poor IE6 folks a different image.

Also, I never mess with min-height because usually (or on all the sites I dev) because the container is always going to stretch the full height of the browser window due to content and a lengthy sidebar.

And I'm going to half way agree with Keebs - IE6 can suck it. But on 90% of the sites I code up (besides my own personal blog and projects) I can not alienate the IE6 people. There numbers are luckily getting smaller but it is still there. I'll show you what I do with the transparent png when I post later tonight. It will take care of the IE6 people with 2 lines of code

airbornflght

that's what I thought.... but I figured I'm the one with now experience so I'd go along with it.

And I wish I could ignore ie6, but according to my google analiytics ~11% of my visitors are using IE6. Do I just effectively tell them to upgrade or **** off?

CB

airbornflght wrote:

And I wish I could ignore ie6, but according to my google analiytics ~11% of my visitors are using IE6. Do I just effectively tell them to upgrade or **** off?

No, you effectively tell them to upgrade or deal with crappy looking pages. (which is what the rest of the web is also telling them.)

MiracleManS

Unless you have to support things for the federal government. Then you grin and say "I'll work on it"

airbornflght

lol. But with this websites primary purpose being recruitment, and with recruitment being nothing more than a numbers game I don't really feel comfortable neglecting over 10% of my impressions.