Topic: code walkthrough please?

Howdy folks,

i think this may be one of the first times i've started a thread in this section... which is kinda wierd, seeing as i'm a web developer by trade!

anyways, I've got lots of experience in making websites, and a fair bit of experience in css/javascript, and we've been slowly updating our work sites to be a little friendlier in the html department, but this is the first time I've had the opportunity to build a site, from scratch, in standards.

Here it is:

http://www.bcct.org.au/v2

Now, it's valid xhtml, but i would like someone else to look at it, and tell me what they would have done differently, what i could improve, what would be better as far as accessibility, semantics, scalability, usability is concerned.

Font sizes is something that i really struggle with - does anyone have a good technique? I love being able to re-use style classes across areas, but if you've got an item that's 90% of 90% of 90% of 90%..... it gets small and inconsistent.

Thanks in advance to whoever gives this a once over!

http://www.thenoodleincident.com/tutorials/typography/

thanks for that reisio! it instantly earnt a spot in my bookmarks hall of fame.

so, i take it that no-one is able/willing to walk through the code?

oh well.... i suppose it is pretty quiet around here these days.

I took a quick look.

The HTML is great. I was surprised how short it was considering how complicated the page looks. It also looks very semantically correct. You could make your alt text for the images a little more helpful for people who can't view the images. For instance, "today's highlight!" doesn't fill in the fact that the image I can't see has harry potter on it. Maybe this is just because it's a test page, but it won't hurt to keep in mind. The page degenerates well when CSS is turned off.

The CSS is a little confusing, simply because of a lack of formatting. I'd recommend spreading things out a little by putting each property on its own line. This will only introduce a newline and possibly a tab for each CSS property, so it shouldn't bring the filesize up much, but I'd imagine it would be much easier to edit and read. You might also want to comment a little more to clarify what parts of the page the CSS is intended to modify, and how. The code itself looks fine, you're making good use of cascading and not specifying properties in more than one place. Functionally, the CSS is good.

The JavaScript is decent. The addClass and removeClass functions worry me slightly because they don't account for class names that are sub parts of other class names. For instance, if an element had class "notred" and you tried to add the class "red" to it with addClass, it wouldn't work because "red" is already a part of that element's classname. This obviously isn't an issue on your page, but you'll have to be careful if you reuse those functions. Otherwise the code is fine.


 

hey slime,
thanks for that - i'm glad you feel the html is clean enough.

um, yeah - the alt tags are lacking because of the testing status of the page; hopefully once it's in Joomla, i can make sure that bit is covered too.

Thanks heaps for pointing out the addClass/removeClass function deficiencies. That's actually a bit of a shared resource, so i had best fix it now before it propagates its way through all my code. Might actually start a JS thread about the cleanest way to do this, unless you already know of the nicest way to do this....

Thanks again for seems to be quite a thorough 'quick look'! I really appreciate it.

The best way to fix the javascript problems is probably to use what you have, but replace the string manipulation functions with regular expression tests that make use of word boundaries (google those if you don't know about them).