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.
- Provide “equivalent” experience to all users. For example:
- 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)
- Recommended Image Formats:
- 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
- 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.)?