Arrow Down Arrow Left Arrow Right Arrow Down Arrow Left Arrow Right Arrow Arrow Down Arrow Left Arrow Right Articles Case Study Close CV Facebook GitHub Google+ Menu Information Link LinkedIn x five Interview Location Code Snippet Twitter Tick

Code Quality Assurance Checklist: 8/20 Rule

by Lubos Kmetko on May 29, 2013
Published in Quality Assurance 6 Comments

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 started to work for Xfive (formerly XHTMLized) as a front-end developer in 2006. He currently helps with business operations and writes for the Xfive blog.

More articles from Lubos

Comments

Stan May 29, 2013

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

Dave May 29, 2013

A very handy list for many I am sure!

Artur Kwiatkowski May 29, 2013

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.

Kate May 29, 2013

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

Lubos Kmetko May 29, 2013

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.

Ema May 14, 2014

Great checklist to personally implement on each project.

Would you like to add something?

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

Looking for a job? We want to hear from you!

Open positions

More from the blog

Submit a Project