What is quality assurance?
According to Wikipedia, quality assurance is:
Quality assurance (QA) is a way of preventing mistakes and defects in manufactured products and avoiding problems when delivering products or services to customers; which ISO 9000 defines as "part of quality management focused on providing confidence that quality requirements will be fulfilled".
How we test a website
First, we split the testing process into several stages. At every stage, we create a report (in our case, we do it on Jira). And these are the following stages:
- Form Input and Validation.
- Broken link checking.
- Mobile responsiveness (virtual) testing.
- Accessibility testing.
- Mobile responsiveness in-house testing.
- UI testing.
Form Input and Validation
On all the forms placed on the website we verify:
Data inputs - We check all inputs according to design.
Webhooks - If we’ve set up a custom Webhook (for example, sending forms to Hubspot).
Error messages - We ask, "Are they according to design?"
Labels, Names, and IDs - It should be descriptive, and easy to navigate. There should be no duplications, especially on IDs.
Broken link checking
We meticulously go over the entire website over and over again, ensuring everything is working as expected, such as: buttons, links, hovers, animation, transitions and more.
To review the performance of your website, we check backlinks, and which links are paired up with your page; we use an SEO software suite called, Ahrefs. In addition, we do manual checks, and this we highly recommend.
Mobile responsiveness testing
To verify that all the elements are working as expected, cross-browser, and across all devices, we use Blisk browser, which is a toolbox for development that debugs, and tests modern websites. There are 50 devices that are integrated into Blisk, and these are some of them:
- iPhone 5, Safari
- Pixel 5, Google Chrome
- Galaxy S6 (360px)
- iPhone 13 Pro Max (428px)
- iPhone 13 (390px)
- iPad mini
- iPad Pro
- Smaller Android tablet
- Biggeer Android tablet
- Macbook mini
- Macbook Pro 13-inch
- Macbook Pro 16-inch
- Small laptop on Windows
- Medium size laptop on Windows
- Big size laptop on Windows
- Wide screen monitor (4k ultra-wide)
- Small screen monitor (1920px 24-inch)
Accessibility testing for websites is important both for creating a better experience for all visitors, but also for SEO.
We here, at Karpi Design Studio, have Accessibility Audits on Webflow, which provides enormous assistance before publishing a Website. However, it is a great practice to run another test via Google Lighthouse, and this is how to do it:
- Open your website in Google Chrome
- Press Right click + Inspect (on mac press option + command + i)
- Click on Lighthouse
Mobile responsiveness in-house testing
We also test websites on physical devices. Doing so allows us to find issues that we wouldn't find otherwise.
Real case: Once on a client project we were already finalising the project but then I opened the website on my computer with an old 1920px 24-inch screen. Yes, a few pixels already fell from there. My findings were that the text is unreadable. I advised the team and we run a reasearch about how many people are using these screens. We found out that many offices are using bad, cheap, monitors and our website will not perform for them because they can't read what we want to tell them.
These are the monitors/screens that we use:
- 4K 28 inch monitor
- MacBook Pro
- Regular Windows laptop
- Old and cheap 1920px monitor
- iPhone 12mini
- Samsung Galaxy
- iPhone 5
At this stage, the designer who designed the website, goes over the whole thing.
The design team uses the same tools as the tester in Mobile responsivity tests; and checks for:
- Design consistency
- Alignment of elements, images and 3D animations
- Checks the motion of the website, and recommends adjustments
- Animations, and interactions visual testing
I hope you found this website quality assurance tutorial helpful. Good luck. And let me know how it goes.