Work with us

Let us know your requirements and we'll get back to you as soon as possible.
Drop files here or click to upload

We care about your privacy and automatically agree to the following NDA. This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Submit

Thank you, !

Thank you very much for submitting your inquiry to Xfive! We'll be in touch with you soon.
Katelyn Gleason
Katelyn Gleason Eligible
Xfive’s team rental model helped me easily acquire a new team member for our project. Marek has been working with us for many months and although he is an external contractor, I feel like he's a part of our family now.
Home Blog Can PSD to HTML Quality Be Measured?

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

About the author

Lubos Kmetko

Lubos Kmetko LinkedIn

Lubos Kmetko started to work for Xfive as a front-end developer in 2006. He currently helps with business operations and writes for the Xfive blog.

More from Lubos
More from Lubos

Would you like to add something?

All fields are required. Your email address will not be published.

Submit

Related blog posts

May 29, 2013 | Lubos Kmetko | QA

Code Quality Assurance Checklist: 8/20 Rule

In PSD to HTML conversion, what defines front-end code as being of top quality? We follow 8/20 Rule here at XHTMLized – 8 areas consisting of 20 criteria the code has to pass in the code quality assurance process. What are those?

Start your project or scale your team