Website Quality Assurance In 2023
Last updated: 13/04/2023
If you want to have disasters on large website projects where clients are super upset with you, then skip quality assurance!
For Web Development, you need to do Quality Assurance. Quality assurance is the reason things work so smoothly.
Key Takeaways
- Website QA testing is essential for any new website
- Good QA will save you time, prevent disasters and improve the end result
- Quality assurance testing should be done by a QA team across the entire site
- Convert your user requirements into an actionable QA checklist
What we'll cover
- What is website quality assurance?
- 5 Stages of QA testing
- Areas to test in Quality assurance testing
- Checklist for Website Quality Assurance
What is website quality assurance?
QA is one of the final essential stages of web dev or any development process at all. The general flow of a website development process is design, development, QA and then publishing.
It's the process of going through your website with a fine tooth comb on the lookout for anything wrong. In the same way, a builder would look for cement to be laid evenly without any imperfections.
It's the process of ensuring amazing user experiences for users across different browsers, different devices, different screen sizes and different screen resolutions.
What can go wrong with Website Development?
A small example could be an unset or broken links on key links like the navigation make it impossible for users to see the other pages on your website. Especially if the broken link is one of the navigation links on the site.
Why is QA important?
We're all human - we make mistakes
Website projects can take between 3-10 weeks at minimum and can be extremely complex. This opens the door to all sorts of mistakes & potential for things to go wrong.
Quality assurance testing helps us catch those mistakes and discover bugs when building websites. That's what makes QA important.
Things work perfectly
Good work speaks for itself. High-quality work means happy instead of frustrated clients. High-quality work means you win awards.
High-quality output means less stress of having to clean up things. High-quality work means better client experiences and more referrals.
Doing a test to ensure the site is working properly is also great news for the end user too - especially for eCommerce websites. Good security reduces the risk level for shoppers to spend their money on your brand.
Make things better
Reviewing things only makes them better. You can boost your site UX or make a last-minute change to make the navigation more simple.
Being able to step back and take a look at the end result of the website allows you to spot mistakes you wouldn't see when only working on other parts of the site where an end user may wander.
This is a great reason why a third-party team should do QA testing for you ideally.
- they will have fresh eyes since they aren't involved in the development process
- they will most likely be in another city or place. This helps your compatibility testing as they may be using different browsers
This way you can ensure you have undergone proper quality assurance.
Prevents disasters
Big glaring mistakes are brought to light when conducting functionality testing on the end result of the website.
Without good Quality Assurance, this can lead to a terrible end result and therefore super angry clients.
How Does Web Quality Assurance Relate To UX And UI (User Interface)?
It may be hard to deliver a great User Experience (UX) and User Interface (UI) the first time. QA testing allows you to fine-tune the user journey by fixing quality issues.
Quality Assurance Vs. User Testing
QA aims for error-free code whereas users' User Acceptance Testing (UAT) ensure the users get the product they want.
Quality assurance VS quality control
The term Quality assurance often gets confused with quality control (even by us).
Quality assurance is the proactive approach to managing quality which focuses on preventing errors from happening in the first place. This is an ongoing process.
Quality control is the reactive approach of detecting errors from the product itself in order to verify the quality. This is where quality assurance is bolted at the end of development as a stage.
For the new development of a site, both of these are important. You should have a more proactive (overreactive) approach in order to prevent errors and actually speed up development.
Quality Assurance VS UX
When making a website you need to address some quality problems beyond the UI which reflect poorly on the overall UX of the site. Having key links on the website not working or a sluggish load time won't help create a positive User Experience when browsing the site.
Website QA testing ultimately will consequently improve or enhance UX.
Which Trades Are Involved In Web Quality Assurance?
If you are responsible for building or creating things, you need a QA team. Let's take a couple of test cases of why proper Quality Assurance will actually save you money & headache:
- If you're a builder, a QA tester will test the house built for any faults before it's sold to the estate agent. Without testing, the house may have a few problems which can lead to end users (tenants) complaining.
- This can lead to a loss of business for you as you will be regarded as low quality
- If you are a web app development team, QA testing can possibly point out flaws when reviewing your responsive design or notice security threats in their login session.
- These problems on the site when fixed can increase your sign-up rate and save you from a lawsuit for data breaches.
Areas to test in Quality Assurance testing
For some of these like security, they come out of the box with your Website provider. Like Webflow and Shopify are both great examples of modern web platforms where you never need to worry about security testing.
If you are building your own website from scratch then you will need to consider some of these technical points (such as functionality testing and performance testing) even more during your development process.
Feel free to take these and create your own QA checklist for your future web projects. Main pillars of Website QA:
Fits requirements testing
Test whether the site fits the brief.
- Have we built out the X amount of pages required?
- Does it function in the way we agreed for it to be with the client?
- Have we included the in-scope features requested
Functionality testing
Functional testing is where you go through the website to test if it just works properly.
- Do buttons take you to the right pages or open the right modal
- Does the navigation work properly
- Are there any broken links on the site
- Make sure all the links on each page work
- Are there any critical errors when a user makes a certain action
- Double-check data input validity for forms
- Process flow - can visitors complete the full journey
Making sure the website can function properly is a bare minimum expectation when delivering work to clients.
Accessibility testing
15% of the world's population have some sort of disability. Your website needs to be able to cater for all end users.
This means:
- alt text on images should be set
- Links should have a name
- The right colour contrasts should be used
- Fonts should have good legibility
- The site layout should be straightforward and consistent
Having great Web accessibility is also a behaviour that is well rewarded by Google & other browsers.
Privacy & Security testing
Although this is often handled by the website platform being used, ensuring the privacy and security of sensitive data are non-negotiable when it comes to site quality assurance.
Your company can face charges and severe backlash when you aren't able to protect its data.
- Test that your site has a valid SSL
- Make sure your website URL is on the HTTPS version and minimise any HTTP traffic
- Asks users before making cookies enabled
Design testing
Your website QA testing should also increase a design check. Having a clean, responsive design is almost a bare minimum expectation now.
- Is the design on-brand?
- Is the Layout easy to use?
- Does it looks good on different screen sizes?
Mobile testing
With a rising % of website traffic coming from mobile users, it places more significance on the Mobile Quality assurance process. Your site needs to look great on all screen sizes.
In 2023, the number of global mobile users is estimated at 6.8 billion.
A search engine like Google will know this and therefore also rank websites by their mobile usability too. In a similar fashion to accessibility, the better the quality of your web pages on a mobile device the more rewards you will receive over competitors.
You can test this by simply using dev tools (Google Chrome) and resizing the width of your window. It should look lovely the whole way through to the ratio of mobile devices.
Compatibility testing
As annoying as this there are different browser versions which mean certain features don't work across the board. During website QA testing, test your site has excellent browser compatibility.
Also on certain operating systems (e.g. Windows or MacOS), there are some web features which function a little differently so watch out for those too.
For example, WEBP images don't work on all browser versions.
Performance testing
Some tools we'd recommend for this would be Google Page Speed and GT Metrix. Having a rapid load time is the difference between having a user stay or leave your website in less than a few seconds.
Read our article on boosting the speed performance of your Shopify store for more info.
Content testing
A great example of content testing is making sure the placeholder text and image have been changed on the site. You don't want any lorem ipsum on the live website!
Another thing to test for is spelling mistakes on your website copy. This can be confusing to a user of the site.
5 Stages of QA testing
Here we dive into the 5 stages of website QA testing while giving some testing tools & resources to use also. Think of this as a process flow.
Discovering
In this initial stage, you need to go through a QA checklist as thoroughly as possible to spot and identify any errors missed when building websites.
Ideally, you should test every key page across the entire site. Some easy tests for your QA team can be to identify any broken links, ensure the site will function properly across different browsers and mobile devices, check forms for data input validity and do some performance testing also.
Or you can implement test automation tools (such as Testsigma, Selenium or Telerik Test Studio).
Planning
Using info from user testing data, it's now time to plan your strategy to fix those things. If you had any notes you kept for future reference, this is the time to put those on the board and brainstorm solutions.
Designing
This isn't redesigning the website, this is designing the tests. Make another QA checklist to encompass the requirements of the project and more specific tests such as
- test payment gateways on the website
- make sure you have an SSL and your website points to the HTTPS version
Here you can also create test automation tools.
Executing
With your QA checklist in hand and testing tools ready you can now perform the testing across the entire site with your QA team.
It's also very important to have some sample end users try out the website too. This will give you insight into their user journey in order to find out whether the navigation structure you are using is effective.
Improving
Here you take the feedback from your functional testing and user testing and make the changes necessary. You may need to re-run functionality testing if you had to make a big change on the web pages.
This is more formally known as regression testing. For example, when making a change on the class name of a certain button, it may affect the javascript written for that element. This is why regression testing is essential.
Checklist for Website Quality Assurance
Convert your requirements into a QA checklist. By creating the process flow, you'll make the blueprint to test each area much easier so nothing is overlooked.
- Are all the pages responsive?
- Have you removed all Lorem Ipsum, placeholder images & dummy content?
- Are all the pages functional?
- Do all the links work?
- Have you done security testing on the site?
- Does the site work on different devices?
- Have you re-routed HTTP traffic?
- Is the copywriting done?
- Tested payment gateways?
- Have you done speed performance testing?
Webflow QA Checklist
- Favicon & webclip set?
- Webflow branding disabled?
- Are advanced publishing options turned on?
- SEO sitemap auto-generated?
- Set a default domain?
- Do forms have appropriate names & work?
- Cleaned up unused styles in style manager?
- Use the correct element tags (<header>, <footer>, <main>, <section>...)?
- Cleaned up unused interactions?
- Converted assets to WEBP?
- Set a correct CMS empty state?
Shopify theme development QA Checklist
- Critical functions: Can users choose the right variant, add it to the cart & checkout?
- Is the theme.liquid file organised?
- Have you removed any unused sections, snippets or assets?
- Have you created a backup?
- Is the Facebook pixel or conversion tracking set up
- Cleared unused metafields?
- Deleted unused apps?
- Is technical SEO done correctly?
- Meta title and description set?
- Are images responsive (sized), compressed or in WEBP format?
- Does the theme editor setting label make sense?
- Using header & footer groups?
- Are sections re-useable?
Read our article on Shopify custom theme development on info to create your own custom theme.
Conclusion
With website QA testing, in the best case sometimes huge disasters can be prevented or in the worst case, you spent a couple of hours making some positive changes. QA is an essential stage when building websites.
There are always going to be QA issues when your development team have finished building a new website. Making mistakes is normal.
Good website QA testing will also lead to a search engine like Google favouring your website over other because of its excellent quality, accessibility and therefore experience for end users.
When adding new features you should still conduct some sort of test. Then perform regression testing to verify that the change hasn't affected the overall functionality.
Over time, systems and processes (in the form of an advanced QA checklist) will minimise errors. But don't get complacent. Always stay on top of Quality assurance.
Frequently Asked Questions
When to do QA for a website?
Proper quality assurance should start as soon as the website is being designed or earlier.
Do I need to hire a QA team?
No, in most cases you don't need to hire a QA team for small or quick website projects. For larger builds yes.
What are some things to check before a website goes live?
When doing website QA testing the main areas to check are functionality, requirements are met, mobile experience, security, performance, content & accessibility.
We hope this article was useful for learning more about Quality Assurance for your next website project.
If you are looking to build a custom theme, we'd love to be the team that helps you with that project. Feel free to contact us below!
—
We are Step Labs - a Webflow & Shopify web design & development agency! If you would like to build a beautiful and high-performing website, contact us at victor@steplabs.xyz.
Written By: Victor @ Step Labs
