Thursday 13 October 2011

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
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
Accessiblity
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