Can PSD to HTML Quality Be Measured?

For each criteria on our list, we will set a maximum amount of obtainable points. The maximum amount of points represents the criteria weight and is based on:

• How important the criteria is for the project’s success (Very important – 3 points, Important – 2 points, Less important – 1 point)
• How difficult is it to fulfill (Challenging – 3 points, Intermediate – 2 points, Easy – 1 point)
• How problematic is it for your projects (Problematic – 3 points, Partially problematic – 2 points, Not problematic – 1 point)

Maximum points represents the criteria weight

For example, it’s very important for any PSD to HTML project that the pages work without JavaScript errors (3 points). On the other hand, it’s easy to fulfill (1 point) and let’s assume it’s not problematic for your projects in general (1 point). In that case, a developer can get a maximum 5 points for meeting this criteria.

If JavaScript errors are found during QA, the developer gets less points: eg. 3 points, depending on the amount of errors.

The maximum points we use at XHTMLized for the each criteria are listed below:

1. Are all required pages / states developed? – 5 points
2. Are all requirements met? – 7 points
3. Do pages work without JavaScript errors? – 5 points
4. Is reasonable pixel precision achieved? – 8 points
5. Do pages display and work correctly in supported browsers? – 9 points
6. Are all pages valid? – 5 points
7. Are the correct tags being used? – 6 points
8. Are the pages using microformats where appropriate? – 4 points
9. Do pages follow agreed HTML coding standards? – 4 points
10. Do pages follow agreed CSS coding standards? – 4 points
11. Do pages follow agreed JavaScript coding standards? – 4 points
12. Are stylesheets merged? – 3 points
13. Are image files sufficiently compressed? – 3 points
14. Are CSS sprites being used for images? – 4 points
15. Is usage of excessively specific CSS selectors and improper use of !important rule avoided? – 4 points
16. Can page content be understood and easily be navigated with images turned off? – 5 points
17. Do pages degrade gracefully with JavaScript turned off? – 4 points
18. Are correct ALT attributes for images provided? – 4 points
19. Is the proper heading structure in place? – 3 points
20. Are labels associated with FORM elements? – 3 points

Then the QA Score, in percentages, is counted as Acquired points / Total Max points * 100.

In our case, the total maximum points a developer can get is 94. If developer gets 89 points, their score will be 95% (89 / 94 * 100).

If some of the criteria is not applicable, eg. there is no use for microformats on the site, the points for those criteria are subtracted from the Total Max Points, and the score is counted only from that amount of total points a developer can actually get.

The above system can be adapted for various needs, and a user friendly tool can be built for Quality Controllers to rate each criteria. Another advantage is that by changing the criteria weight, you can put more focus on the problematic areas in your development cycle.

Series Table of Contents:

1. Code Quality Assurance Checklist: 8/20 Rule
2. Can PSD to HTML quality be measured?
3. How to hire a great front-end developer