Well guys, a few of you may know I'm into web design, and in particular producing graphics. I've been offered a web design job for a company called GHP Consultancy, more on that in a minute.

I've basically produced this website and was wondering if you could all beta test it! Suggestions are welcome, I'm going to be adding pictures of the client's projects and such on a few pages to lighten the load when I get the images. Consider that this IS what I'm going to present the client with, so the welcome note is temporay.

I've also got the slight problem of choosing between banners, which is best do you think?

http://www.oxyonagon.com/GHP/images/banner.jpg
http://www.oxyonagon.com/GHP/images/banner_b.jpg

I'm simply asking for opinions, do you like?

EDIT: fixed title.
Main Site (All about GHP):
http://www.oxyonagon.com/GHP

Thanks,
Sneaky

Those don't seem significantly different. I don't know if they said you should say what it says on the banner, but, however honest, "A Leading..." may be, if you are advertising, you are marketing, and it's a capitalist society (and however wrong it may be, they aren't trying to make friends, fundamentally), so, "A Leading..." doesn't give me much confidence that they have much confidence in their own work.

The images aren't too bad (although they cause scrolling in 640x480 monitors).

The main body of the page, however, is absolutely fugly. You are using standard Times New Roman, with a weird text color, and a bluish background color, which generally is not recommended for professional/business websites.

Frames are also a bad idea, I don't like em at all, personally.

The pages are not valid HTML 4.01, at least the frameset page isn't.

Finally, having the navigation bar at the bottom creates a sense of being lost, as a regular PC user wouldn't look at the bottom at first.

banner b, it's slightly easier to read.

I sorta agree with Master Tonberry. That L is the only capital letter also looks sorta weird (well, aside from the beginning letter A). I don't think "A Leading..." sounds THAT bad really, just the capitalized L is bugging me.

QM

P.S - experience not experiance

ok, I'll take into account, matty, it's just an idea that I'm showing the company tomorrow. It's too late to try anything else, 1:34am here

I'll change the lettering and banner to banner B though. Maybe a font change to verdana.

EDIT: Oh yeah, forgot to say that I'm probably going to be adding a background image to the main body, a faded building or something the same sort of colour as it currently is. I'm trying to match their Brochure in colour themes...

Why Frames are bad.

I agree with everything Matty said but I will add one thing. Use XHTML. It's the current standard.

You're also using tables where there is no need for them at all. Specifiallly the "Who We Are" and "Contact Us" pages. The other pages dont really need tables either. The other pages, you basically have a two column layout. That is easily achieved with CSS.

Tables should only be used for displaying tabular data, not for positioning text.

..and additionally, a PHP-based system is always good :p

Nah but seriously .. being as frames are bad, and a CSS/xhtml formatted page would be much cleaner and attractive, you may want to consider using a php backend so you don't have a bunch of .htm files to deal with.

Fonts to consider using: Verdana, Georgia, Lucida Grande (followed by Lucida Sans Unicode) - these are all screen fonts, designed to display well on a screen

Fonts to avoid: Arial, Times New Roman - these are print fonts, they haven't been optimised for readability on a monitor.

Avoid Frames
Avoid Tables
Avoid the Font Tag
Avoid doing any presentational formatting whatsoever in the markup itself - do it all in css.

You say you're into webdesign, that's good. But if you're serous about money you've got to really be into webdesign or someone who is will come along and offer to redesign all your hard work.

I don't really do much design work anymore, but I agree. New technologies are available, but old habits die hard. We have had to use tables (In the IE4/NS4 and previous generation browser days) in the old days when standardization just wasn't developed yet. I still remember all the stupid web tricks that I did to make layout look the way I wanted it to. When I code HTML these days, i have to stop myself from going old-school and using tables to lay everything out.

however, using tables instead of CSS may be bad code, but is works equally well in most browsers, and it's faster for me to do it the old way with tables. So, it's a balance between doing things the fast way or the right way.

You misspelled "opportunity."

Don't use Serif fonts in the site. It may just be my personal preference, but I can't stand them. Use something like Verdana/Arial. What makes it even worse is that the banner doesn't use Serif fonts making for an uneven style.

All I'm qualified to say. For I know not of html things.

Ok guys, I had a look, thought it was rubbish this morning, and completely redid it all. I'm getting some images soon, and the client SHOULD see this version first, which I think works better.

Opinions? I'm not trying to break through the barriers of web design, I'm just trying to make a simple effective site. I took on board what most of you said, except that I've no idea how to change my html format... I just learnt to code it like that. The tables are mostly for alignment reasons, it just feels easier using them.

But generally, does it look ok? Nitpicking welcome too...

EDIT: http://www.oxyonagon.com/GHP/

1000% better! Everything seems fine to me, except when you click on the link to go to the homepage on a couple of the pages, it opens up another browser window. Baaaad.

Looks good. I like the coloring, and the layout is simple and easy to use.

Nitpick? You asked for it!

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.oxyonagon.com%2FGHP%2Fabout.htm

Fix everything listed there.

Remove all <font> tags, they're deprecated.

The exact same <div> tag is repeated at least 3 times in many places, right next to eachother.

You create spacing by using <p> tags. Use <br> instead. (<br /> if you decide to go to XHTML)

You have nested <p> tags, which is incorrect.

Start using CSS, and ditch the tables.

And it still scrolls in 640x480 resolution.

Don't use <br /> for spacing either.

You shouldn't need to force extra spacing with content tags if the page has good markup and css.

It's now generally accepted that 800x600 is the minimum resolution for sites unless they're meant to be viewed on some sort of tablet PC.

Do not put Arial (and I think Helvetica) in your font lists, they're not screen fonts.

The way your menu is seperated in exactly the same way as the text in the header indicates that the header is supposed to have links in it - when it doesn't.

Care to explain this? How else are you supposed to increase the distance between a couple paragraphs without adjusting paragraph spacing?

W3C.org mentions nothing in terms of the use or misuse of the <br> tag. It's fully supported, non-deprecated, and even has support in xhtml.

Quite simply, you adjust the paragraph spacing.

The best way to look at webdesign is to remove ALL presentational stuff and just have your page structure.

If the flow of your text demands you insert some line breaks, then do so, but otherwise the desire for line breaks is likely to be purely presentational.

What real reason is there to shove extra spacing between lines of text?

Here is one example of when i'd use a line-break:



Whether i'd have the <p> tags in there is down to the structure of the rest of the markup rather than as a necessity.

What I mean is, is that sometimes you want text lines spaced further apart between text:

<p>blahblahblah paragraph</p>

-good bit of spce for design purposes-
<br /><br />

<p>blahblahblah paragraph</p>
<p>blah blah second paragraph</p>

And what I said is that if you're spacing things out just to make things look better you should do it in css:

<p class="special">blahblahblah paragraph</p>

<p>blahblahblah paragraph</p>
<p>blah blah second paragraph</p>

//

.special { margin-bottom: 50px; } (or whatever spacing method seems to work in this case).

If it's a one off you can do it using the style attribute of the <p> tag, <p style="margin-bottom:50px;">.

Can you give a real example of when you should space text out like that? Rather than just showing me the markup, i'm well aware of what the markup looks like, i'm just having difficulty understanding the point.

Yeah, now that I think about it, I guess that could be done also. But as long as the w3c says its okay to do it my way, then that's how I'll do it. Just much easier that way.

That's a lot better, although I'd probably make the screen font a little smaller.

Wish I could give more technical advise, I got quite far into HTML and Javascript during my brief fling at Uni, but I've forgotten a lot of it.

The font's big so it's easy to read... urr... yeah. Nobody uses 640x480 unless they're playing a game on a low end pc. I consider 800x600 to be my minimum target size. I'll just leave the way the html is, I mean, it worked for you didn't it? I just don't have the time to sort every single bit of code to the new regulations.

I'd originally planned on having the smaller text linking to something but I scraped that so I'll change it soon. No idea how to work CSS, hated the stuff. Tables seem to work fine for me though.