Quality Assurance Checklist

Pre-launch QA Diligence

Prior to the launch of web sites both big and small, there are several techniques and best practices to help ensure the delivery of a quality product that is performant and bug free. Often times addressed toward the end of a project, one of the most commonly used terms to describe this step of the process is quality assurance, or QA.

Quality assurance (QA) is a way of preventing mistakes and defects in manufactured products and avoiding problems when delivering solutions or services to customers
– Wikipedia

Bug Tracking

Validate, Fix Errors, Manage Enhancements

• Track and Prioritize your Bugs and Tasks
  • Online tools: Google Spreadsheets (Example QA Bug Tracking Sheet), Trello Boards (Example Trello Bug Tracking Board), Github Issues, etc.
• Be sure to “Validate” your code using an automated validation test tool, such as:
  • Validate HTML
  • Validate CSS
  • Validate Accessibility (Section 508 compliance)
    • Provide “equivalent” experience to all users. For example:
      • make sure all img alt tags are appropriate
      • make sure the site can be viewed/navigated via keyboard (hitting the tab key)
    • Check out online resources, such as: The W3C Web Accessibility Initiative (WAI) and their list of resources, the A11Y Project, ARIA, etc.
• Test in multiple Platforms, Browsers, Screen Sizes, and Devices
  • Example of online Tools: Browserling, Netrenderer, Sauce Labs, Browserstack, Browsershots, Chrome’s Device Mode

Performance Enhancements

Techniques to improve the speed of your site

• Be sure to test your site at Google Page Speed Insights (part of Google’s web.dev)
• Be sure to conduct a manual site audit for K size of all assets (how big is my home page? sub pages? how large are my images?)
• Be sure to optimize all media (e.g. images, videos, etc). Example: manually adjust via Photoshop’s Save for the web (legacy).
  • Recommended Image Formats:
    • jpg (for images/raster photos with lots of color)
    • gif (for images/illustration with under 256 colors)
    • png-24 (for images that require alpha transparency
  • Consider using a CDN that provides responsive media out-of-the-box (e.g. Cloudinary)

• Minify all local dependencies (html, css, and js)
• Considerations:
  • Consider using a CDN (e.g. Netlify for static site hosting)
  • Consider using a critical css file
  • Consider file compression (e.g. gzip)

Due Diligence

Style guides, code clean-up, and more…

• Refactor all code by removing any redundant or unnecessary code.
  • Remove unused markup (html)
  • Remove unused styling (css)
  • Concatenate your Javascript into one js file
• Consider creating in-house style guidelines & documention (for internal developer use and/or client use).

Quick Checklist

1. Is your HTML & CSS validating with no errors?
2. Is your site Section 508 Compliant?
3. Have you tested on Multiple Platforms, Browsers, Devices, and Screen Sizes?
   • Mac and PC
   • Chrome, Firefox, Safari, IE, Edge
   • Large Monitor, Laptop Display, Tablet, Mobile (including portrait & landscape views)
   • iOS and Android
4. Have you done a site audit and optimized all assets and media (images, videos, etc.)?