Lesson Qa 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.
- Validate your code
- 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.
- 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
- Test your site at web.dev and Google Page Speed Insights
- Conduct a site audit for K size of all assets
- 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
- Minify all local dependencies (html, css, and js)
- Considerations:
- Consider using a CDN
- 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 & documentation (for internal developer use and/or client use).
Quick Checklist
- Is your HTML & CSS validating with no errors?
- Is your site Section 508 Compliant?
- 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
- Have you done a site audit and optimized all assets and media (images, videos, etc.)?