Topic: client site review

http://hspc.com

One of the most professional sites I've done, general comments and overall usability marks are what i'm looking for.
Thanks,

~Sir_KiTree~Scan~
..::ill communications network::..

I like the colors you've chosen. They aren't the most common ones, but they work nicely together.

On the menu on the left side there are some artifacts around the logo. You should get those removed, they kind of remove the clean and finished feeling the rest of the page has. The menu is nicely done, but a couple of more padding to the right of the menu items might be worth considering.

The hover effect might also look better if you kept the gradient from the background and only changed the color. As it is now you've got a gray gradient when it isn't hovered over, but the hover effect is a simple orange color. Give the orange the same gradient and I think it will look better. The orange hover effect should also extend all the way to the right edge of the menu. There is also a wierd little black dot in the bottom-right corner of the orange-hover area. The reason that one appears is that you've got a <br> tag inside the link, remove that one and all should be fine.

I would also add some kind of extra effect to the menu item that leads to the current page. Have the text of that link in orange for example. That would make it easier for the user to see where he is on the page. Strictly speaking/typing that link shouldn't be a link either (since it doesn't take the user anywhere), but that is optional.

When viewing the browser with FireFox (Opera is my default one) the menu items only span the text length and not the whole length of the menu. You should do so that the link is affected over the whole menu width. There are a couple of other display bugs in FireFox as well that you should look at.

At the moment there is a bit too much white space on the front page, but once you get more content there it might help. The front page should also have some kind of information about what kind of company this is. Just a couple of lines and a link to the About section would do. When viewing the About section the sub-title says "Browse Products by: Product Category: Health & Safety Products". I think it should say something like 'About HSPC' instead.

I also noticed that you've used some kind of iframe to show the content. Why? I would have thought adding the content as simple content in the main page would have been better. If you want to have the menu and header visible at all times you can just add 'position: fixed' to their style declaration. At least extend the iframe to the bottom of the browser window. But I've never really liked iframes, so I might be a bit biased...

When viewing the products you should add some more padding between the elements, they look kind of cramped now. The description text should also be link to the product page. The product page should not be a pop-up. I've got pop-ups disabled as default and if I wasn't reveiewing the page now, I would have exited the page once I realised you where using pop-ups. I doubt I'm the only one who would react like that. Instead you should open the product page inside the iframe that you're already using and supply a 'back to index' button on the product page.

I'm not that found of the design of the product page. I would prefere a simpler display of it without the fancy borders etc. The reason I open the page is to see the product, not to be distracted by things like that. So stick with simple orange/black borders, and if you arrange the content correctly you might not even need that.

[edit]
Almost forgot the most important part. Add a Doctype! Without it you never know how the browsers will render your page. Along with the Doctype you should also add an encoding definition so you're sure that the content will be rendered correctly. You should also look into CSS and table less design. There are a lot of good reason to make the switch. You've probably heard them allready, so I wont' repeat them here. If not you'll find a lot of articles about it through google.

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

[This message has been edited by Veneficuz (edited 02-23-2004).]

Too bad B and P aren't closer togeather on the keyboard. You could get a lot of traffic from people misspelling HSBC.com...

Firefox under freebsd doesn't like your content area, things are out of alignment, and I have to use my mouse to select content off the page to view it, defining the doctype might fix this, as I am currently rendering in quirks mode. The go button overlaps into your content area.

Artistically, I might get rid of the drop shadows. The majority of your page feels very 2D, except for your menus, and with your menu's you have 2 layers to the depth, and for some reason it is just not working. The menu falling down the left side has a really muddy drop shadow, you need to fix this. Or meld it into the lower menu. The 3 levels just make it seem rather unweildy.

Good luck, lets see the next revision.

-Dan-

There's definatly something funky happening down the bottom of the page as Opera7, Mozilla 1.0 and FireFox 0.8 have issues with it. Firefox fares the worst, followed Opera7 which displays large excess of white space compared to the other browsers and then Mozilla with some minor text alignment issues..

At a guess, I'd say you've got an unclosed or wrongly nested tag down there somewhere. The whitespace in Opera could take a little longer to sort out.

Although I must say there really isn't any excuse for not testing your website in other web browsers (well, unless you're using a computer you can't install software on). Most of them are free (free stuff is always good) and the ones that aren't free don't hold enough of a userbase to warrant major concern anyhow (concern is bad). So in future, try and iron out (irons are good too) any cross browser issues in the XHTML or HTML forums (good forums) before posting here (also a good forum) so the reviews you do get are more focused on design (good for you) than the problems people found with their browser not rendering your site properly (good for us).

Which is just all round good.

this is how I get when I don't drink anough coffee...

[This message has been edited by Cameron (edited 02-24-2004).]

Ok, so i fixed a lot of what Veneficuz suggested... all except the doctype. I'll admit I haven't read up much on them, but when I did try to insert the transitional or the strict it screwed up my design. Basically the whole thing is in a table and the "iframe" that you mentioned is actually a div with the overflow set to scroll. So question is, how do I implement a doctype without screwing up my design and why?

Here's an example of one of my pages WITH a doctype included.

Thanks for all of the input, gave me a lot to work on and I think the site is definatly functioning better as a result of the changes. Not to mention I HAD heard of Mozilla... but not the Foxfire. THanks!

~Sir_KiTree~Scan~
..::ill communications network::..

I see your problem when you put in the doctype. You still should put one in and then fix the problem. It is just a bad practice relying on quirks mode to render your pages, it won't work some day, and then you will have a really broken page.

-Dan-

ok, thanks. I'll definatly keep that in mind and start designing with a doctype from the start on any other site i do. as for this one though, the doctype will have to come later or as a redesign. I'm sure my client doesn't want to pay me to make a change like this and it's not really something i want to do for free as it would take a lot of time. is that bad practice you think????

~Sir_KiTree~Scan~
..::ill communications network::..