Production strength web pages – A web development checklist

Web development is more than just slapping a few html, css and javascript files together. When developing webpages for public consumption I like to use the following principles to determine if my front end code is production strength. The additional checks and balances, in my opinion, make for a more stable web app which will cost you less to maintain for the duration of its life.

Note: This list can also serve as a useful checklist for code reviews.

Basic Code Checks

• Is html symantic?
• Is html compliant? http://validator.w3.org/
• Is Css compliant? http://jigsaw.w3.org/css-validator/
• Is Css in a good state? http://csslint.net/index.html
• Is JavaScript in a good state? http://www.jslint.com/
• Do I need unit tests for my Javascript? (http://docs.jquery.com/QUnit and/or http://pivotal.github.com/jasmine/ )

Cross browser compatibility

• How does page look in all supported browsers?
• Does the page really need to be pixel perfect in all supported browsers?

Performance

• What is the page weight? (target: 100kb> max)
• Am I adding unnecessary HTTP GET requests for the user? (e.g. new js/css files)
• Am I adding unnecessary html nodes?
• Am I using unnecessarily verbose class/id names?
• Am I introducing any unnecessarily large images?

Compression

• Can I compress the JavaScript? (http://www.crockford.com/javascript/jsmin.html or http://www.minifyjavascript.com/)
• Can I compress the Css? (http://www.minifycss.com/css-compressor/)
• Can images be 'smushed'? (http://www.smushit.com/ysmush.it/)

Accessiblity

• http://wave.webaim.org/
• Wave FF plugin (https://addons.mozilla.org/en-US/firefox/addon/fangs-screen-reader-emulator/)
• Fangs FF plugin (http://wave.webaim.org/toolbar)

Technical Debt

• Am I introducing any technical debt with this solution?

I’d welcome any extra worthwhile checks to add this list, so please post any suggestions you may have