Site critique please!

Guys

Please have a look at the following page mock up:

http://website.lineone.net/~abuckingham/index2.html

It's only one page so none of the links work, but I was looking for some CONSTRUCTIVE criticism!

Cheers

Alex.

Okay here goes



Need   in there since that cell doesn't display in Netscape/Mozilla. All empty td's should have   or if you want 1 pixel or so high cell then use single pixel transperant gif like spacer.gif

Form tag for the account login is over entire table. This will not allow you to use any form within the table. You may want to reconsider the placement of that tag.



I dont think anything needs to be said about the above besides "What the...."



The class="bodytext" in the <P> tag is not needed.



You should remove the span tag there


None of your images have alt attribute set. You should get into the habit of setting this as it is required to be there in XHMTL.

The little icons in the top (house, letter, flowchart) they really should have some text with them. It may not look as good but what you are using is called "Mystery Meat Navigation", ya don't know what you get till you order it. Its something that frustrates a lot of users and is considered bad website design.

Okay now going out of code and into images.

The file http://website.lineone.net/~abuckingham/images/topbar_right2.gif. You have a large section of the background on this one that doesnt seem nessesary.

The same goes for the image http://website.lineone.net/~abuckingham/images/bottombar_left2.gif

Final note is that I would use CSS on the username and password boxes, not the size attribute and set them to be a font that is the same as the rest of the site. This is a cosmetic detail though and subject to opinion.

Well I think that covers it

EDIT: Just to let you know, most of the above errors where due to using dreamweaver without checking the code once you are done. Dreamweaver is a great tool but it shouldnt cause you to be lazy and not check the code it produces as a lot of optimisations can be made to the code.

I think your page looks nice.

If you are interested in breaking out of dreamweaver and designing with more standards compliant forward compatible code you might want to check out a few of these sites.

www.alistapart.com
www.bluerobot.com
www.meyerweb.com
www.albin.net/CSS/roundedCorners/

It's kind of a slow process and it has/is taking me a while. Some advantages of not using tables (especially nested ones) for page layout are faster rendering times, readability in other devices. XHTML strict code also allows netscape and IE to use a different rendering engine that will display the page faster. And you potentially save on redesign time in the future.

ps ditto on the mystery meat navigation. Check out "Don't make me think," it's a great book on usability, or go to www.useit.com, though don't take neilson to seriously.

That meyerweb site, you been there recently



All that is there is the index page. Its nice XHTML but is that all thats meant to be there?

Thank you for your comments a.koepke!

Apart from the glaringly obvious error on the spacer width and name which I've already fixed and just not uploaded(!!), I'll sort these things out using your comments...Thank you.

I've actually posted up another thread somewhere (I think) regarding the <form> tags.
I tried putting the <form> tags inside the table but an automatic space was put in after the form, making the spacing of the table that contains the form elements look very wrong, which is why I put the form tags around the whole page!
Is there anyway of forcing a space NOT to be included?

The company I work for full-time has basically forced me to use Adobe GoLive for the past few years and this is my first private site using Dreamweaver MX which I recently acquired! I'll get used to it!

word. That was not anticipated. Maybe his sister just died? It normally doesn't look like that.

Check out www.meyerweb.com/eric/

Thats cool. The links posted above were really good. I know XHTML but last time I used it I encountered a lot of hassles with cross browser compatibility and did not enjoy the experience. I then spent a lot of time converting things back to HTML. If you can use XHTML do so, but it can't be used in all sites, there are some things that I could not figure out how to do and could not get an answer anywhere.

As to the space, the only way I have found is a cheat. It breaks W3C compliance but works

Put the form tag behind the <TD> tag



Not a good habit to get into but it works The other way you can do it may be via setting a negative margin on the tag using CSS. Don't know how this works with W3C compliance either.

The best way is to put the username and password fields into seperate table and wrap that table in the form tag.

EDIT: Removed all the extra stuff from the input fields as it was pushing out the forum width. The code is an example so it doesnt need to be there anyhow

I'll look into this "mystery meat navigation" and try to find a design solution that looks good as well as works well!

Thanks guys, you've been grand!

For general rules about the "Do's and Don'ts" when it comes to site design see this site

http://www.websitesthatsuck.com

The article by him on MMN is really good at proving the point http://www.fixingyourwebsite.com/mysterymeat.html

Oh just a note, in your case the icons are quite descriptive so if you have to leave them in it may be acceptable, not ideal, but acceptable.

I have to disagree. I didn't find the icons nearly descriptive enough. Newby internet users would probably have no clue on some of them.

See that's odd...I reckon that the "home" and "email" icons are so straight forward it hurts!

The only one which would be ambiguious to a newbie is the "sitemap" icon...Fair comment. It is a bit of a dumb one!

The home icon I agree on with you on. However the e-mail icon is ambiguous because it could be e-mail the company or e-mail the page to a friend. A lot of news sites and e-commerce sites use a letter like that with some text like "Send to a friend" to refer the page to somone else via e-mail. The other icons are navigation, while the e-mail proably isn't so that helps confuse things a little more by mixing the categories. The site map icon is clear if you know it, but completely clueless if you don't.

have to agree about those icons,
they are to invisible,
atleast the home link should be have the same look as the other menu links


and you need to set a background color,
not every users have white background color as default in their browser,
can't believe how many people that those that mistake,

Very nice webpage, no immediate problems that I can see in IE. It scales to 800x600 properly. I would test your page in Netscape 4 as that is the 3rd most popular browser next to IE5 (#1) and IE6 (#2).

According to my approx. logs over the past 2 years (sorry for the poor formatting):

Browsers
MSIE 5 50%
MSIE 6 39%
Netscape 4 4%

Realize that Netscape 4's percentage would be even lower if these were stats for only the last year, or last 6 months.