Crits please...

[Green-Beast]

XHTML Strict, CSS2, PHP, no tables, just divs, and 1% JS only. Please note that it's purely experimental. Just trying to see what I could do design-wise for Strict and AAA compliant site (the site itself explains more). I can't say I care for the index myself (fugly kinda, but neat in a way), but I'm keen on the pages themselves, personally. And my wife love the large text option as she has a tough time with normal text due to poor eyesight.

Crits please.
LINKY HERE (http://www.green-beast.com)

By the way, it's fine if you want to tell me it sucks (I've only been doing this stuff since June so I need and want the contructive feedback), I can handle it, but PLEASE tell me WHY you think so. To tell me it sucks and not say why is a waste of your time and mine.

Thank you.

[Robin Hood]

I like everything but the color of the text at the top, it seems just to wishy washy, I think a solid color would be much better here. One more thing, I know my rez is set really high, but it just seems really small.

[Green-Beast]

If you mean the site pages I made them for an 800x600 monitor or larger - maybe I should have just centered it or done it differently.

The index I don't care for that much and plan to change it, or at least graphically enlarge it. The banner text on it should look like the "original" version's banner but I screwed it up. The index icons are history :)

The pages themselves, though, I kinda like.

If you mean the text, There's a link to make it larger (it changes contrast too if you look for it you'll notice, it's subtle but effective). Different set of style sheets.

Thank you for your comments. If you care to investigate and elaborate more, I'm all ears. Anyone else?

[Robin Hood]

The text at the top I was refering to is the green-beast.com. It is just kinda washed out with the white effect you got going on, try lightening the effect, or just trash it.

I think the text in the pages is just fine, I was refering to the whole thing being small, but like I said earlier, I am at like 1280x800 on my laptop, and it just seems small to ME. I generally build sites to fit monitors that are at 1024x768, just for the simple fact, only a very small percentage (maybe a half of a percent) of most of my tageted audience is actually runing less than that. And the way I feel about that is if they don't know how to turn up their rez just a bit, pi$$ on them, let'em scroll.:D

[Green-Beast]

Cool, I understood what you were saying correctly then. I agree. All index page stuff.

The monitor thing for me wouldn't work, however, especially trying to make the site accessible. It'd fly what in the face of what the site is all about. I could have made it size dynamic I supoose, but it was getting difficult (my first site ever using Divs/CSS only). I know so many people who still use 800x600. My wife does on purpose cranking hers down to better see the screen. And for this site, I have no specific audiance, it's to be for all. At least it isn't at 640x480 like my hosting site (Profile WWW). On your monitor it'd be borderline cute it'd be so little lol.

Thank you VERY much.

[Jona]

Hi,

The Green-Beast.com header seems aliased; can you make the image smoother? Also, I think your shadows are slightly too prominent. You might try toning them down some.

I'm on a 1024x768 pixel screen -- the most common screen resolution out there -- and the content area is extremely small. I like your original version more, in fact. If you made the content area two or three times larger, it will certainly be better, but I still don't like the idea of having not one but two extra scrollbars. It just means I have to move my mouse more and focus harder to read your content.

Bobby is a liar; it can help some, but just because Bobby thinks you're valid doesn't mean you are necessarily. Try searching for some comments by Robert Wellock in the Accessibility forum to see some opinion from an XHTML master.

Why don't you make those image icons links? It's almost like duplicating your footer content. I would make the icons links as well, and put them in an unordered list.

Your footer text is almost impossible to read. You should make the font size slightly larger and darker by default, and have the larger text option increase the size twice what it does now. Even then, your text is very hard to read. I think a lot of the problem is the "Designed Accessibility" background you have behind the text. Also, no one is going to read all that text in the footer. Just say your copyright notice and give a link to the site you're hosted by. Add TITLE tags to all of your links, and mention the accesskey there, instead of where anyone can read it. (E.g., <a href="page.html" accesskey="p" title="View my page. Accesskey - p">page</a> instead of <a href="page.html" accesskey="p" title="View my page.">page (accesskey: p)</a>.)

Your bookmark link doesn't work in Mozilla Firefox. You should use the JavaScript "document.write" method to output the link so that users without JavaScript will simply never even see it. As an alternative, use NOSCRIPT tags and say something like "Please bookmark!" Since your script only works in Internet Explorer (presumably), I'd recommend saying "Please bookmark (Ctrl+D)!" when the person browsing the site is using Mozilla or Netscape, and use the link for people who are using Internet Explorer.

I'm a bit behind in work, so I didn't dive into your code, but those are some things that I think could be done better. Good luck! :)

[Green-Beast]

Thank you very much for that, Jona. It has led to a couple of questions and/or comment though if you don't mind answering or commenting on, just for a bit of clarification.

1)You're right about the banner on the index page. I will be redoing that whole page more than likely, a lot of the decision based on Robin Hood's comments (also very valuable to me). I will probably double the size and remove one -- if not both -- of the scroll bars. The main reason I want (and have wanted to) is quite simple. I don't like it. It's doesn't look as good as either of the two site versions. The index is almost a letdown, and the visitor goes there first. Bad move on my part to make it that way. Also, and this is the main reason actually: It does not display in the right order or in a logical manner if the styles are removed. It's an accessiblities boo-boo in my mind. If you remove the style from the site pages themselves, it renders perfectly and makes total sense in the way the content is presented. I could do a lot better. But it was my first go at this stuff. I forgive me :)

2) "Bobby is a liar." I totally agree. It's almost bogus. I see a lot of sites out there which are displaying the Bobby's AAA icon and I know they do not meet the User Check requirements very carefully (they lie or simply don't know perhaps). I did go through every User Check (1, 2 and 3, very carefully and unless I'm grossly mistaken I did actaully meet all the user validated requirements. I tried to do this right and be honest and use integrity. I didn't want to cheat or circumvent the system. I have hopefully earned that AAA. It was a lot of work meeting the user check requirements I must say.

3) But I did cheat a little in two regards. There are probably 2-3 instances of presentantional data in the markup. A few breaks, a couple of no-breaking spaces and the like. Nothing major, but it's far from perfect. The other way I cheated was to make off-site links open in a new window. First I had to overcome the Strict validation need (I managed by nesting target='_blank' in onclick=""). I did, however, make it very clear to the visitor, in text and title (tooltip), that the target was a new window. If I'm not mistaken, it's allowable by W3C AAA and strict if you warn properly. I did add some otpions on popup links, though, in case they didn't want thing to open a particular link that way. My personal preference as a web user myself is to have a new window open if it leads off-site. I have to disagree with W3C as that being preferred by all. They're worng and I personally feel that is somewhat dated thinking.

4) I didn't make the icons links for one main, perhaps silly, reason: I didn't want to have a border on the images as link and could not use border="0" as it's deprecated. I could not figure out a work around as I managed with the target thing. If you know of one to put in the CSS that'd be awesome. That is one of the only things keeping me from doing all my sites in XHTML Strict. I think one of my thoughts at the time was for accessibilites too, (thinking that using an image as a link being not the best way to go or illegal, I don't rememeber). I know now, though (or think I do) that it's allowable as long as title and alt are done right. I did not understand what you mean by putting the icons in a UL. Wouldn't that put them in a vertical format? I use UL extensively of the Contacts page of the site itself.

5) Agreed about the text. No questions there. It's really tough for me and I'll have to think that over some. You see, the thing is is I personally find large body text ugly and I wanted to make the site pretty. I messed with that for quite sometime figuring out what to do. I did bounce it off my wife and she was absolutely thrilled. Her eyesight is really bad (she married me uh huh) but she said it (Large Text Option) was perfect for her. Now I'm really torn. Would a 1pt increase be enough? Or maybe a contrast change in lieu of an increase? I will work with those interferring background images such as designed accesiblity.

6) Access keys. I did it that way on purpose. Here was my thinking. Please me if it's wrong as I would love to omit that: I figured that if someone has only keyboard access, they wouldn't be able to mouseover the links to gather the titletext accesskey info. I thought it kind of defeated the purpose. In my mind it was a way to cheat the requirement and I didn't want to cheat it. However, perhaps to a text brower, this is not so. Is my logic sound or am I missing something here? Would a person with only keyboard access only be able to see the accesskey info without hovering over the links with the mouse? To the best of my knowledge tabbing to a link doesn't give the visitor that info. (I tested everything pretty good and you do not need a mouse at all to navigate anything on my site. That was my goal for W3CAI AAA.)

7) I didn't want to use any JavaScript actually. I did make a top bookmark, but I could not get it to return to top fully. I tried 18 million ways and just couldn't do it so I ended up using JS+00 for the TOP link. The bookmark I knew of no other way (I'm a n00b ;)). If possible, can you give me more information about your suggestion or give me a link perhaps to somehting which explains it in more detail. I'm all for it, I just want to do it right. Ctrl+D is a good idea, that would only mark the page they are on though, right? I have my bookmark setup so they bookmark the domain only, whereever they are on the site. I did it this way so they are not bookmarking a page I may very well move at some point.

I think that's all I have. I know you're behind with your work, but if you do get a chance to reply that'd be great. Your comments thus far have been helpful to say the least.

I will check out the accessiblities forum you suggested.

And if you can look at my code that'd be great. A lot of PHP so looks can be deceiving. The CSS is valid, but I know it's way too long and redundant. Some of that was intentional as I wanted to leave very little up to the browser. if you want to see the CSS I do have it as a referrer link so it'll come right up and you can see it on the validator page.

Sorry for my lack of brevity.

[Neczy]

To have it so there are no borders around images on your site, using css, add this into your code:

img {
border: 0;
}

[Green-Beast]

I could have sworn that I tried that (like one of the first things as it is the most obvious), but it didn't effect a change in images used as links (blue, purple, red border). Perhaps I did something wrong but I'm not seeing it at this moment.

To confirm, please, will that work on images used as links or does that need to be applied to0 "a" or a.img(? lol) or something?

Thank you for your response by the way.

[Jona]

Originally posted by &gb;
1)You're right about the banner on the index page. [...]

Your HTML should always be what is written first. When images are disabled, I can see alternate text for your header image, but since it is the primary heading of your site, it should be wrapped in an H1 tag. Also, if I disable styles, I'll see the images; it's preferable to use a background image with CSS instead of the IMG tag so that no images for presentation appear when CSS is disabled. Check out the Shea Image Replacement technique (http://www.mezzoblue.com/tests/revised-image-replacement/).

Originally posted by &gb;
2) "Bobby is a liar." I totally agree. It's almost bogus. I see a lot of sites out there which are displaying the Bobby's AAA icon and I know they do not meet the User Check requirements very carefully (they lie or simply don't know perhaps). I did go through every User Check (1, 2 and 3, very carefully and unless I'm grossly mistaken I did actaully meet all the user validated requirements. I tried to do this right and be honest and use integrity. I didn't want to cheat or circumvent the system. I have hopefully earned that AAA. It was a lot of work meeting the user check requirements I must say.

The only way to be sure that your site is accessible is to ask someone who has a disability to test it for you. You can't always depend on technical observations (http://www.mikeindustries.com/blog/archive/2005/01/server-side-accessibility) as they aren't always completely accurate. The Web Content Accessibility Guidelines (http://www.w3.org/TR/WCAG10/) should be your "Bobby validator," though. Bobby can't test everything and can't be sure whether or not you are truly abiding by the rules. You have to check things manually.

Originally posted by &gb;
3) But I did cheat a little in two regards. There are probably 2-3 instances of presentantional data in the markup. A few breaks, a couple of no-breaking spaces and the like. Nothing major, but it's far from perfect. The other way I cheated was to make off-site links open in a new window. First I had to overcome the Strict validation need (I managed by nesting target='_blank' in onclick=""). I did, however, make it very clear to the visitor, in text and title (tooltip), that the target was a new window. If I'm not mistaken, it's allowable by W3C AAA and strict if you warn properly. I did add some otpions on popup links, though, in case they didn't want thing to open a particular link that way. My personal preference as a web user myself is to have a new window open if it leads off-site. I have to disagree with W3C as that being preferred by all. They're worng and I personally feel that is somewhat dated thinking.

The BR tag is not invalid Strict and therefore not presentational markup. All presentational markup was removed/deprecated from the Strict DTD. Not everything can be controlled with CSS; the BR tag still serves a helpful purpose. Although, the NOBR tag shouldn't be used, since it does not appear in the HTML 4.01 strict DTD (http://www.w3.org/TR/html401/strict.dtd). Opening links in new windows when they are external can be a good thing; I myself do it (look at my Computer MasterMinds site and search for any external links; there is no HTML present in any external links, but they open in new windows due to an included JavaScript file). Personally I prefer that windows should open automatically by default when they are links to external sites. You can setup a checkbox to say "open links in new windows" or use an icon of some kind for links that are external (or signify that they will open in a new window). There are various techniques for doing this, a good example is at Ryan Brill's blog (http://www.ryanbrill.com/).

Originally posted by &gb;
4) I didn't make the icons links for one main, perhaps silly, reason: I didn't want to have a border on the images as link and could not use border="0" as it's deprecated. I could not figure out a work around as I managed with the target thing. If you know of one to put in the CSS that'd be awesome. That is one of the only things keeping me from doing all my sites in XHTML Strict. I think one of my thoughts at the time was for accessibilites too, (thinking that using an image as a link being not the best way to go or illegal, I don't rememeber). I know now, though (or think I do) that it's allowable as long as title and alt are done right. I did not understand what you mean by putting the icons in a UL. Wouldn't that put them in a vertical format? I use UL extensively of the Contacts page of the site itself.

As Neczy just replied, you can remove borders from those images by setting their CSS properties. Remember, CSS replaces those presentational attributes. If you put them in an unordered list, use that inheritance so that you can have borders around other images on the page (but not those). Also, by default list items have a vertical display functionality, but you can tame your lists (http://www.alistapart.com/articles/taminglists/) and make them make them display horizontally (http://www.alistapart.com/articles/practicalcss/) if you want.


Originally posted by &gb;
5) Agreed about the text. No questions there. It's really tough for me and I'll have to think that over some. You see, the thing is is I personally find large body text ugly and I wanted to make the site pretty. I messed with that for quite sometime figuring out what to do. I did bounce it off my wife and she was absolutely thrilled. Her eyesight is really bad (she married me uh huh) but she said it (Large Text Option) was perfect for her. Now I'm really torn. Would a 1pt increase be enough? Or maybe a contrast change in lieu of an increase? I will work with those interferring background images such as designed accesiblity.

I do not recommend the point (pt) unit for any kind of sizes. You're better off with using pixels (px) or default font-size units (em's or ex's).

Originally posted by &gb;
6) Access keys. I did it that way on purpose. Here was my thinking. Please me if it's wrong as I would love to omit that: I figured that if someone has only keyboard access, they wouldn't be able to mouseover the links to gather the titletext accesskey info. I thought it kind of defeated the purpose. In my mind it was a way to cheat the requirement and I didn't want to cheat it. However, perhaps to a text brower, this is not so. Is my logic sound or am I missing something here? Would a person with only keyboard access only be able to see the accesskey info without hovering over the links with the mouse? To the best of my knowledge tabbing to a link doesn't give the visitor that info. (I tested everything pretty good and you do not need a mouse at all to navigate anything on my site. That was my goal for W3CAI AAA.)

You ought to provide a sitemap which describes the accesskeys; if there is no access to the mouse, links can be navigated through the page with TABINDEX (or in the case of text-only browsers, such as Lynx, the Z or X keys to jump to the "next" or "previous" link on the page). I haven't heard complaints about it and the omission is likely to please more people.

Originally posted by &gb;
7) I didn't want to use any JavaScript actually. I did make a top bookmark, but I could not get it to return to top fully. I tried 18 million ways and just couldn't do it so I ended up using JS+00 for the TOP link. The bookmark I knew of no other way (I'm a n00b ;)). If possible, can you give me more information about your suggestion or give me a link perhaps to somehting which explains it in more detail. I'm all for it, I just want to do it right. Ctrl+D is a good idea, that would only mark the page they are on though, right? I have my bookmark setup so they bookmark the domain only, whereever they are on the site. I did it this way so they are not bookmarking a page I may very well move at some point.

JavaScript isn't evil; I use it all the time. So long as it's practical, has the user in mind (doesn't flash and other effects that could induce problems such as seizures), and other things, JavaScript is perfectly fine. The usability enhancements it can provide are in fact invaluable. (I have written many an article at www.webreference.com about different techniques that you can use to enhance usability; the feedback has been wonderful.) In this case, our JavaScript is perfectly useful because it is practical and we are keeping the user in mind (for convenience although we are still in a way advertising). ;) What you want to do is something like the following for your bookmark link.


<script type="text/javascript"><!--
if(navigator.appName.indexOf("Explorer")!=-1){
document.write('<a href="javascript:addbookmark()" accesskey="f" title="Bookmark this site! Accesskey - f.">Bookmark this site</a>');
} else if(navigator.appName.indexOf("Mozilla")!=-1){
document.write('Bookmark this site! (Ctrl+D)');
} else {
document.write("Don't forget to bookmark us!");
}
//--></script>
<noscript>Please don't forget to bookmark this site!</noscript>

[Green-Beast]

Thank you so much again, Jona.

I see exactly what you're saying about the image alt tags. That's a great idea as it would look better in a text-only render as it would refer to the H1 default... don't even have to make a style. Great advice. Thanks.

I actaually did have a person with accessiblity's issues check my site out and they loved it. I did study W3C's AI AAA info extensively as this is what Bobby's supposedly goes by. I was very careful with all the User Checks under all three priorities. I also tried to be as honest with myself as possible (even though it was a pain at times). So, I think I actauly did comply with all requirements, mechanically-checked and user-checked (though I could have gone about things differently making life a bit easier, i.e., the accesskeys method). I'll check the other forum and see if anyone can pick something out.

Regarding images, do check out my style sheet. You then note that the vast majority of the images I used are indeed div backgrounds and not sourced images. Inspired by Zen Garden.

Cool about the <br /> tags. I feel better. I could have used <p> in some of those places but I didn't. I did use a &nbsp; or two to tweak stuff. David Shea used them at Zen Garden (admittedly and apologetically) so I went for it. Next time I'll do better.

Thanks for the UL info. I have some reading to do. Good info though.

Didn't know about the pt vs. px thing. Never read anything on it in any of the CSS sites I used to learn from. Mind telling why? Is pt less reliable that px et. al.? I'm really curious.

Regarding Javascript. Don't get me wrong... not evil. I love JS a lot and totally see its benefits, but I got the distinct impression from WC3 AI that is was frowned upon so I tried to stick with straight markup. It seem as if they are most pleased when you output a white page with black Arial text, lol. If you want to see a site I did with EXTENSIVE JS check out http://gbhxonline.com which uses about 60% script and 40% html, lol, it's almost insane. And it's actually quite interoperable albeit smallish in size (for 640x480 -- I hate to make people side scroll) and not very accessible. I thank you for that script though. It will be used. I try to write scripts which work on anything, don't rely on browser-sniffing, and are as short and simple as possible. I've written some goodies too.

If you want, check out this page's CSS instead of the Green Beast site. The reason is this is my second CSS and I think it's 1000x better than that which I wrote for GB.com. Here's the url http://ckprinting.gbhxonline.com

Thanks again. This has been extremely helpful.

If anyone else wants to add their crits let 'em rip. I want to hear 'em all.

[Jona]

A lot of reading is a good thing; the more you read, the more you learn, and the more experience you gain by learning from others' mistakes or experience. You might consider not using accesskeys at all (http://mezzoblue.com/archives/2005/01/04/im_still_off/), even if it means you fail to meet AAA standards according to the technical specifications.

The W3C has a DOM specification (http://www.w3.org/DOM) which JavaScript should abide by; if they have a specification, why would they frown upon its use? The only thing frowned upon here is the misuse of JavaScript. Responsible scripting is fairly uncommon, but on a rise with the increased awareness of web standards, thankfully. So long as the JavaScript is extraneous and the page works without it, the page is perfectly fine.

[Green-Beast]

Good way of putting it. Responsible scripting. I'd ask you to not only have look at my GBHXonline site, but to peep the script as well, but I don't think it's possible (not 100% sure) as I linked all of my script instead of putting it in the head. There would have been way too much. The script pages are a tad lengthy. That was a really FUN site to make as every page has different page-bottom elements and I got to do some almost purely creative stuff (top nav and footer should be very intuative and consistent). The idea was to showcase various things that could be done as we want to give potential clients some ideas. That site was a ton of work. If you dig you will discover a lot. A ticket support system, a phpBB board, two forms, and more. The board is a fairly unique design modding heavily one of Mike Lothar's skins, Ad Infinitum, and stuffing the thing in a popup, plus making all of the icons. The board alone took the better part of a day. it's all tables and they all needed to be changed. And all for a support forum we hope nobody needs :)

Reading. Yep. Good stuff. (And thanks for those link as well.) I've read more of the W3C site than I care to admit, and the numerous inline links all opening in the same window is actually annoying. They should do better. I'm also an avid W3 Schools fan. That was my only php info source. I learnd that pretty well in a day, enough to get started. I've used it on two sites now. Very handy for updates. The last site, C&K Printing, I made it so they can update the site with plain text. It's not CMS, but it its larva. And another has been WDG. I've also read why Tables are Stupid... a few times. All good stuff. Couldn't do it without it. Forums like these, if they're active and mature, are great resources as well, but a lot of info is subjective so it's akin to watching TV. You have to be selective about what you buy into.

As far as AAA sites, not unless I have to or feel it's important for a particular project. It's nice to know how so if it is requested I can say yes, can do! GB.com was/is experimental. (The site content actually tells the story pretty well of how it came to be.) It's to be a showcase (and I'll add more alternaive styles for visitors at some point I think, besides Gangsta and Original). Plus I wanted to see if I could pull it off and give it a little class at the same time. I think I did, except the index which we all agree needs work (not sure if I got crits about the site proper, either style).

I did use some of what I knew on the C&K Printing site. As a decorative element I put a editor's paragraph mark and then defined it, same thing for the XHTML acronym in the footer links. (That site uses extensive background images as well, including the animation.)

Thanks man. This is all very helpful.