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 Front End development 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 Xfive for the each criteria are listed below:
- Are all required pages / states developed? – 5 points
- Are all requirements met? – 7 points
- Do pages work without JavaScript errors? – 5 points
- Is reasonable pixel precision achieved? – 8 points
- Do pages display and work correctly in supported browsers? – 9 points
- Are all pages valid? – 5 points
- Are the correct tags being used? – 6 points
- Are the pages using microformats where appropriate? – 4 points
- Do pages follow agreed HTML coding standards? – 4 points
- Do pages follow agreed CSS coding standards? – 4 points
- Do pages follow agreed JavaScript coding standards? – 4 points
- Are stylesheets merged? – 3 points
- Are image files sufficiently compressed? – 3 points
- Are CSS sprites being used for images? – 4 points
- Is usage of excessively specific CSS selectors and improper use of !important rule avoided? – 4 points
- Can page content be understood and easily be navigated with images turned off? – 5 points
- Do pages degrade gracefully with JavaScript turned off? – 4 points
- Are correct ALT attributes for images provided? – 4 points
- Is the proper heading structure in place? – 3 points
- 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 Front End 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:
- Code Quality Assurance Checklist: 8/20 Rule
- Can PSD to HTML quality be measured?
- How to hire a great front-end developer
