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:
About the author
Related blog posts
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.
In this article concluding the series about Quality Assurance on PSD to HTML projects, I’ll show you how to hire a great front-end developer using the knowledge from my previous two articles.