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
- Are all required pages / states developed?
- Are all requirements met?
- Is reasonable pixel precision achieved?
3. Browser check
- Do pages display and work correctly in supported browsers?
4. Valid HTML
- Are all pages valid?
5. Semantic Markup
- Are the correct tags being used?
- Are the pages using microformats where appropriate?
6. Coding Standards
- Do pages follow agreed HTML coding standards?
- Do pages follow agreed CSS coding standards?
- Are stylesheets merged?
- Are image files sufficiently compressed?
- Are CSS sprites being used for images?
- Is usage of excessively specific CSS selectors and improper use of !important rule avoided?
- Can page content be understood and easily be navigated with images turned off?
- Are correct ALT attributes for images provided?
- Is proper heading structure in place?
- 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: