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
- 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 !important rule avoided?
8. Accessibility
- Can page content be understood and easily be 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 the projects and how you can use it in the recruitment process.
Series Table of Contents:
- Code Quality Assurance Checklist: 8/20 Rule
- Can PSD to HTML quality be measured?
- How to hire a great front-end developer
About the author
Related blog posts
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.
How to Hire a Great Front-End Developer
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.
Comments (6)
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