Judging the technical quality of a site

When you look at a website to determine its quality on the code level, you need a different set of metrics than you did some years ago. This article is my attempt at specifying what metrics I use. Have a look at them, do they match yours?

First I look at the validation. Does the front page validate? Do all sub pages of the site validate? If they don’t, what kind of errors are there? While validation isn’t the most important metric, it’s a very quick way to get a feeling of if the coder is “web standards aware” or not. I use the Firefox validation plugin that checks all the pages I visit and puts a little green check in the statusbar if the current page validates. For doing sitewide validation I use htmlhelp’s validation spider and let it loose on the site (check “Validate entire site”). Validation is slowly catching on as a standard tool in the webdev toolbox. Someone who is not using the validator probably doesn’t know much about web standards.

While on the subject of validation: don’t forget validating the CSS. There’s a lot of basic errors that the validator finds that only leads to errors in some browsers. The W3C CSS validator might help you fix some of those right away. Before you complain: the CSS validator has a few issues. If you use line-height, you need pass it a decimal number; 1 becomes 1.0, 0 becomes 0.0. Secondly, if you use CSS 2.1 or CSS 3 properties you need to inform the validator you do. Add the URL parameter “profile” with the value set to “css21” or “css3”, and revalidate. CSS errors and whether or not the style sheet is well organized clearly propagates what CSS level the developer is on.

Next I look at the doctype. That single line of information at the first line of the HTML that defines what language the coder is using. Use of Strict or Transitional is what matters most. Most pages that validate as transitional can with very small changes be upgraded to strict. And why not? Strict signals that an effort has been made to ensure that the document separates structure from design. If you know how, there’s no reason not to. At this stage I also check that the doctype is properly set, there’s an IE bug that makes IE render things badly (quirks mode) if the doctype isn’t the first element of the page. Incorrect use of doctype is also a common way to recognize a beginner.

Sites that pass the above code tests get another batch of checks. Is the code semantic? (ie. does the HTML describe the content?) I look at elements, classes, and ids in use. Do they describe the content they contain? Bad sites use class names tied to design. Mediocre sites use general names like “wrapper” or “column2”. Great sites use “copyright”, “invitation”, and “footnote”. Many CMS:es generate design-oriented classes and ids, and only a few reach mediocre. This is one way to see that a site was robot-made.

Another code issue is the content over HTML quotient. For just a few lines of content you shouldn’t have to need huge amounts of HTML. You shouldn’t need 10 divisions just for one header. A high content over HTML quotient signals that the developer knows what he’s doing. An “overmarked” site means that the developer is on the right track but suddenly forgot that content is more important than the code behind it.

One last angle is the accessibility one. How will a screen reader read this site? Is all the content of the site available as readable text? Does the site require javascript when it isn’t needed? A good place to see if someone knows about accessibility (on the web) or not is checking the forms. Fieldsets, legends, and labels: they all tell their story about the developer and his knowledge about accessibility.

A quality site ranks high in all of the above.

20 responses to “Judging the technical quality of a site

  1. 1. Try to navigate the site with keyboard. I normally do this anyway.

    2. Disable images. Still accessible?

    3. Disable CSS. Still accessible?

    4. Disable JS. Still accessible?

    5. Have a glance at the markup to see if there is correct use of semantic markup.

  2. I view source of every new site I visit and, on occaision, I’ll revisit the source code of established sites. It’s only on established sites that I perform The Stenström Qualitative Test. :-)

    I add “written content” and “scripts used” measurements as well.

  3. I also view source on most new sites I encounter – especially sites advocating some sort of “best practices”…

    … and the code of this site is littered with practices contradicting what is described in the article.

    IMHO setting a good example by actually practicing what is preached is one of the most important issues for any standards / best practices advocate sites out there.

    I mean – If us standardistas don’t bother making our own site living up to the standards and practices we preach – why should anyone bother to listen to what we are saying anyway?

  4. is this something that you try to follow by yourself when hacing up the html/css? :)

  5. @zcorpan: Good additions! #5 is in my list too :) Is your list the only thing you check or a compliment to my points?

    @Sean Fraser: Heh, nice name :) Could you describe your two tests a bit more?

    @jarvklo: Could you expand on what problems this site has? I know the markup and CSS is much better than most sites out there but you seem to not agree. I’d love to hear some constructive criticism on this. You can find my e-mail on the contact page…

  6. Emil – For what it’s worth I think your markup is just fine – I simply meant that you seeemingly contradict what you’re saying in this article and tha that might not be a good thing…

    You advocate semantic coding, yet this site is built using code like

    <div class=”h1″><a href=”http://friendlybit.com/”><span>Friendly Bit</span></a></div>

    … which isnt’t very rich in semantics for a site header.

    Your CSS doesn’t currently validate… yet you make a point twice that validation is important.

    You advocate that only “mediocre sites” use classnames like “wrapper” – yet your site uses no less than three wrappers named wrapper1, wrapper2 and wrapper3… and I fail to see how the code of this site could be considered mediocre.

    My point is – still – to point out that the impression that comes across since the guidelines you advocate in the article (seemingly) are not important enough for you to make your own site live up to your own standards might be contradicting what you’re trying to accomplish with the article in the first place… ;)

  7. … oh and by the way, your comment editing mechanism seems to be broken ;)

  8. First of all I view text for using quotation marks and dashes: laquo and raquo instead of “” and mdash instead of – is a good signal.

  9. @Jarvklo: ok, that puts it in another light. The markup for my header is using .h1 because <h1> is used for the article title. I couldn’t repeat the header but I certainly should use another class name. This page didn’t validate becuase you didn’t close your blockquote :)

    The CSS only validates if you add profile=css21 to the url. It’s a part of the clearfix method of clearing floats. That’s very different from saying that the site doesn’t validate. It does.

    About my wrappers. Each and every element on the page is needed, ther’s little gradients, tricks to make faux columns work, source ordering, and so on. So belive me when I say that every wrapper is needed. About the naming: since they are needed to do design things, they have no semantic value, and no semantic value means there is not good way to name them. Currently I belive the current compromise is what works best.

    So, from my own point of view I do follow the highly set standards I advocate.

    The comment function is not broken, it’s just my caching mechanism that does not update the page until after one hour. Or do you mean some other error? Please be specific.

    (Btw, your feed is not validating either ;)

  10. @Denny: Why is that important? From what I know about those they are language specific, and rather annoying to write without the correct keyboard (I use a swedish one). What is the proper one to use for english?

  11. 2Emil Stenström: yes, you are right, they are language specific and these » and « are for russian language (that is why my English is so bad). I think, we should use a double prime ” for computer languages or as an inch symbol, but not for text. It is so important, because it’s syntax/spelling right.

    I prefer web sites without grammar mistakes (In my opinion they are trustworthy) like books (most of them with correct quotes and dashes, especially which were make up without computers).

    Yes, it’s difficult to use special characters, because there are no such symbols on keyboard. So I use mnemonic abbreviations for them mdash; « and » (last pair are for russian texts).

    In English, AFAIK, better to use “ and ” for quotes and — for dashes (dash it is not hyphen or minus!).

    Also about quotes you can read in last ALA article QTAG: http://www.alistapart.com/articles/qtag

  12. (Btw, your feed is not validating either ;)

    Emil – I don’t advocate “best practices” for feeds. I use Feedburner and delegate that to them so I just won’t take you up on that obvious flame-bait ;)

    As for the comment editing mechanism…
    Your site somehow managed to mangle the closing blockquote, and then refused to accept several attempts to rectify the situation. You’ve got my email-address if you’re interested about further details.

  13. @Denny: thanks for the clairification.

    @Jarvklo: Only a comment on the parantesis? If that was a flamebait, yours was too.

    Ok, I will have to look at the comment mechanism, I’m using the wordpress default though…

  14. Sure.

    “Written content” and “Scripts used” – for me – are both subjective and objective. The objective aspects remain within your Technical guidelines; subjective aspects are not technical but affect my perception of the qualitative state of a site.

    Written content.

    Objective example: How do they present apostophes, ampersands, single quotes and double quotes in editorial content. Subjective examples: Does the site have a current copyright date. Are there typographical errors.

    Scripts used.

    Objective example: Dreamweaver-generated scripts. Subjective example: What purpose does the obstrusive display of script behaviors serve, e.g., Web 2.0 Ajax on everything imaginable.

    After applying your guidelines, I – Readily – admit that my site is mediocre but then I doubt it will ever be Semantically correct. I prefer “plynth” over “footer”.

  15. You want XBL2 for the wrapper divs… :-)

    My list is complete. If a site passes my check list then it’s a quality site, regardless of whether it passes validation or not (though it probably does).

  16. Oh, I might have forgotten one point in my list. If the site uses anything that requires plugins (like Flash) then disable plugins and check if the content is still accessible.

  17. Great site, love the design. I don’t bother with accessibility much myself as it’s more of a moral imperative than a commercial one, nice to see I meet most of your other standards though. I’m trying to learn everything regarding CSS and XHTML. I’ve made a page to collect all my gathered knowledge so far. Take a look at the source code if you get time, would appreciate your comments. Absolute beginners might find it useful as it’s kind of a help sheet for a mate too.

  18. Technical quality of the website is only of interest to web developers and less to search engines for purpose of organic rankings.

    Regular website visitors are not interested in this kind of data but with some useful content they can read.

    Technical quality can come into the play when you propose web development services to others. In this case you must have your own website made according to these rules.

  19. I don’t agree. Regular website visitors benefits from good code in that the page works in their browser, no matter what that browser is. If you start making up your own HTML, you will soon realize that browsers parse it differently, which means different visitors get a different experience… not a good thing (mostly).

Comments are closed.