From time to time we’re asked to estimate the quality of the coded page. Also when surfing we often check quickly if the page was professionally created. For all this time a number of standard criteria has been formed which we would like to share with you.

Tools

As all this is performed online we usually use Firefox with Web Developer plug-in for an estimation of coding quality.

Criteria in the order of importance

0. The site should work normally.

Certainly it is the major criterion. It is necessary a priori for the coding estimation, what would be the sense to estimate otherwise? The site should be enough compatible in different browsers: IE6-7, FF, Safari, Opera – that is my list.

1. Semantics of a code

We check this in two ways.

  1. Disconnect styles on page Ctrl+Shift+S (Apple+Shift+S for mac) and it is visible at once whether the page remains understandable? Whether the navigation is visible? Headings? Or all is done as text in DIVs …
  2. We look in a code – how many different tags are there and how are they used. Usually it is visible from the first sight if there are only DIVs or many inline tables (both variants are bad).

2. Correct usage of TABLE tag

This criterion is a part of the previous. But considering the prevalence we will mention separately. We press Outline->Outline Tables-> Table Cells and it is visible at once where and what for the tables were used on page.

3. Readability

This criterion is certainly subjective, but nevertheless it is always visible if a person tried to do spaces and comments or when it is done”somehow”… It can be easily seen with View Source. Also it is visible at once in CSS if a person tried to observe some kind of order. We do not mean any concrete names and comments – but something though…

4. Headings structure

It is important for me how the structure of h1-h6 headings is built, conceptually they should observe strict hierarchy (it can be seen in Information-> View Document Outline plug-in). Certainly deviations on live sites are quite real and comprehensible, we understand its difficultly very well. But nevertheless there should be one h1 for all page, further the structure should be falling. (In general there can be can be a few, but they should describe site structure accurately). Certainly, such structure is not set strictly anywhere in standards but personally we consider such hierarchy very correct. It reminds a book table of contents, or theses of a degree work.

5. Accessibility

Alternative text to pictures, semantics, the changeable fonts sizes and how the site looks without pictures (Images-> Replace Images With Alt Attributes) – all this together makes a site accessible to users and searchers.

6. Class names and ID

Incorrectly: left-column-with-grey-border-at-top (it is adhered to display)

Correctly: secondary-content ( it is adhered to the sense of the block)

7. Microformats

This can be called “advanced semantics”. Their presence can be easily defined by Tails plug-in. If there are microformats on a page then their well known green icon will be active in the status bar, like this:

microformats enabled

If there are no microformats:

np microformats

Orange icon of Tails Export plug-in – for export of the information from page into other places.

We would also like to add validity, but it is too complicated for live projects. And due to rarity of this point we usually do not mention it at all. Though before project realization HTML validation in the templates is an obligatory for me.

Conclusion

Approximately this way we usually estimate another’s coding. Depending on time availability we use only the first 2 or the first 4 points.

Leave a Reply