In design to website conversion, what defines front-end code as being of top quality? We follow the 8/20 Rule here at xfive – 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 peace of mind.
Notice how the questions are formulated so you can answer them Yes / No (Pass / Fail)? This makes evaluation easier.
The criteria are 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 Basic Quality Assurance, which doesn't require in-depth technical knowledge, and most non-technical clients are able to check those criteria too when they receive code. The remaining 4 areas make up Advanced Quality Assurance, which requires a trained Quality Controller or an experienced developer to be properly judged.
Code Quality Assurance Checklist
1. General
- Are all required pages / states developed?
- Are all requirements met?
- Do pages work without JavaScript errors?
2. Precision
- 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?
- Do pages follow agreed JavaScript coding standards?
7. Optimization
- 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 the !important rule avoided?
8. Accessibility
- Can page content be understood and easily navigated with images turned off?
- Do pages degrade gracefully with JavaScript 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 projects, and how you can use it in the recruitment process.
Series Contents
- Code Quality Assurance Checklist: 8/20 Rule
- Can Front-End Code Quality Be Measured?
- Using QA in Front-End Developer Recruitment
About the author
