Hello guys, I'd like to set up a list of web dev quality standards, but something different from the W3C, something closer to the real world. Over the years I've tried to follow accessibility guidelines, and I found that in the end, I've lost many cool features that don't mean "evil development" necessarily. For instance Flash used properly can be a good thing. Same for Ajax, for embedded videos, etc... My idea is having grades from 1 to 5 stars to qualify web sites, 5 being a very good site. The criteria are general-purpose to rate the quality. I'd like to know what you think about the idea I have set up a quick draft, and if you're interested, we could revamp this paper: http://guidelines.dreamhosters.com Thanks in advance for your ideas and suggestions!
Sorry, i dont know if i understood you well, are you trying to create an web-application for site design rating?
yes, what exactly do you plan to do? create a application? it may be hard to do so. are you intending something like http://builtwith.com/ ?
I think calande is going to make a site like, and correct me if I'm wrong, CSSmania but instead of just voting on the sites in the gallery/ directory/ collection based on appearance or popularity, they would be voted on based upon what level of standards they meet. If my interpretation is correct, I think that is a wonderful idea. I wish you luck
Well, let me review your list: Ok, first off if it's nothing special, it shouldn't even GET a star... reminds me of Carlos' Dee Dee Dee song I'm no good at sports so we give them all trophies Pixelized Photos? Do you mean dithering? If the dithering is barely noticable (or not at all) I'd not hold it against the site if it's the difference between a 35k .jpg or a 3k .png. Click here link is sometimes more appropriate if the visual cues do not make it obvious where to click to find the item. Assume grandma is a dodo - If the click here is used though, it SHOULD be inlined as the title or content as appropriate - just having the click here should not count against it... having it without the semantic link should. No need to click flash - I consider relying on flash content that just starts playing to be a major failing in a web design and a waste of bandwidth. NO flash banners and no flash menus would make a page rank higher IMHO, reserving flash for things like videos or games - in which case clicking on them is more than appropriate. Contact info - with e-mail spam being a major problem listing the e-mail address is a bit #DDD - this is why online contact forms work better. I'd give more points for a properly written support ticket type system. Just using a style sheet is no big deal and no reason to rank a page better - using a stylesheet to completely separate presentation from content on the other hand... Primary colors - And just what is wrong with primary colors? ANY color can be appropriate to a site if used PROPERLY. Fonts larger or equal to 11px - I'd up that to 12px minimum, and rank even higher if 14px or larger if px, 12px rendering if %/em or pt. Popup windows - I'd rank a page higher if it LACKED popup windows unless they were part of the ui - in which case they would make more sense to open where the user clicked not halfway across the screen... and yes, I'm even including shit like lightbox in that. (I really do HATE lightbox) Links opening in new window - IMHO that should NEVER happen, I dont' care WHERE the link leads. Overriding the default behavior of a link is bad policy and came out of abuse of a property only ever meant for use on frames. If I want it in a new window or tab, I will CHOOSE to open it in a new window or tab. People who use target="_blank" or WORSE hack a .js solution because target won't validate in strict need to be taken round back of the woodshed with a 30-06. Standard Compliant code - to me that means validation - and that should be a minimum requirement to even GET a star excepting the handful of things that just don't validate (like some of the better flash embeds). Tableless layout - frankly search engines don't give a **** if you use a table or not, the technique of using it for columns works cross browser BETTER than most of your non-table layouts and quite often in less code. 99.99% of the BULLSHIT the anti-table mafioso's spout about tables is exactly that - bullshit. Don't throw out a tool that in a number of circumstances can do things (like verticle positioning)... and don't give me that non-semantic malarkey about it not being 'tabular data' Dictionary.com unabridged: 9. an arrangement of words, numbers, or signs, or combinations of them, as in parallel columns, to exhibit a set of facts or relations in a definite, compact, and comprehensive form; a synopsis or scheme. American Heritage Dictionary 11. An orderly arrangement of data, especially one in which the data are arranged in columns and rows in an essentially rectangular form. Is it data? Yes. Is it in columns? Yes. SOUNDS like a table to me. I love it when I see overblown crap CSS in multi-nested DIV's four or five deep with CSS hacks coming out the ass resulting in four or five times the code a table would be. YES, sometimes a DIV is smaller and faster - but in some cases a table is faster and smaller. The only time tables become a problem is the same time when DIV's or SPAN's become a problem - when people start nesting them for no reason other than to tack on another class or border that could just be applied to the content that's being wrapped in the first place. The people that wrote shit nested tables that get converted by the anti-table whackjobs just end up writing bloated crap nested DIV's. It's another tool in the toolbox - as are DIV based layouts. Throwing out either one is just stupid, especially when the arguements against hold water about as well as a steel sieve. /* RANT OFF */ - sorry, this one is a pet peeve. With and without www - with search engines treating each as separate pages, that's not always desirable. Correct Image formats - the 'correct' image format cannot be broken down so simply. The 'correct' format is whatever gives you the smallest file size with minimum or no degredation and without 'color matching' problems when trying to line up with IE's gamma correcting of .png and .jpg Fonts used - I've never understood this thing about 'too many fonts'... Different sections should be differently styled, so that could easily throw you over. Use HTML/XHTML tags properly instead of DIV - You mean semantic markup. Wording there needs help since DIV is a HTML/XHTML tag... and what 'proper' is seems to differ from person to person when you get the whackjobs screaming "never use <I> or <B> anymore" or "Use definition lists for anything that's a set of title and data" (which is funny, you usually hear the SAME whackjobs saying both at once, when semantically they are opposite points of view) UTF-8 - Who cares. English language website if you have to resort to anything that cannot be stated in 7 bit ASCII you are probably ****ing up bigtime. Other languages I can see where it might be useful, but frankly UTF-8 is another of those bullshit ideas that just isn't needed 99% of the time. (but then, I could serve my site as 8859, UTF-8, windows 1252, doesn't matter - WHY? I only use 7 bit ASCII with entities, that's why) Previous versions - eh, that's subject to interpretation. I can't see bothering to test Opera 8.5 anymore, and I've already dropped worrying about FF 1.x... on the other hand I'm still at least testing IE 5.5 and will try to make it work if it's not too much hassle, but their numbers are so low I will settle for 'graceful degredation'. Hiding file extensions - AGAIN, who cares? When did this become the huge big deal? Sounds like something I'd expect out of the Mac world... Because of course as Anna Kournikova proved, hiding the real file extension is such a BRILLIANT idea. **** that shit. I keep seeing people ***ing around with mod_rewrite, .htaccess, etc to try and pull off this rubbish, and it bites them in the ass every time. Active links have no dotted outline - ONLY if you include a visual cue for the active state, and you CANNOT turn that off in some browsers (IE much?). I'd prefer to have it there since most web designers are too lazy to properly trap anything but :hover, or worse trap :active the same as :visited (which is a total #DDD) Meta - again, who cares? Search engines pretty much ignore that these days, nothing really seems to use it apart from some goofy local crapplets - it's a waste of bandwidth, nothing more unless you are using it for in-house tracking of maintainers and so forth (in which case that's when you should be resorting to a CVS system and separate maintainers list) or specifically trapping it for some form of script manipulation. (in which case just move it into the .js as variables) Meaningful Meta - see above. Meaningful title - Needs to be defined. An overly verbose title that's longer than any display could show is just wasteful. Site Title (preferably two words or less) followed by subpage title (again, two words or less) would be my 'ideal'. Mirror the breadcrumbs as it were. Favicon - DAMNED STRAIGHT. But then, I'm an Opera user where we can drag and drop favicons to turn them into quick launch type buttons. Preload images - Preload? No. Image recombination and reduction in total image files used, yes. Preload is just bloated code with bloated images. (see DW's mm_preload javascript bull - it was a bad idea in 1997 - today it's just #DDD) Custom 404 - yeah, I can see that. Does give the professional touch but a lot of hosts don't let you do that... I can't see holding that against a site per say unless it 404's a lot from dead links - in which case it shouldn't be in the 5 star range in the first place. CSS image concatenation - and you needed to list preload why? At least, that's how I see it - YMMV.
Wow, lots of feedback, thanks I like this list of criteria: http://accessites.org/site/criteria/ I didn't mean dithering, although this is a good idea too. I think Flash is great for games, screencasts with sound, and video so we shouldn't ban it. I meant that some people don't activate the Flash animations and you have to click twice (1 to activate the animation, 2 to actually click the function). The e-mail address can be hidden or a contact form will do too. If you don't use a style sheet, it means you use the old HTML tags (<font face color>...). Ok, I've removed primary colors. Yes, of course, popups are part of the UI, pop up ads are a nightmare. Tableless is not about Google, it's about structure and cleaness of code. But I agree, many people bloat the code with many divs and CSS code. www: a search engine understands both but will parse only one for its index. I care about utf-8 because iso-8859-1 doesn't display non-latin characters. For instance you can't display Japanese using iso-8859-1. Hiding file extensions: It looks cleaner. Only the web server needs to know the file extension Meta description is used by Google in search results. Preload images: I dislike hovering my mouse over a menu and having to wait for 2 seconds while the rollover image loads on my 56k dialup connection on the week-end Custom 404: Hosts that don't allow that (ie: HG) should be ashamed What about the spread of criteria ? Do you think it's done properly or do you think the rate should depend on the number of checked criteria, whatever they are?
Whoa there, what was on your mind when you were posting that? Were you really referring to Anna Kournikova or Anne van kesteren? http://annevankesteren.nl/2004/08/re-uri-design
Often you see both mixed - which is why I would call it by the commonly used term 'semantic markup' as well as calling it 'separation of presentation from content'. Which is fine if you are writing a non-english or multilingual website. An english language only website should not be penalized for using something other than UTF-8 since if all you are doing is english, you don't need ANYTHING more than 7 bit ascii. and How short people's memories are. Forgetting annakournikova.jpg.vbs? VB script kiddies making viruses people opened expecting a picture of anna nude and instead getting infected just because M$ programs started hiding the actual file extension? Hiding file extensions is an all around bad idea, and the first thing I turn off in Windows. (along with 'do not show hidden files and folders'). It's been abused by sleazeball script kiddies, and IMHO has no place in modern computing. (but then, I'dd take an axe to that stupid 'file type' column in explorer and replace it with just the actual extension if I could - there's a reason I still use zTree). There's a reason I'm not all that keen on MacOS or *nix where things like applications don't have something in the actual filename to tell you what it is. Which is why image recombination should be used so a single image can be used for both (or even all) states. Menus are a great example since you can do any number of buttons from a single image file using CSS if you know what you are doing... which makes preloads nothing more than bad, buggy bloat. Agreed... but they're out there. Hmm. I'd suggest a hybrid - some criteria aren't deal breakers while others are. I'd separate out some as 'minimum requirements' and others as 'points'.
Which is why every browser on the planet defaults to iso-8859-1 when no character set is declared. There's what's recommended, and then there's what works without the headaches of dicking around with changing your apache or IIS settings, dicking around with a specialized text editor (since most of the good ones only support flat ascii), etc, etc. UTF-8 has it's uses, but frankly for a lot of sites it's just a waste of time and effort.