Site design, criticism?

[Ennui]

I've been working for the past little while on a spiffy new website for Half-Life 2: Wars. So far I'm still focusing entirely on the layout - all of the text content in this screenshot is more or less a placeholder (particularly the news posts, they are just filler). Also, the two buttons on the right bar are ugly, I know, they're placeholders too

So, any criticism or suggestions on changes to the layout? I like it, but at the same time I've got this nagging feeling that there's something not quite right about it that I can't identify.



Image link (so you can view it in its full dimensions):
http://i160.photobucket.com/albums/t176 ... rssite.png

[theblahman]

Looking nice so far, although maybe the nav could do with a bit of sprucing up. I like the colours of the old site, did you try the new layout with the old colours? Might want to see.

Keep it up buddy

[Ennui]

Yeah, I wanted to make a big change from that. I've made plenty of orange/grey layouts in my time, and I wanted to present it differently.

[theblahman]

Yeah, I wanted to make a big change from that. I've made plenty of orange/grey layouts in my time, and I wanted to present it differently.

Fair enough

I think maybe a 1px left border for the sidebar could be nice, or space it out some more. That's a problem I had with my website, my sidebar was too close to the content which didn't look very nice.

Experiment, my dear Ennui.

[Habboi]

It's one of those typical layout sites, they work well and you've done a good job.

[Blink]

I think your borders are far too thick, makes it look like a yucky table based layout.

[Ennui]

Changed a few things, and filled in a bunch of the content. It's more or less done, notwithstanding a wee bit of PHP conversion and some little stylistic updates to the code to make it all standards-compliant. Still accepting suggestions for ways to make it look better!

Here's a live test version of the site:
http://www.ennuiverse.com/hl2wars

[theblahman]

Dead link dude.

[Ennui]

Dead link dude.

That's because you responded before I even had time to finish uploading it. Try again.

[theblahman]

Well, first off your index.php doesn't exist.

The top bar: It seems a bit odd to have two links for the wiki and three links for the forums within ~150px.

The header image: The slogan just doesn't sound right to me. Maybe "A real-time strategy modification for the source engine" or something like that. "A source real-time strategy modification" just sounds really weird to me.

The nav bar: It's pretty clean and nice, I like it Although it could do with some extra details, it would only ruin the simplistic design.

Content: I think you need more vertical spacing, especially in the little grey box that has little details in it. The content just seems a little vertically squashed. You could try a bit of letter spacing, but I'm not really sure how that would turn out. Generally letter spacing is fine as it is.

Sidebar: Same issue with content. Seems too vertically cramped.

Footer: It's a footer, need I say more? (No offense intended).

More work to be done, but you're on your way!

[Ennui]

Aye, like I said I haven't quite done the php stuff yet because it's not on the native server / database yet. Thanks for the additional suggestions, I do have a bit of style tweaking to do.

[theblahman]

Aye, like I said I haven't quite done the php stuff yet because it's not on the native server / database yet.

Honest to god I took up reading when I was a kid. It was the concentrating part I sucked at

Thanks for the additional suggestions, I do have a bit of style tweaking to do.

No worries. The web design section is my home I want to help you!

[Blink]

I was checking out the live preview and it's a pretty bad idea to manually re-size that little 'Recent Media' image to look like a thumbnail with CSS (or HTML). The user still has to download the full image but it just gets crammed in that tiny box, which basically defeats the point of a thumbnail.

View your site without styles applied to see what I mean.

Also site decoration (such as your banner) are best applied as CSS Backgrounds, and only images relevant to the site content should be placed with img tags.

It depends how closely you wish to follow semantics, but they were the minor niggles I spotted. Looks good otherwise.

A tip for your CSS, a lot of declarations can be shortened. So instead of your:

Code: Select all

border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;

You can use:

Code: Select all

border: 1px solid #000;

The same applies to Margin, Padding, Font and a few others.

Useful - http://htmldog.com/reference/cssproperties/

[Ennui]

Thanks guys! I'm gonna clean up the code, convert to PHP (as well as stop being a lazy ass and make a thumbnail for that screenshot) and make some minor CSS adjustments, and then I think I'm ready to go live. At some point I might try a couple of alternate color scheme stylesheets in which case I'll bump this thread.

[theblahman]

Thanks guys! I'm gonna clean up the code, convert to PHP (as well as stop being a lazy ass and make a thumbnail for that screenshot) and make some minor CSS adjustments, and then I think I'm ready to go live. At some point I might try a couple of alternate color scheme stylesheets in which case I'll bump this thread.

PHP can make thumbnails for you. With the media section, a script could get the most recent picture, convert it to a thumbnail then display it in that latest media box.