Anybody can "make" a website —  but to make a great one you need to relentlessy hunt down all errors, issues and optimizations that are possible to output the best possible end product. We check the websites we develop from top to bottom for every conceivable issue, from Cybersecurity to Accessibility. A lot of the tools and checks we use you can use, too, to review your own websites and projects to double check and make sure your developers didn't miss anything.

Cybersecurity

Our cybersecurity team has more advanced and specialized in-depth methods for assessing and managing vulnerabilities, but others among our team also run more generalized tests to double check and get a simple overview. Clients can use these as well to check for their own reference.

These following tools are good for a “quick check” to be aware of any glaring issues:

• For a general cybersecurity overview, we find the Mozilla Observatory check very quick and useful. https://observatory.mozilla.org/
• Tool to check for outbound links to unsafe websites: https://validator.w3.org/checklink 
• For a website’s TSL certificate status we like the exact summarized info we need at Decoder.Link: https://decoder.link/sslchecker/  (though our recommended purchase place for SSL certs is at: SSLS.com: https://www.ssls.com/ - good pricing and easy to use) For more in depth info can use: https://www.ssllabs.com/ssltest/
• We need to make sure our clients have their SPF, DKIM, and DMARC records set up well to help protect them better from email-based phishing and cyber attacks, and for that we like: https://mxtoolbox.com/SuperTool.aspx Another favorite which helps give a quick look on SPF, DKIM and DMARC is: https://easydmarc.com/tools/domain-scanner

Code Level and Main Checks

The Google Lighthouse tool is super useful as a Google chrome browser extension: https://developers.google.com/web/tools/lighthouse This covers several key areas, including Accessibility which we check using other tools too in other ways below. Lighthouse is already included in the Google Chrome Browser’s DevTools, just right click on a web page, select Inspect, and it’s the last in the row of options:

Usability Testing

Some concerns are for persons with disabilities like color blindness, reduced vision, sensitivity to flashing lights and more. For example, we use WebAIM to check the color contrast issues of a web page. Now here at SEIRIM, we prefer to walk through each of the pages of the website to ensure thorough testing.

When doing QA and checking the site’s usability for any errors, fonts out of place and the like, it helps to answer these questions when checking:

1. Does the end user know how to complete key functions of the website?
2. Is UI clean, structured, and most importantly consistent?
3. Are important features and information available?
4. Is the navigation intuitive and consistent?
5. Are calls to action clear?
6. Are potential problems and errors well handled?

Once you can confidently answer the questions above and you check the progress of your site every 3-5 days, any errors or issues will be caught way before website launch.

Major Browsers

When doing QA on all browsers, the main components to make sure of is as follows:

• Ensure content and layout works on all browser combinations and devices such as Firefox, Chrome, Edge and Safari while it works on other OS systems such as Windows, macOS, iOS and Android.
• Should work on different devices e.g smartphones, tablets, desktops and laptops
• Websites should be compatible with assistive technologies such as screen contrast and individuals who are differently abled.

The major web browsers we test on are Google, Safari, Microsoft Edge (formerly Internet Explorer), and Firefox. However there are other browsers such as Opera but that really only covers about 1.3% of the market share. Google Chrome is by far the most used browser and accounts for more than half of all web traffic followed by Safari in distant second with a market share of roughly 16.4%.

Microsoft Edge or formerly better known as Internet Explorer has rebuilt their Edge browser using Chromium (known as the open source version of Google’s Chrome browser) which now makes it twice as fast as it used to be and allows you to use a few Chrome extensions but it is not likely to influence Chrome users into switching to Edge. As for Firefox and Opera which covers the least amount of market share at 3.2% and 1.3% respectively. 

See market share stats below:

It’s pretty obvious that Chrome is at the forefront when it comes to browsing, even default apps on Windows and Android tend to choose Google Chrome as their preferred default app. It’s really only iOS/Mac users that will have Safari as their default.

When we talk about doing actual QA when producing a new website, we are sticklers for perfection so not only do we do a check per browser but we also cross reference it using the Cross Browser Testing Tool. What I personally love about this tool is that it’s easy to use and can conduct tests across multiple platforms such as desktops, laptops, devices and the like, not to mention you can move from manual to automatic testing.

Mobile Performance

Every website has to work well on mobile right. I mean it's more likely for someone to have a smartphone over a computer these days, they are essentially ‘hand-held computers’. That being said, a lot of organisations and businesses today tend to monitor customer trends and behaviour which has resulted in mobile performance becoming a key requirement when developing websites or apps. UI Design and Performance will make or break your site so we must take the time to ensure that the content is rendered on our mobile screens.

Just like doing QA across different browsers, we also do a manual check both on iOS and Android devices. Aside from having a fancy tool to test it out, we LOVE to use the Inspect Element feature with a right click of a button, this feature allows you to check the layout of the website across various devices being offered in the market today.

Aside from our fave Inspect Element feature, we also use TestComplete, a product offered by SmartBear (same producers as CrossBrowserTesting). TestComplete automates your testing across real Android and iOS mobile devices. With TestComplete, you can run one mobile test across multiple devices that have different screen sizes and resolutions.

Broken Links and Related Errors

There is nothing worse than clicking a link on a website that should work but doesn’t. As a consumer myself, I get really frustrated when a website takes me to a broken link and I have to start all over again. This is definitely not a very good user experience and it must be addressed immediately!

Aside from the bad user experience, it also affects your SEO, reduces your website’s credibility and could impact ALL of your conversions. It is highly imperative that you fix all broken links and ensure that they are going to all of the right URL’s.

After a website has been produced and is going through its final steps of QA, I take the site through Screaming Frog (which also works for SEO) but Screaming Frog allows you to check or crawl around 500 webpages and validates which URL’s are broken or being redirected etc.

If you don’t feel like downloading Screaming Frog since it is a software that needs to be installed, you can always check W3C Link Checker. They have an online tool that will give you the results you need though it might not look as pretty as Screaming Frog when it comes to organisation.

Website Performance

We build websites that load and perform fast. Some tools we use use to make sure they do and help troubleshoot any issues include:

WepPageTest.org is always a good check: https://www.webpagetest.org/ for site performance

We also like GTMetrix: https://gtmetrix.com/

One of the most important things for a website to be fast is to just be online and “up” in the first place. To track our clients’ websites and get alerted if they go down we use UptimeRobot: https://uptimerobot.com/ This helps highlight if their server could be an issue in the website’s performance.

We also often need to check if a website is accessible in China, and to do so we use this tool from Experte.

Client Feedback Tools

When we want to know what browser and version someone is using to check what could be the cause of an error, a visit to this tool gets the info quickly: https://toolbox.googleapps.com/apps/browserinfo/

There is also a handy screen recorder there easy for anyone to use: https://toolbox.googleapps.com/apps/screen_recorder/

Troubleshooting DNS Issues Tools

Sometimes an issue can be at the very root of a website’s details, think domain renewal Nameservers, A records, MX and more. We find these tools the most useful for different scenarios.

To go way back to the ownership info, can check: https://lookup.icann.org/

For the simplest view to check a single configuration of a website like an A record, can check: https://www.whatsmydns.net/

Comprehensive info can be had via this Google tool: https://toolbox.googleapps.com/apps/dig/

Conclusion

This is just a brief sampling of quality assurance tools, but there is plenty here for checking on any major category of concern. For more info feel free to contact us here at SEIRIM in Shanghai to know more about how we make impressive, cybersecure and user satisftying websites and web apps!