Get in touch

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.
Ingrid Getzan Van Cafe
Their designs are exceptional and their communication is great. They also do things in a timely manner, which is amazing.
Home Blog Code Quality Assurance Checklist: 8/20 Rule

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?

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

  1. Is reasonable pixel precision achieved?

3. Browser check

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

4. Valid HTML

  1. Are all pages valid?

5. Semantic Markup

  1. Are the correct tags being used?
  2. Are the pages using microformats where appropriate?

 Code Quality Assurance Checklist

6. Coding Standards

  1. Do pages follow agreed HTML coding standards?
  2. Do pages follow agreed CSS coding standards?
  3. Do pages follow agreed JavaScript coding standards?

7. Optimization

  1. Are stylesheets merged?
  2. Are image files sufficiently compressed?
  3. Are CSS sprites being used for images?
  4. Is usage of excessively specific CSS selectors and improper use of !important rule avoided?

8. Accessibility

  1. Can page content be understood and easily be navigated with images turned off?
  2. Do pages degrade gracefully with JavaScript turned off?
  3. Are correct ALT attributes for images provided?
  4. Is proper heading structure in place?
  5. 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

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

Comments (6)

Write a comment

Stan

Great article on XHTMLized PSD to HTML QA process. Explaining the process in very transparent and easy understanding way!

May 29, 2013

Dave

A very handy list for many I am sure!

May 29, 2013

Artur Kwiatkowski

Handy list indeed but I dont see here any type of question regarding the amount of code developer can produce. Also it would be nice to see a line about code preprocessors like LESS or SASS - these tools can really help while developing a website. There is a growing demand for Responsive Websites so I think you should also add some questions about RWD side.

May 29, 2013

Kate

Great checklist for most sites! Neatly summarizes the areas to check upon before, during and after development of a website for your client.
More on optimizing websites can be found in 'High Performance Web Sites' book from Steve Souders http://amzn.to/146dtVN

May 29, 2013

Lubos Kmetko

Thanks, Artur. Of course, different companies or developers can have different needs regarding their code QA, the advantage of this list is that you can put additional stuff under particular criteria. Eg. you can have a quite extensive coding standards list and define desired preprocessors use there.

Similarly responsive design, you can define a list of supported devices for #5 criteria (Unless you meant something else by that). But I agree that as the front-end coding develops we might need to update the criteria at some point.

May 29, 2013

Ema

Great checklist to personally implement on each project.

May 14, 2014

Would you like to add something?

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

Submit

Related blog posts

Aug 09, 2013 | Lubos Kmetko | QA

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.