Website QA and testing is an imperative step in launching, redesigning, or maintaining a website. It’s a process that ensures as many people as possible have access to your site, can optimally view and navigate it, and have the highest quality user experience. While a front-end developer typically takes the reigns on the testing process, they often rely on other team members to manually test the site before launch. Comparing the static design to the live site, proofreading content, checking links, and testing form functionality are all tasks your team should complete before pushing a site (or site changes) live. While no tool can replace the human tester, there are some that can aid the testing process. We’ve selected some top testing tools and outlined them below.
Proofreading/Grammar
Grammarly
Grammarly is a Chrome plugin to download before you even begin the proofreading process. This tool can fix grammar errors in browser as you’re writing content, saving time and minimizing the number of mistakes. Grammarly’s algorithms are designed to call out and instantly suggest fixes for more than 250 types of errors. Not only does this tool catch spelling and punctuation mishaps, but contextual spelling and vocabulary mistakes, which many algorithm-based tools can’t pick up on. It works in through chrome in Gmail, several social networks, and many other places where you write online. Grammarly is effective for QA because it helps the writer fix mistakes during the content creation process, minimizing the number of errors within the final website.
Wordy
Wordy is a perfect resource if you don’t have enough people on your team or enough time to diligently to proofread your site. It’s also useful if you’d like a fresh, unbiased set of eyes on your content before launch. Wordy is a professional proofreading service that matches you, within five minutes of requesting service, with an editor in your time zone and subject field (out of 56 different subjects). From there, their professionals proofread your site quickly, averaging 1,200 words per hour. They’ll offer any suggested corrections or adjustments.
Links
W3C Link Checker
The World Wide Web Consortium is the Bible for web accessibility and standards, which lends automatic credibility to their Link Checker. The tool checks your webpage, CSS style sheet, or entire website’s links and anchors for issues. A simple tool, but a necessary process to ensure users can navigate through your site without encountering a slew of 404 errors. The W3C Link Checker is just one tool in a full suite of open source tools.
Online Broken Link Checker
Similar to the W3C Link Checker, this tool checks for dead links on your website and blog. After scanning your webpage, it will point out exactly where the broken links are within your HTML so you can fix the problem(s) as soon as possible. Online Broken Link Checker stands out from the rest because it only lists the bad links, instead of mixing in the good ones, which could make it hard to spot which ones need work.
Browser
Browsershots
Browsershots provides screenshots of your website in different operating systems or browsers to ensure everyone can view your site in its optimal form. Simply check which browsers you want to see in Linux, Windows, and Mac. Browsershots offers an extensive browser list, including Arora, Chrome, Firefox, Safari, Opera, SeaMonkey, and more, in a multitude of editions. It also provides the option to further analyze different screen sizes, color depth, versions of Javascript, and other factors that could affect how your website displays.
BrowserStack
This tool is our developer’s number one choice to perform cross-browser and cross-device testing. He touts it as an indispensable tool for any front-end developer. BrowserStack allows you to test on more than 1,000 real mobile and desktop browsers. Since the tool offers live viewing, you can immediately see how your website looks on the browser and operating systems of your choice. This means you don’t have to wait for screenshots. But if you would like screenshots, BrowserStack delivers. Another key feature of BrowserStack is that you can test in Internet Explorer. There’s no need to download an IE-specific tool.
Device/OS
Screenfly
Test your website on different devices and different screen resolutions, with Screenfly. Screen resolution is important to test because of how pixels are rendered on screen. Even if a website visitor is viewing on a larger, high-definition screen, the site may render as if it were being displayed on a smaller screen. Screenfly refers to the rendered resolution, so you can test how your website will actually appear. Screenfly is able to mimic different devices using their proxy server. Keep in mind that it can’t replicate extra features of a device, such as zoom, so human testing on actual devices is always a good idea.
Google’s Mobile-Friendly Test
Google’s search algorithm continues to improve and include mobile-friendliness in their ranking parameters. Google’s Mobile-Friendly Test analyzes whether your website page’s design is mobile friendly. It’s important to know whether Google deems your site mobile friendly or not, because they now label search results as mobile-friendly if they meet the requirements. If you have some improvements to make after testing, check out Google’s guide to mobile-friendly websites.
Security Testing
Securi
If you’re going to have a credible website, it must be free of any security threats or warnings. With Securi’s SiteCheck scanner, you can screen your website for malware, blacklisting status, website errors, and more. You can schedule regular scans of your site to ensure it stays up-to-date and opt to receive email, Twitter, or RSS alerts should something change. If Securi detects malware on your system, they’ll take care of it for you, so you can have a clean site without any additional work.
Scan My Server
Scan My Server is a free tool to test your website and server for malware, SQL injection, XSS and other vulnerabilities. This malware scanner is simpler to use than others as you don’t need to download any software to run the tests and you don’t need a password to get into the program. Once Scan My Server does just its job, it will provide you a detailed report on the security state of your website or server.
Performance/Speed
Google’s PageSpeed Insights
Google quickly scans and analyzes your website content for speed and performance. PageSpeed Insights will make recommendations on how to make your web pages faster, so you can address any user experience issues before launch.
GTMetrix
GTMetrix is similar to PageSpeed insights in that it analyzes your website speed and provides recommendations around how to improve it. You can schedule GTMetrix to run reports every day, week, or month, to ensure you’re always on top of the current UX of your site. You can even receive real-time email alerts if something changes, such as PageSpeed score, page load time, and page size. If you’re stumped on why a page is loading slowly, you can take a video of the page load and view it at a slower speed to determine what the problem could be stemming from.
Accessibility
Web Accessibility Evaluation Tools List
Keeping your website in line with W3C Web Content Accessibility Guidelines, along with Section 508 and Americans with Disabilities (ADA) standards ensures your website is fully accessible (and for some organizations, compliant). To help you make that happen, W3C offers a list of tools to evaluate and improve your website. From color to text to every compliance category in between, this list will have you covered. There are more than 100 tools, but you likely won’t need all of the tools on the list. You’ll have to scan through and determine which tools will help your developer get the compliance answers they need.
WAVE
One of the tools on W3C’s evaluation tools list is WAVE, a Web Accessibility Evaluation Tool. The tool runs within the browser, as a Chrome extension or as a stand-alone API. WAVE will take a URL or content from a page and provide a report on accessibility. If you don’t want to sort through a long list of tools, this one is a good one starting point. The Chrome extension is the simplest method of generating the report. The extension icon will live in your browser address bar, so all you have to do to run a report is press WAVE’s icon. The reporting is also secure and private, so your results won’t be available to anyone else but you, not even WAVE.
Social Media
Twitter Card Validator
Sharing your website through social media is a useful strategy for getting your content out to your audience. Twitter Card Validator displays what your website will look like when shared through Twitter. Getting a preview allows you to make any desired changes to the Twitter Card code before your site goes live or before anyone shares your site on Twitter.
Facebook OpenGraph Object Debugger
This tool is Facebook’s version of Twitter’s validator. Facebook OpenGraph Object Debugger shows you what a post will look like when someone shares your website through the social network. Just as with the Twitter tool, this allows you to make any changes to the way your site appears on a social network. It also allows you to refresh the information Facebook has cached for your site so users don’t see outdated information in the Facebook preview.
Bonus: Email
Litmus
Websites aren’t the only important digital efforts to test. It’s just as key to test your HTML emails before sending them out to your audience. Litmus is a powerful tool to test emails on different apps and devices. It also offers a full range of tools beyond cross-client testing. Use their unique code editor specifically to build emails, email performance checklist to minimize errors, and spam testing to ensure your email actually makes it to inboxes.You can also get email analytics and answers to email questions from a community of experts to further optimize your email marketing efforts.
Optimizing your website for your audience doesn’t end at the QA and testing phase. You should always ensure your website provides an optimal user experience for your visitors. Consider performing A/B tests once your site is launched to tweak headlines, colors, or other single elements of your website. You could also do a phased approach to your website launch, based off of results from UX testing. Certain sites, such as UserTesting, have real people answer questions and provide feedback about your website, so you can continue to improve the true website experience long after launch.
