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.

So how do you know if you wrote (if you are a developer) or received (if you are a client) top quality code? Simply answer Yes to the 20 questions below and you can get an A+ developer rating or hand over the code to your back-end developer with a peace of mind.

Noticed how the questions are formulated so you can answer them Yes / No (Pass / Fail)? This makes evaluation easier.

The criteria is arranged from the most important to the least important. Obviously, forgetting about implementing the drop down on the homepage will create a bigger problem than if the image of that cute cat has the wrong ALT attribute.

Simply answer Yes to the 20 questions below and you can get an A+ rating.

The order also reflects comprehensibility for non-technical clients. The first 4 areas (General, Precision, Browser check, Valid HTML) can be considered as Basic Quality Assurance, which doesn’t require in-depth technical knowledge and most of the non-technical clients are able to check those criteria too when they receive code. The remaining 4 areas make an Advanced Quality Assurance which requires a trained Quality Controller or an experienced developer to be properly judged.

Code Quality Assurance Checklist

1. General

1. Are all required pages / states developed?
2. Are all requirements met?
3. Do pages work without JavaScript errors?

2. Precision

4. Is reasonable pixel precision achieved?

3. Browser check

5. Do pages display and work correctly in supported browsers?

4. Valid HTML

6. Are all pages valid?

5. Semantic Markup

7. Are the correct tags being used?
8. Are the pages using microformats where appropriate?

6. Coding Standards

9. Do pages follow agreed HTML coding standards?
10. Do pages follow agreed CSS coding standards?
11. Do pages follow agreed JavaScript coding standards?

7. Optimization

12. Are stylesheets merged?
13. Are image files sufficiently compressed?
14. Are CSS sprites being used for images?
15. Is usage of excessively specific CSS selectors and improper use of !important rule avoided?

8. Accessibility

16. Can page content be understood and easily be navigated with images turned off?
17. Do pages degrade gracefully with JavaScript turned off?
18. Are correct ALT attributes for images provided?
19. Is proper heading structure in place?
20. Are labels associated with FORM elements?

In future articles I will show you how you can use the 8/20 rule to create a numerical QA scoring system to rate the projects and how you can use it in the recruitment process.

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