KKFilosof

[boen_robot]

For those of you that don't know me long enough, I'm a last year high-school student (18 years old, 12th grade as by our educational system).My school never really had a site (the external link you'll see is for a sort of "secondary" school to mine) so somewhere at the end of last year, I made a site for them athttp://kkfilosof.hit.bg/However, I'm not a designer, so the site doesn't look very appealing in my personal opinion, so I'd like to read any suggestions you may have about it.As for the code, there are a few things I need to note:1. DTD is not present (though you'll see it commented), because the site is served as XML. IE however doesn't support XHTML, so it downloads the DTD as it would do for any XML document. This however is VERY slow, so I decided to drop it for the sake of performance.2. If you look at the validation link, you'll see the documents are (or at least should be) tentatively valid anyways.3. The warnings about encoding - the server serves files as ANSI, but I have them as UTF-8 for the sake of XML parsing and internationalization. It's a bummer I can't change encodings, I know, but I'm stuck with the host. I've made an odd mix of encoding declarations to ensure it's all OK everywhere.Oh, and for some reason, with JS disabled, Opera gives "XSLT processing failed" error, which is quite odd, considering the fact the JS is CDATA-ed. If anyone happens to know a cure for that, I'd appreciate it.Any non-design suggestions would be great too of course.

[IamTK]

[boen_robot]

Thanks for the comments.

1. The external link. - it's not a site to "another" school. My school is divided in two parts - one for 1st to 4th grade, and one bigger for 5th to 12th grade. The small building had a site and the teachers insisted I put a link to it somewhere. If not on the front page, where would you suggest I put it? Btw, the text above it says "You can find information about the school's small building at *link*".
2. The content on the front page - agree. But what would you suggest I put as content on the front page? There are rarely, if ever, news so that's not an option, and contact information is actually that last page... I just don't see what.
3. For the photo - I have no skills in photoshop whatsoever . I'd have a better chance with just swapping the photo with... say the first one from the "Pictures" (Снимки) page?
4. Styling of links - what styling would you suggest? Blue seems to be the only good contrasting color that's also not as pushing as, say... red for example.
5. Validation - . I uh... placed it there as a sort of "prestige" mark. If there is some more content and/or if I use a small badge instead (to turn the focus more out of there), do you think it would be better?
6. The wall of text - good point. That's the history of the school page. It would be boring with or without images, so right now, it can only get more boring if it had more text . I'll have to see if the school has any historical images I could put.
7. The visited links color - that's just the :visited pseudo class. Nothing out of the ordinary. Are you suggesting I don't use :visited at all? Or just select a third color for the current page? Or both?
8. The wall of images - actually there is a story. It's written on the images. This is the "excellence marks" page. What you see are scanned images of diplomas belonging to our students given for various of reasons. A "name - reason" pair is written as an alt text (maybe I should write it in "title" so it pops up as tooltip everywhere?) and explanation is also readable in the image itself. What sort of "story" would you suggest I add to those?
9. Outline - OK. What color would you suggest?
10. The "out of place" image - Can't agree more with that one. The teachers insisted I put it despite my constant "it doesn't look right" whining. The reason they insisted is that this is a photo of the principal (the woman on the right) with the... I'm not sure who that was honestly. Some sort of politition having influence over the education system (but not THE minister of education, no).
11. The no story of images - here too, there's an alt text. If I put it as a title for Firefox? And I can't really think of longer descriptions of the images (and neither could the teachers really). That last one for example says "salute to the students for the 60 year anniversary of the school". Without knowing the name of that guy, how could I put "by *name*, the minister of *whatever*" or something ever further?
12. The contacts page - is a title really needed? What you see there is pure contact information. Placing "For contacts" (the literal translation of "За контакти") seems a little like an overkill. And for organizing it as a table... looking like a table maybe, but I don't think the semantics of this make sence as a table (or worse yet - multiple tables).

[kgun]

1. What is impressing, is that the site is XML driven. You are definitely ahead of the game. Continue along that path. You are definitely clever enough to get an IT job. The problem is to make your selv available / visable.
2. Regarding accessability. Study this site http://www.rnib.org.uk/xpedio/groups/publi...ternetHome.hcsp
3. Browser problems. Have you downloaded the last versions of the browsers? Regarding Opera, do you know of View + Style + a lot of options. May be you should study XSL(T) in greater detail. That may be the reason you get browser problems. Possible to combine a CSS stylesheet for older browsers with XSLT.

[boen_robot]

1. What is impressing, is that the site is XML driven. You are definitely ahead of the game. Continue along that path. You are definitely clever enough to get an IT job. The problem is to make your selv available / visable.
2. Regarding accessability. Study this site http://www.rnib.org.uk/xpedio/groups/publi...ternetHome.hcsp
3. Browser problems. Have you downloaded the last versions of the browsers? Regarding Opera, do you know of View + Style + a lot of options. May be you should study XSL(T) in greater detail. That may be the reason you get browser problems. Possible to combine a CSS stylesheet for older browsers with XSLT.

Actually I already have an IT job . In my father's computer shop though, so I guess that doesn't count as a career achievement. That job, along with the school is the main reason I haven't made much sites to date - I don't have much time, and when I do, I usually spend it browsing, sleeping or... errr... ok, this is a little embarrassing in this context - playing Guild Wars .I've already read much on accessability and usability too. That's the main reason I used :visited actually. Because as far as I've read, marking visited links benefits usability. The pages should also degrade fine without CSS and/or JavaScript (the opera and JS problem excluded), and if you browse without CSS, there are even "back to top" and "skip navigation" links. I'm of course opened to any particular accessabilty and usability suggestions you might have.Of course I have all latest versions of all browsers. What kind of developer do you take me for ? I even have Safari 3/Windows beta, and have tested the site on it too (though if there was a problem with it, it will be considered low priority as (almost?) no one uses Safari in Bulgaria). I've studied Opera's options, and it's XSLT behaviour for a long time, and that doesn't seem to be the problem actually. If I strip out the JavaScript, the page works fine.The JS I have is actually the print link at the bottom of every page (i.e. "печат"). If the browser has JS on and supports the window.print object, I give them a print link. Otherwise leave the link visible in plain text. Works perfectly for IE and FF, but crashes XSLT in Opera for some reason, despite the fact XSLT processing and JS execution occur at different times (or at least should). A sort of Opera bug I'd like to work around.

[kgun]

Of course I have all latest versions of all browsers. What kind of developer do you take me for ? I even have Safari 3/Windows beta, and have tested the site on it too (though if there was a problem with it, it will be considered low priority as (almost?) no one uses Safari in Bulgaria). I've studied Opera's options, and it's XSLT behaviour for a long time, and that doesn't seem to be the problem actually. If I strip out the JavaScript, the page works fine.

Also screen readers and accessible for mobile devices? What are your requirements for a site using the WAI-AAA banner?

[boen_robot]

Also screen readers and accessible for mobile devices? What are your requirements for a site using the WAI-AAA banner?

Um... only JAWS actually, but for this site, it's not important, as JAWS only reads "IAOIOIAOIIOA" etc. even though it knows (and says out loud) that the content is in Bulgarian. I guess they just don't support Bulgarian natively. If I make a site that has an English version too, I'll take JAWS a little more seriously.Excuse me, my requirements? As you can see by the link, that's W3C's requirements, or should I say "guidelines", not mine. Also, the badge says "Almost WCAG AAA Conformant", as there's just no way I could implement checkpoints like 11.3 or 7.5 for example, without making the size of the site over 10MBs (the total space the host allows) and/or without needing any S3L at work, which again, I don't have available because of the host.

[kgun]

Excuse me, my requirements? As you can see by the link, that's W3C's requirements, or should I say "guidelines", not mine.

May (even if it is October) be. I would be very careful, about using three AAA's. This http://www.equalityhumanrights.com/en/Pages/default.aspx site could IMO use the banner with three A's. It sets a standard that is difficult to beat. Note "Listen" in the upper left corner.I do not like to give ad for my own pages and the moderator are free to delete the following link:http://multifinanceit.com/qualitycontrol/qualitycontrol.htm(Note: Only as a resource collection for you. Not as an axample of an accessible site. It is far from accessible).If that is not enough click "Links" in the upper right corner.To be more precise, you can use page search (CTRL + F) +accesson both pages.

[boen_robot]

May (even if it is October) be. I would be very careful, about using three AAA's. This http://www.equalityhumanrights.com/en/Pages/default.aspx site could IMO use the banner with three A's. It sets a standard that is difficult to beat. Note "Listen" in the upper left corner.I do not like to give ad for my own pages and the moderator are free to delete the following link:http://multifinanceit.com/qualitycontrol/qualitycontrol.htm(Note: Only as a resource collection for you. Not as an axample of an accessible site. It is far from accessible).If that is not enough click "Links" in the upper right corner.To be more precise, you can use page search (CTRL + F) +accesson both pages.

Well, I've verified the site against all checkpoints from WCAG 1.0's tabular summary of checkpoints and I've implemented everything applicable. The site doesn't have that much content, so it's easy with this one. I guess other sites would require much more effort. Guidelines I haven't implemented are non applicable ones and the mentioned 11.3 (Having multiple languages and types - there's only bulgarian and XML/XSLT duo and no options for others; reason not to implement it - not enough control over the hosting environment) and 7.5 (Using markup for redirects - there is one on the home page - either that or whole site had to be HTML/CSS only, or if kept like that the user would see a 404 page).Those two guidelines are the main reason I write "ALMOST" WCAG AAA conformant. Like libxslt's vendor saying "99% conformance on XSLT 1.0" i.e. "I'm doing my best, it's not the full packe yet, but it's sufficient for most scenarios".If you see any other guideline that's not implemented, and yet is applicable (for example, if I had an ASCII art and I forgot to put a "skip it" link), please do point it.

[IamTK]

Thanks for the comments.

1. The external link. - it's not a site to "another" school. My school is divided in two parts - one for 1st to 4th grade, and one bigger for 5th to 12th grade. The small building had a site and the teachers insisted I put a link to it somewhere. If not on the front page, where would you suggest I put it? Btw, the text above it says "You can find information about the school's small building at *link*".
2. The content on the front page - agree. But what would you suggest I put as content on the front page? There are rarely, if ever, news so that's not an option, and contact information is actually that last page... I just don't see what.
3. For the photo - I have no skills in photoshop whatsoever . I'd have a better chance with just swapping the photo with... say the first one from the "Pictures" (Снимки) page?
4. Styling of links - what styling would you suggest? Blue seems to be the only good contrasting color that's also not as pushing as, say... red for example.
5. Validation - . I uh... placed it there as a sort of "prestige" mark. If there is some more content and/or if I use a small badge instead (to turn the focus more out of there), do you think it would be better?
6. The wall of text - good point. That's the history of the school page. It would be boring with or without images, so right now, it can only get more boring if it had more text . I'll have to see if the school has any historical images I could put.
7. The visited links color - that's just the :visited pseudo class. Nothing out of the ordinary. Are you suggesting I don't use :visited at all? Or just select a third color for the current page? Or both?
8. The wall of images - actually there is a story. It's written on the images. This is the "excellence marks" page. What you see are scanned images of diplomas belonging to our students given for various of reasons. A "name - reason" pair is written as an alt text (maybe I should write it in "title" so it pops up as tooltip everywhere?) and explanation is also readable in the image itself. What sort of "story" would you suggest I add to those?
9. Outline - OK. What color would you suggest?
10. The "out of place" image - Can't agree more with that one. The teachers insisted I put it despite my constant "it doesn't look right" whining. The reason they insisted is that this is a photo of the principal (the woman on the right) with the... I'm not sure who that was honestly. Some sort of politition having influence over the education system (but not THE minister of education, no).
11. The no story of images - here too, there's an alt text. If I put it as a title for Firefox? And I can't really think of longer descriptions of the images (and neither could the teachers really). That last one for example says "salute to the students for the 60 year anniversary of the school". Without knowing the name of that guy, how could I put "by *name*, the minister of *whatever*" or something ever further?
12. The contacts page - is a title really needed? What you see there is pure contact information. Placing "For contacts" (the literal translation of "За контакти") seems a little like an overkill. And for organizing it as a table... looking like a table maybe, but I don't think the semantics of this make sence as a table (or worse yet - multiple tables).

I am currently busy right now, so i'll update this post with image explanations in the future. For now, i'll write it out.1. Try to talk about your school in your school website, and put that link in another part, for example, create an image and make that image the link and put that image under your nav bar with proper alignment of course.2. Be creative with content on your home page. Have school events, find school news. If there are no journalists, YOU will be the journalist. I was the webmaster/administrator of my high school website, and my team have to be journalists almost every day. To give you an example you can go check out my school site at irvinehigh.org. This is not an advertisement. I would not advertise that school if my life depended on it.3. You don't need photoshop skill. Just go to paint and choose selector tool and select the entire bottom part and press delete. By the way, the picture is aligned in a boring place. It's too typical, maybe move it to the right a little bit, or be stylistic, erase half the picture and expand it over the top part of the body. *I'll have a pic of waht I mean in my update*4. As for link color you dont necessarily need a whole new color. Maybe black but bolded with underlining on mouse over. Or a dark gray, extremely dark green. Just try out different colors and you'll find your color. Maybe even some form of yellow or orange.5. Use a smaller image and move it to the right side beside your words on the bottom. So it doesn't waste the right side. *I'll pic here too*6. Yes put some MEANINGFUL pictures.7. The purpose of the visited class is to avoid errors or the purple text after link is clicked. What I mean by that is that it is not meant to actually change the color of the link, it is to make sure the link returns to the original color. So make sure the visited class has the same color as the original link color.8. Oh, I didn't know that. My bad. As you can probably tell, I can't understand the language. That was just my pure design analysis.9. One of the greatest misconceptions is that outlines must be 1px or 2 px wide. I suggest a darker green at 4 px width. Or just black at 4 px.10. One way to fix this is to make every image into thumbnails to have the same size. and use mouseover effect or onclick effect to enlarge it.11. alt text doesn't really show up normally. It looks like a wall of images and normal users will treat it as such. So to prevent it have onmouseover with description.12. Yes, a title is always necessary. It makes sure that the viewer is at the right place. And it's just makes it more organized.

[kgun]

Learn to listen young man

[boen_robot]

1. Try to talk about your school in your school website, and put that link in another part, for example, create an image and make that image the link and put that image under your nav bar with proper alignment of course.2. Be creative with content on your home page. Have school events, find school news. If there are no journalists, YOU will be the journalist. I was the webmaster/administrator of my high school website, and my team have to be journalists almost every day. To give you an example you can go check out my school site at irvinehigh.org. This is not an advertisement. I would not advertise that school if my life depended on it.3. You don't need photoshop skill. Just go to paint and choose selector tool and select the entire bottom part and press delete. By the way, the picture is aligned in a boring place. It's too typical, maybe move it to the right a little bit, or be stylistic, erase half the picture and expand it over the top part of the body. *I'll have a pic of waht I mean in my update*4. As for link color you dont necessarily need a whole new color. Maybe black but bolded with underlining on mouse over. Or a dark gray, extremely dark green. Just try out different colors and you'll find your color. Maybe even some form of yellow or orange.5. Use a smaller image and move it to the right side beside your words on the bottom. So it doesn't waste the right side. *I'll pic here too*6. Yes put some MEANINGFUL pictures.7. The purpose of the visited class is to avoid errors or the purple text after link is clicked. What I mean by that is that it is not meant to actually change the color of the link, it is to make sure the link returns to the original color. So make sure the visited class has the same color as the original link color.8. Oh, I didn't know that. My bad. As you can probably tell, I can't understand the language. That was just my pure design analysis.9. One of the greatest misconceptions is that outlines must be 1px or 2 px wide. I suggest a darker green at 4 px width. Or just black at 4 px.10. One way to fix this is to make every image into thumbnails to have the same size. and use mouseover effect or onclick effect to enlarge it.11. alt text doesn't really show up normally. It looks like a wall of images and normal users will treat it as such. So to prevent it have onmouseover with description.12. Yes, a title is always necessary. It makes sure that the viewer is at the right place. And it's just makes it more organized.

1. What to use for the image? We don't have a logo or anything and neither has the small building. A text link is what should remain unless we could think up something. Moving it is not a problem, as long as it exists at any one point in the site.2. I'm not a good journalist and I'm last year, so even if I was, creating a news still wouldn't be a good idea as it would die pretty soon. We do have a school newspaper though (but no one really reads it), so I guess I could instruct them to fill up an RSS feed or something (and translating the feed to XHTML would be a breeze + users will have an RSS feed).3. Just to delete the date and time? I don't think it's worth it. I mean, that is a big loss of the picture. It will take focus on. Swapping the images, or choosing another one (those images were chosen from a set of around 33 similar pictures!) would be a better option.4. I've kept the blue as I really can't think of a better color, but with no text decoration unless on :hover. :visited links are very dark green.5. I understand your point even without an image. I'll be working on it.6. Of course. That was my point too .7. Huh? No it's not. If I don't use :visited at all (but just use "a" as a selector, rather then "a:link"), the effect is exactly the one you describe. I've made the :visited color a darker orange (closer to the one on non-visited links) and added a color for the current page (yellow, though I'm not sure if that's a good choise). Try it like that and tell me what you think.*9. I've made it 2px wide with dark green and yellow if visited. I'd stay away from 4px as not everyone has that high resolutions. I mean, one image is nothing, but multiplied by everything, it can get bulky.10. I see the idea, but expanding the thumbnail on :hover sounds like a lot of complication... I'll see what I can do.11. I've now added a title attribute that appears with the same contents as the alt attribute.12. OK. Fine. I've added "For contacts" at the page. But if I'm going to be adding headers to "Снимки" and "Грамоти и дипломи", I'd also need a leading sentence (a sort of "bla bla" text if you will)... what would you suggest (in English of course)? I can only think of stuff that sounds as silly as "Below you can see excellence marks or various of our students, given for various reasons. We are proud to have all of our students at our school", but that sounds like rubbish.@kgun be more specific, will you? Look at IamTK for example .*both IE and Firefox seems to have some caching issues with this one. I don't know why. That being said, I was only able to see the current page feature in IE one, and I wasn't able to see the new :visited color in FF. It was a CSS problem. The LVHA(:link, :visited, :hover, :active) rule to be more precise. It seems if you use a class on a link, it must occur after the LVHA declarations. Interesting.

[kgun]

@kgun be more specific, will you? Look at IamTK for example .

Do I need to be more specific about accessibility. I have given you an example of a site that sets a standard. You start defending your own bad ideas on accessibility instead of listening IMHO. In addition I have given you a large collection of resources related to accessibility. As I told you the most impressing thing is, IMO, that the site is XML driven. I have no time to argue any more and comment on other parts. Other members have done that.Personally I would not include the AAA banner on the site. You are of course free to interpret the recommendations in your own way. Period.

[Synook]

Uh... I tried to access the site in Opera but instead of the navigation control I got a strange message

Съжеляваме, но браузърът ви не може да покаже менюто. Опитайте с Internet Explorer 6+ или Firefox 2+. Можете и да опитате нашата

Umm... does that mean I can't use it in Opera?

[boen_robot]

Do I need to be more specific about accessibility.

When we're talking about a specific site, the author of which asks what is not accessible - yes. You should be more specific about accessibility. You should point out exactly what is not accessible and in what fashion (semantics, screen readers, browser compatibility, etc.), so that it could be fixed. You may also give a reference to the violated guideline or a test case showing the problem with sites using a similar wrong appoach.

I have given you an example of a site that sets a standard. You start defending your own bad ideas on accessibility instead of listening IMHO.

I couldn't possibly start competing with the site you've set as a standard I should follow. Not only I would never pay for this voice servive (as they don't even understand Bulgarian it seems), but as said already, I don't have enough access to the server to ensure some of the more sophisticated stuff that site has provided. Thanks for the example anyway.I have listened (i.e. read) a lot on accessibility already. If I have assumed something in a wrong way, please tell me what that thing is so that I don't repeat the same mistake again. This is what I mean with you being more specific - tell me what is wrong, not that something may be wrong.

In addition I have given you a large collection of resources related to accessibility.

Which I don't really need, since I've already read a lot, but thanks anyway.

As I told you the most impressing thing is, IMO, that the site is XML driven. I have no time to argue any more and comment on other parts. Other members have done that.

Thanks for that, and I'm not arguing. I'm asking you for details, as I'm interested in YOUR feedback i.e. I don't want the big picture, as I've explored it a long time ago. I now want to see how this site doesn't fit in it.

Personally I would not include the AAA banner on the site. You are of course free to interpret the recommendations in your own way. Period.

Point taken. If you point me to a good accessibility issue I couldn't possibly fix (excluding the mentioned two WCAG guidelines, and the voice service, since it's payed), I'll lower the banner to double A.

Uh... I tried to access the site in Opera but instead of the navigation control I got a strange messageUmm... does that mean I can't use it in Opera?

I'm afraid so. I had to, sorry. Opera doesn't support the document() function, with which I fetch the _NAVIGATION.xml document, containing the links on the navigation (and a link to which there is below the message). The only way I could have done it without document() would have been to embed the navigation in the XSLT file. I didn't wanted to do that for two reasons:1. To have a site map, as per WCAG accessibility guidelines.2. The real reason which sealed the deal is that I'm last year in this school. Once I'm done, someone else will have to maintain this site. The chances of that someone be XML and XSLT knowledgeable are next to none. So, instead of forcing them to edit the XSLT whenever there's a new menu item, they'd edit the _NAVIGATION.xml file, the syntax of which is exactly XHTML, for which there are much higher chances they will be knowledgeable at.BTW, the message says "We're sorry, but your browser can't show the menu. Try with Internet Explorer 6+ or Firefox 2+. You can also try our" and the link below says "Site Map".