How to Clean up Your Quality Control Process
This guest post was written by Chris Andujar a WordPress Maintenance Manager at TinyFrog Technologies, a WordPress Design Agency. To learn more about TinyFrog, visit their website.
Quality control (QC) can make or break your project. Nonetheless, this essential process can be a bit daunting as WordPress clients expect sites to function and look great on every device type from mobile to smart HDTVs.
High-end quality assurance involves a consistent approach, the right tools, and collaboration between designers and developers. And, don’t forget to clearly communicate the process to your client so they know what to expect and when to participate.
[article_callout]
Five tips to clean up your quality control process:
1. Follow a consistent process
2. Utilize browser and testing tools
3. Include your designer’s feedback
4. Focus on performance and accessibility
5. ECommerce and complex development checks
[/article_callout]
1. Follow a Consistent Process
For best results on a new website build, use the waterfall approach with multiple rounds of quality assurance and control — properly timed, of course.
All of the content should already be added to the site and any major development work completely done when you start quality control. If you’re not done building the site yet and you end up making tons of changes, you’ll have to start the process all over again.
QC will take more than a few hours, so make sure to leave enough time for this essential phase. Typically, a comprehensive QC can take 5-7 business days if you are reviewing everything. The process may take longer for larger sites with numerous pages or for eCommerce and membership sites.
If you are doing two or three rounds of quality control, you can involve different team members at each stage. The first round typically involves the developer and designer reviewing the site and cross checking that everything matches the design and scope.
The second round is typically the most in-depth step and can involve browser testing and reviewing the site on numerous device sizes, while the final round involves the client. Hopefully, by this point, there won’t be any more issues left for the client to point out!
2. Utilize Browser and Testing Tools
The right tools will make QC way more efficient. Here are a few of the best to streamline the process.
Browser Stack is a popular website and mobile testing platform that allows you to test and simulate a website on 2000+ devices and browsers. You can also easily capture screenshots of bugs or fixes as you review the site. With so many different mobile phone and tablet devices and sizes, it’s very difficult to QC a website without utilizing such a platform. After all, your team most likely doesn’t own every variation of iPhone and Android to adequately test the site without the help of a testing platform.
Of course, it’s always a good idea to check the website on as many different browsers on live computers (and mobile devices) as possible. While testing simulations can provide very accurate representations of the site, checking on the device itself gives another layer of certainty, and may just uncover something that would have otherwise been missed.
Two other great resources are ChromeDev Tools and the Chrome Lighthouse audits. With Google Chrome Lighthouse, you can audit performance, accessibility, and best practices. But, regardless of the tools that you select, make sure your team follows a clear checklist on which browsers, devices, and resolutions you intend to test — and keeps track of the results.
At the beginning of the project, establish clear guidelines with clients on which browsers and resolutions your team supports. For instance, certain browsers such as Internet Explorer are no longer well supported, so there’s no point in spending hours on an unstable platform.
3. Include Your Designer’s Feedback
Quality control and assurance is not just a task for the development team. There are numerous issues that might come up that the web designer is best suited to notice.
A designer can review the form designs, color choices, and hover overs on the site, making sure everything matches the mockups. They can also help with any responsive issues on the site. If the developer is struggling with an issue on mobile, a designer can offer valuable feedback on how elements should collapse to be positioned on smaller devices. If the site includes any micro-animations and scroll animation, a designer can review and make sure these match their vision, too.
Lastly, a designer can watch for the quality and resolution of images and design elements on the built site. A developer is often optimizing images for performance during the build, and sometimes the optimization work can reduce the resolution too much and hurt the quality of the design.
As designs get more complex and involve more dynamic elements, there’s definitely a lot of areas for collaboration between designers and developers. With this in mind, a web designer can reduce some of the back and forth during the QC process by preparing a website style guide and designer notes for the development team.
It can be helpful, too, to have the designer prepare a mobile mockup for the home page or part of the mobile menu, in order to reduce tons of mobile changes during QC.
4. Focus on Performance and Accessibility
Today, all website teams need to consider performance at every step of the project. By addressing performance problems during the QC process, you can avoid major optimization work post-launch and client complaints.
For several years now, performance and page load times have been a ranking factor for search engine optimization and it’s not just about rankings. Page load times also impact the user experience on the site. When making decisions in the development process, consider the performance ramifications, from the plugins selected to the parent theme.
Web accessibility is another important consideration for QC. Following development best practices and the Web Content Accessibility Guidelines can minimize other errors on the site. For accessibility, you’ll want to review the keyboard navigation capabilities, the color contrast in design layouts, and the error messages on any forms. You can utilize WebAIM’s color contrast tool to check the contrast ratios on the site.
During the QC process, make sure to run some baseline WordPress speed tests – and repeat them again after launch. If you are building the new site on a production server environment, you may not get accurate results if there’s no caching enabled or if the site will eventually be hosted on a different platform.
5. ECommerce and Complex Development Checks
In addition to checking for visual issues during the QC process, you’ll need to allocate more time for complex builds, such as eCommerce or membership sites.
It’s helpful to have a specific process for these types of projects so you don’t miss any pivotal testing. In addition to the normal QC items above, you’ll need to test the shopping cart, review shipping settings, and check any product filtering or search options for an e-commerce website. You’ll also need to watch for integration issues with the email platform and/or CRM.
For membership sites, you’ll want to test the steps for new membership sign up, payment processing (if applicable), and renewal steps. Most payment gateways like PayPal and Stripe offer ways to do test payments on a production site without having to process a payment and then a refund.
All of these elements can add several days to the quality control process for these types of sites. The quality control steps are even more critical for an eCommerce site, though, because any major issues will directly affect sales and revenue.
If your client will be adding products to the site before launch, it’s helpful to hold off on quality control until all of the content and products are set up on the site.
Getting Close to Perfection
There may be a lot of details to take care of during the QC process, but it all comes down to consistency, collaboration, and well-supported tools.
And of course, establishing clear boundaries about when your team’s responsibility ends. After a client gets access to the site or moves the site to a different hosting platform, it can be very challenging to anticipate errors.
