Before launching any website it is important to ensure quality and functionality. No one wants to launch a site for a client only to get swamped with angry calls and emails because the site isn't working.
This is a checklist that we use to prevent this nightmare.
Ideally you will do QA (quality assurance) checks as you build out the website. But you will need to perform a comprehensive check before launching your site to production. You will also want to do QA checks before demoing the site to any stakeholders.
Completing this entire checklist will take at least a few days so do not wait until launch day. Also remember to give yourself time to fix and retest any issues. I advise planning a full week for pre-launch QA.
Not all steps will apply to all projects.
Functional Testing
Cross Browser
If possible test on actual browsers instead of emulators.
- Chrome
- Edge
- Firefox
- Safari
- IE? (only support IE if it is absolutely required)
Cross Device
If possible test on actual devices instead of emulators. Also use a few different screen resolutions.
I like to test on my phone just to make sure the site is easy to use. Make sure all buttons and links are easy to click. All content is readable and looks good.
- Mac
- Windows
- iPhone
- iPad
- Surface Tablet
- Samsung
Responsive
Check the site at different screen widths to ensure the layout never breaks.
- Full width (1200px - 1024px)
- Large tablet/small laptop (1024px - 768px)
- Phones (<568px)
Accessibility
Make sure the site meets wcag standards.
Scan pages for accessibility issues. I like Axe Chrome Extension
Add any missing alt text to images. (decorative images do not need alt text) SVG images do not have alt text.
- aria labels and descriptions
- test with keyboard only to ensure entire site and all content is accessible
- test with a screen reader
- color contrast
Forms
Test all forms, including anti-spam features, validations, response emails/text, etc.
Make sure that someone is monitoring and able to respond to form submissions
Additional Functional Testing
Check all custom functionality. Filtering, pagers, image slideshows. Check that any external APIs are working and all data is loading as expected.
Check search functionality (including relevance of results)
For e-commerce test cart and checkout functionality. test happy paths as well as unhappy paths.
Performance and Security
Performance Optimization
- load testing
- check that images are optimized. if possible using .webp file types.
- Check and implement caching where necessary
- Check total page size/download time
- Minify/compress static (JavaScript/HTML/CSS) files
- Remove any dead code
- Check and configure CDN where necessary for distributed caching and load balancing
- Check correct database indexing
- Check configuration at every level (Web server, Database, any other software e.g. Content Management System
Security
- ensure all content that comes from external sources is properly validated and sanitized.
- form data should be validation on the front-end and back-end
- Protect any sensitive pages (e.g. administration area)
- Use robots.txt where necessary
- Security/Penetration test
- Turn-off verbose error reporting
- Remove any console statements
- Check disk space/capacity
Monitoring and Analytics
Analytics
Make sure any necessary analytics scripts are in place. Also make sure analytics is only capturing production site traffic.
- Google Analytics
- Other analytics services
Monitoring Services (Optional)
- Add any error monitoring services like Sentry and Log Rocket.
- Configure server-based logging/measurement tools (e.g. database/web server logging)
Content and Style
Check for Broken Links
- check all internal and external links
- check for broken/missing images
- check 404 page
Check that all assets are loading
- fonts
- images
- scripts
- styles
- videos
Typography and Layout
- Check for incorrect punctuation marks, particularly apostrophes, quotation marks, and hyphens/dashes
- Check headings for where you could potentially use ligatures
- Check for widow/orphan terms in important paragraphs
Check for placeholder content
- make sure there is no lorem content anywhere
- check for any placeholder images, pricing, names, and descriptions
- add favicon if needed
Check grammar/spelling
Read through content for grammar issues and spelling errors. if possible have someone else read the content.
- Capitalization (especially of main headings)
- Tense/style of writing
- Recurring/common phrases (e.g. “More about X” links)
- Variations in words (e.g. websites vs. web sites, or UK vs. US spelling)
- Treatment of bulleted lists (e.g. periods or commas at end of each item)
- Check site in different languages if needed
Search Engine Visibility, SEO Metrics
- Check for target keyword usage in general content
- Check format (user/search engine friendliness) or URLs
- Ensure conversion tracking is enabled for all PPC campaigns
- Ensure that all metadata descriptions and titles are unique
- Ensure all relevant content is accessible to robots
- Check formatting of site results in search engines
Deployment
Review Continuous Integration
If you're using Continuous Integration in your project make sure that continuous integration will prevent deployment of broken site builds
Make sure automated unit and end-to-end tests are working and passing.
Review Continuous Deployment
Ensure that continuous deployment is in place and working properly.
This list may seem overwhelming but most of these checks can be automated. Automating your QA will help you find issues as soon as they occur so you can fix them quickly.