Can PSD to HTML Quality Be Measured?

In this article, I’ll show you how you can design your own Quality Assurance Scoring System based on the criteria we used in my previous article Code Quality Assurance Checklist: 8/20 Rule.

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

Related posts

We're hiring 👋