How we do quality assurance on our websites?

Pavel Karpisek
Pavel Karpisek
Published on
August 11, 2022
Estimated read time
5
 minute read
Pavel Karpisek
Published on
August 11, 2022
Estimated read time
5
 minute read

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".

Source: Wikipedia

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:

  1. Form Input and Validation.
  2. Broken link checking.
  3. Mobile responsiveness (virtual) testing.
  4. Accessibility testing.
  5. Mobile responsiveness in-house testing.
  6. 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.

Broken link results in Ahrefs

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:

Mobile devices

  1. iPhone 5, Safari
  2. Pixel 5, Google Chrome
  3. Galaxy S6 (360px)
  4. iPhone 13 Pro Max (428px)
  5. iPhone 13 (390px)

Tablets

  1. iPad mini
  2. iPad Pro
  3. Smaller Android tablet
  4. Biggeer Android tablet

Laptops

  1. Macbook mini
  2. Macbook Pro 13-inch
  3. Macbook Pro 16-inch
  4. Small laptop on Windows
  5. Medium size laptop on Windows
  6. Big size laptop on Windows

Desktop screens

  1. iMac
  2. Wide screen monitor (4k ultra-wide)
  3. Small screen monitor (1920px 24-inch)

Accessibility testing

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
Screenshot of Lighthouse user interface in the browser

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

UI testing

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
UI testing in Jira

I hope you found this website quality assurance tutorial helpful. Good luck. And let me know how it goes.

Karpi out!

Ready to get started?

We specialise in profit generating websites that tell your story, increase your conversions and educate your audience. Reach out to the team today to discuss your project with us.

Contact us