New site design review requested

[Audiotech]

Hi, I've got a site for my business in the development stages and it would be greatly appreciated if you good folks would check it out and let me know what you think.  I'd like to get input on the layout, colors, ease of navigation, how it looks on different platforms, and things of that sort.  And please DO nitpick the daylights out of it!  Don't worry so much about the actual content as it's mostly fluff and filler.  When it's "ready for prime time" the real info will be added as necessary.

 

Site: http://valvetech.byethost14.com/

 

Thanks in advance;

-Carl

[ignace]

- Your HTML is invalid IMO this is a serious problem

- Page title remains the same for all pages and does not add to SEO

- Your links are blue on a blue background on the products page

- Your flyout menu does not add to accessibility, sub links can not be accessed by tabbing

[Audiotech]

- Your HTML is invalid IMO this is a serious problem

I know it's invalid.  I ran it through the validator more times than I can count and every time I fix one thing it flags two new issues.  One step forward and two steps back....really annoying!  A gent told me a while ago that if I used xhtml transitional instead of strict it'd be much easier to fix but might cause IE to produce some unexpected behavior. But yes, it's a problem that I'm aware of and really should be addressed.

 

- Page title remains the same for all pages and does not add to SEO

Ok, so I would need to change the titles on each page to home, products, services, etc?

 

- Your links are blue on a blue background on the products page

That's odd.  The links are supposed to show up as white on blue. Looks fine locally on firefox and IE6.  Had a few friends look at as well, and this issue never came up. Maybe it's related to issue #1 in some way.

 

- Your flyout menu does not add to accessibility, sub links can not be accessed by tabbing

I'm not totally sure I understand what you mean by this comment.  Every page should be accessible from every other page.

 

Thanks for the commentary so far.  It should be fairly clear that I'm NOT a professional web designer, and info like this is infinitely valuable to getting this site right.

 

-Carl

 

[Adam]

Not bad. Few ideas for improvements:

 

- The rectangle cutting through the "Zwengel" text in the logo looks wrong IMO

- the rounded corners within a squared container also looks wrong

- I'd add more styling to the font you are using, it just looks too bare and basic

- the font size changing on your sub-menus as you hover over a link makes it awkward to move between them

- the color scheme just doesn't seem to flow

- the centered main text on the home page should be left aligned

[ignace]

- Your HTML is invalid IMO this is a serious problem

I know it's invalid.  I ran it through the validator more times than I can count and every time I fix one thing it flags two new issues.  One step forward and two steps back....really annoying!  A gent told me a while ago that if I used xhtml transitional instead of strict it'd be much easier to fix but might cause IE to produce some unexpected behavior. But yes, it's a problem that I'm aware of and really should be addressed.

 

Don't change from strict to transitional just to make it easier on yourself. Keep it strict! And learn to properly write and close your tags.

 

- Page title remains the same for all pages and does not add to SEO

Ok, so I would need to change the titles on each page to home, products, services, etc?

 

Yes. I would do more then that - SEO wise.

 

- Your links are blue on a blue background on the products page

That's odd.  The links are supposed to show up as white on blue. Looks fine locally on firefox and IE6.  Had a few friends look at as well, and this issue never came up. Maybe it's related to issue #1 in some way.

 

It is not related to #1. Your links turn up white once visited. Clear your cache and you'll see to fix, write:

 

a { color: #FFF; }
a:visited { color: #..; }

 

Make sure the color of :visited is different to create a clear indication towards your users they have already visited the page.

 

- Your flyout menu does not add to accessibility, sub links can not be accessed by tabbing

I'm not totally sure I understand what you mean by this comment.  Every page should be accessible from every other page.

 

Not every user can or will use his mouse to navigate your website.

 

1) Load your website

2) Press tab and look at your status bar

3) Note that when products gets selected your flyout menu does not appear

[Audiotech]

Ok, I applied several of the changes suggested and visually I think MrAdams was right on a few points at least.  I changed up the logo a bit and made it transparent as well as losing the square container.  And it does seem a bit more crisp for lack of a better way to put it.

 

I'm not exactly sold on having the black section slice right through the middle of the name, so I may have to either get a strip of black all the way across the bottom of the header or maybe make a mirror image of the top left corner to resolve that.

 

As to the color scheme not quite working right I've had concerns about that for a while.  Every combination I've tried doesn't seem quite right somehow.  Hopefully, somebody will pipe in with a few suggestions.

 

To ignace; I chomped through a TON of errors and I think I've killed most of them.  the only ones left it seems are an error for a script that I can't seem to figure out how to resolve, as well as an attribute in the logo where i set border=0 to kill the purple box around the link.  Again, I've been unable to figure out how to iron that one out as well.

 

With regard to tabbed browsing, I don't have a clue how to get that going.  It took me a month just to figure out how to make the horizontal subs to even work at all.

 

And generally to everybody that's given me input, thank you all very much! I think it's starting to get much better with everybodys suggestions.

 

Rregards;

-Carl

[Adam]

As to the color scheme not quite working right I've had concerns about that for a while.  Every combination I've tried doesn't seem quite right somehow.  Hopefully, somebody will pipe in with a few suggestions.

 

Perhaps use a color scheme generator to help you? My preferred generator is Adobe's kuler.

[ignace]

where i set border=0 to kill the purple box around the link

 

HTML specifies your website's structure not it's presentation use CSS for that:

 

a img { border: none; }

 

Or better yet use Eric Meyer's Reset Reloaded (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) altough I would disadvice as it probably will create more work. Just remember to use it in future projects.

[Audiotech]

Ok, I did some major rework on the site.  How does it look now?  I've got some css issues with regard to IE not displaying the banner image but that's a different question that I think I'll ask about in the css section of the forum.

 

http://valvetech.byethost14.com/

 

Thanks in advance.

-Carl