A Comprehensive Guide to Website Testing

Let's say you built a new website. It looks good, and you're happy with it, and your clients are happy about it too. Fantastic!

But before you launch it for the whole world to see, how are you to know if you've made a mistake? Did you forget to remove placeholder content somewhere? Or miss a bug that will cripple your visitors' experience?

If you want your website to be tip-top, there is no way around it: you must test it!

In this guide, you'll find everything you need to know to start testing your sites. Clear instructions, battle-tested tools, curated resources and more await in the lines below.

So what are you waiting for? Jump in and give your visitors the high-quality browsing experience they deserve!

Before you start testing

Define the scope of your project

Testing a website without defining a scope is sure to cause never-ending changes. And never-ending changes are sure to cause tensions.

To avoid that, take a few minutes to think about each of the key points below. This will help you define ahead of time which types of issues you must resolve, and which types you can ignore.

If you're working with a team, make sure you do this part together. You may have different perspectives, opinions and knowledge. Unifying these early on will help you avoid problems later on.

‍

Deadlines

You don't want to find yourself having to launch when you haven't yet tested your most important pages.

So before you get started with the testing, you need to know what your deadlines are.

Here are some questions to kick-start your discussion on that topic:

• When do you need to launch the site?
• Can you push back the launch if need be?
• Does someone have to approve the changes you make? If so, how long will that take? Should you plan time in case they request more changes at that point?
• If you run out of time, can you do more changes after the launch?

You should also discuss any other factors that may affect your deadlines.

Defining the deadlines ahead of time will help you define how much testing you'll be able to do. Once that's known, you can set priorities and plan accordingly.

‍

Target audience

A website selling skateboards will be different than a site about retirement pensions. They have completely different purposes and audiences.

With different audiences and purposes come different expectations and requirements. Knowing your audience is important. It will help you make good decisions for the user experience when testing.

Here are a few examples of questions you may want to ask yourself:

• Is the audience tech-savvy?
• Are they looking to buy something or to get information?
• Do they know what they're looking for, or do you need to help them find it?
• Do they have the same vocabulary? (ex.: they look for "oak trees" while you use the term "Quercus Fagaceae").

Answering such questions will help you understand if your design and UX are appropriate.

‍

Client expectations

Even if you know the audience well, your clients may have extra requirements that you didn't think of.

They may have special accessibility and/or user privacy needs. They may need special features that are specific to their industry. They may need to have legal notices on certain pages.

Oftentimes, clients provide these requirements early on in the project's lifecycle. But they may have forgotten - or perhaps you have!

Make sure you are aware of these requirements before you start testing and implementing changes.

‍

Laws and regulations

The last thing you want is to get your client sued (or to get sued yourself). To prevent that, you have to be aware of the legal requirements for the website you build.

There are many basic laws and regulations for web development. Elementor's Starting Guide to Legal Compliance offers guidance on the most popular ones.

You should also be aware of any industry-specific laws that apply. If you're not sure, make sure to ask your client(s). If they aren't sure, recommend that they contact an attorney to learn more about it.

‍

Define clear roles for team members

If your team doesn't have a testing process in place, make sure you define clear roles for who does what.

Here are a few questions to help you define the roles:

• Will one person test the entire site, or will you split the testing among many people?
• Will the person who tests the website also fix the issues they notice? Or should they report them to the team to get them fixed?
• How will you keep track of the changes you make during the testing process? Should you inform someone about them?

What should I test?

Now that you've established the scope of the tests for your project, it's time to start testing!

First off, every page on your site should load without any blatant errors. Okay, you probably did not need our guide to figure that part out.

Here is a comprehensive list of things you should test your websites for.

‍

First impression

When visitors first come to your site, you have about 10 seconds to capture their interest.

If your website does not clearly communicate what it's about and how it can help the visitors, you're toast. End of story. Goodbye!

There are countless guides on how to improve your landing pages, but here is a quick summary:

• Clearly state what your website is about, in a way that your target audience will understand right away.
• Keep things simple: too many options and attention-grabbing elements can confuse visitors.
• Have a clear call to action to guide your visitors.
• Avoid popups, overlays, prompts, flashing chat boxes, etc.

‍

Content

Writing great content and formatting it for the web can be tricky.

Here are a few guidelines to make sure your pages present content that is helpful to users and that they will read it:

• The content is formatted into easily scannable chunks, with short paragraphs, (sub)headings, lists, etc.
• Each page starts with the most important piece(s) of information.
• Every piece of content serves a purpose: there is no filler content.
• The content is free of typos, grammatical errors, etc.

About that last point: you might have heard that pages need a certain word count to be "good". But that's a bit misleading.

Your website's content is only good if it helps your target audience. If you can provide the same amount of value with fewer, simpler words, you should do that. Write your content for humans, not search engine algorithms.

‍

Navigation

So you have good content. Awesome! 

But... can your visitors find it?

Ensuring your visitors can easily navigate through your site to find the information they're looking for is key.

To get started, here are a few things you should verify:

• The logo in the header links to the homepage.
• The navigation contains links to all of the main pages and sections of your site.
• Every link in the navigation works correctly and leads to the right place.
• Dropdown menus and mega menus work as intended.
• The mobile/tablet menu button (often referred to as the "hamburger" button) opens the navigation when it is clicked or tapped.

Searchability

Not every website has or needs a search feature. But most common CMS, such as WordPress, Webflow and Shopify offer search functionalities.

If your site has many pages containing lots of information on various topics, it could likely benefit from being searchable.

If you do offer search features, here are a few more things you should ensure:

• All relevant types of content are indexed in your search engine.
• Search results are appropriate and sorted based on relevancy and/or closest matches.
• Typos, accented characters, capitalization and pluralization in search queries still result in appropriate results.
• Your results page clearly indicates when no results are found, and suggests alternatives.

‍

Design

Design is very subjective: what pleases one person may be despised by another.

Despite that, here are a few design guidelines that will provide a better user experience:

• Photos and images on each page convey relevant information (i.e. avoid useless stock images).
• Clickable elements (links, buttons, paginations, etc.) have clear visual indicators showing that they can be clicked.
• The icons used on the website are either standard and immediately recognizable or are accompanied by a text label.
• Empty states are designed and implemented for all lists that could potentially be empty.

Additionally, if you have a large website with lots of pages, products and/or articles, you should ensure that visited links are displayed in a different colour or style in order to look "used".

‍

Usability

Even a well-designed site with good content can push visitors away if it's riddled with annoying bugs and usability issues.

We don't know exactly what your website contains in terms of interactive elements, but here are a few things to ensure when testing:

• Every link on the website works as intended (W3C's Link Checker can help find dead links, but only a human can check if a linked page actually matches the link's label/intent).
• Information that only appears on hover is adapted on touchscreens such as mobiles and tablets (learn more about this by reading Cíntia's article: Mobile doesn't have hover, dude!).
• Audio and video players do not start automatically on page load.
• In-page tabs work as intended, and each tab's content matches the tab's label.
• Carousels, slideshows, embedded maps, and all other widgets are working as intended.
  

‍

Forms

Online forms are incredibly useful for businesses and site owners.

But when they're done wrong, forms can easily become the number one pain point for your visitors.

Make sure the following points are respected in every form, and you should be in a pretty good state.

Content and layout

• Every form asks for as little information as possible.
• Forms are presented in a single column (unless fields are very closely coupled... and even then, exercise caution).

Form fields

• Required fields are marked as such in every form.
• Labels are close to the fields they describe.
• Labels are not displayed as placeholders within inputs.
• In longer forms, related fields are grouped together.
• Each field uses the right type of input and is sized according to its expected value.
• Fields with requirements or limitations have their instructions clearly explained as help text under the field's label.

Form errors

• Error messages provide clear indications of what is incorrect and of how it can be fixed.
• Error messages in forms are placed right next to the field containing the error.

Form submissions

• Forms are protected from spam bots (see reCAPTCHA vs hCAPTCHA vs Friendly Captcha).
• Forms display or redirect to a success message when they are submitted.
• Form submissions trigger some sort of communication with the person responsible for the website or the form.

I've seen issues with the latter happen so often that I will repeat it once more, just to make sure it's not forgotten:

Form submissions trigger some sort of communication with the person responsible for the website or the form.

This means your form should send an email or a text message, or be submitted to a CRM. The person on the receiving end must be made aware that a new form submission came in!

There is nothing more annoying for all parties than form submissions not being received by the person who's responsible for them. Visitors get no answer, and site owners get a bad rap for something that is often not their fault. So please, as a personal favour to me, make sure you test this for every form!

‍

Responsive

Depending on your target audience, the devices from which they browse your site will vary a lot.

But in most cases, you can expect the majority of your traffic to come from mobile devices and tablets.

That's why testing your site on a variety of devices is key to ensuring that your visitors get the best experience possible, no matter what device they use.

Here is a list of devices and resolutions we recommend you test your site on:

• A Chromium browser (Google Chrome, Microsoft Edge, Opera, Arc, etc)
• Firefox
• Safari
• Mobile devices of various sizes (e.g. iPhone, iPhone Pro Max, iPhone SE, etc.)
• Tablets of various sizes (ex.: iPad, iPad Pro, iPad Mini)

If you know some of your visitors use a specific device that isn't listed above, make sure to test it as well!

When testing on phones and tablets, make sure you test on both device orientations (portrait and landscape).

That's a lot of devices!

The most efficient way to do this is to own a wide range of devices and to test your websites on those devices. But as you can guess, it can quickly get complicated and costly.

If you don't want to do that, you can test your website with BrowserStack. Their service allows you to interact with real devices of just about any kind: iPhones, iPads, Android phones and tablets, MacBooks, and more.

Although testing with a service like BrowserStack isn't as smooth and responsive as testing on your own devices, it is still incredibly helpful as it allows you to detect problems on devices and browsers you do not have access to.

‍

Browser compatibility

Now that Internet Explorer is retired, browser compatibility is much easier than it was before.

But that does not mean it's not worth testing!

There are still many different browsers in use today:

• Firefox
• Safari (iOS Safari and macOS Safari)
• Chromium-based browsers (Chrome, Edge, Opera, Arc, Samsung Internet, and more).

These browsers all differ from one another. An easy way to see how much they differ is to look at CanIUse's Browser Comparison.

Even the Chromium-based browsers differ from one another depending on the version of Chromium they use and the browser-specific implementations they provide.

This is why testing on every major browser, as well as any other browsers your visitors are likely to use, is important.

Here is a list of browsers and devices we recommend you test your site on:

• A Chromium browser (Google Chrome, Microsoft Edge, Opera, Arc, etc)
• Firefox
• Safari
• iPhone (iOS Safari)
• Android mobile device (Chrome, Samsung Internet)

Just like testing for responsive design, using BrowserStack to test on devices and browsers that you do not own can be incredibly helpful.

‍

Social

There's no denying that social networks are a big part of most people's life nowadays.

To make the most of that, make sure your website looks good when it's shared on social media, and that your social media channels can easily be found on your website:

• Every public page has an og:image meta tag with an image that represents the page/article.
• Every public page has an og:title meta tag with the page/article's title formatted for social media previews.
• Every public page has an og:description meta tag with a short and appealing snippet describing the page.
• Every public page has an og:url meta tag with the page's canonical URL.
• Every public page has a twitter:card meta tag indicating the type of card to use for display on Twitter (learn more about Twitter Cards).
• The website's footer (or header) contains links to the brand's main social media accounts.

To learn more about this, take a look at our Social Media optimization page.

‍

Accessibility

To quote the W3C:

Web accessibility means that people with disabilities can equally perceive, understand, navigate, and interact with websites and tools. It also means that they can contribute equally without barriers.

Making sure your website can be used by everyone is simply the right thing to do.

Plus, depending on your type of organization, your location, your audience and/or the locations from which your site is accessible, you may have to comply with certain web accessibility laws and regulations. The W3C has a great tool to find accessibility laws and policies that apply to you.

In any case, here are a few basic guidelines to ensure a minimal level of accessibility for your website:

• Pages use <h1>-<h6> heading tags to organize the structure of the content.
• Elements use semantic HTML whenever possible (e.g. using <section> or <article> instead of <div class="section"> or <div class="article">)
• Every image that conveys information or context provides a textual alternative via the alt attribute.
• Every decorative image has an empty alt attribute, indicating that it is not relevant to the content of the page.
• Every page can be navigated logically using only the keyboard.

Accessibility is a very vast subject, and these are just a few pointers to get you started.

To learn more about accessibility, check out our Accessibility page: you'll find short explanations on the subject and great resources for accessibility testing.

‍

On-site SEO

Search engine optimization is a field of its own, and it can become pretty complex if you dive into it head first

SEO is no different than most of the other sections in this article, there is a myriad of things that can be done to improve your site.

Here are the essential things to test for on-site SEO:

• Every page has a <title> tag with a unique title (if possible, keep it around 50–60 characters).
• Every page has a short meta description that tells users what they can expect from the page.
• Every page has a simple URL that is easy to read and understand (i.e. real words, not numbers or random characters!).
• Every page defines its canonical URL.
• Every page loads in less than 3 seconds (more about this below).
• Old URLs that have been renamed or removed are redirected to their new location via 301 redirects (and have been tested).
• Alternative domain names redirect to your primary domain name (e.g. mywebsite.com and www.mywebsite.com, or mywebsite.ca and mywebsite.com).
• The robots.txt file allows search engines to crawl all public pages.

Once these checks have been done, your site has its SEO basics covered. But as we said, there's a lot more to SEO than what we covered in this list, and it can be a good skill to have if you're building many websites for clients.

If you want to go further, we recommend you take a look at Moz's Guide to SEO.

‍

Loading speed

As stated earlier in this article, you only have about 10 seconds to convince your users that your site is worth visiting.

If your page takes 7 seconds just to load and become interactive, that leaves very little time for you to convince people.

Plus, making sure your pages load and become usable quickly improves your users' experience, which should be your #1 goal.

Here are some of the main things you should look at to improve your page speeds:

• Every image is sized appropriately and optimized.
• Render-blocking JavaScript is removed, deferred, or executed in a web worker.
• Render-blocking stylesheets are reduced as much as possible.
• CSS, Javascript and HTML are minified.
• Browser caching is enabled.
• Compression is enabled.
• Unnecessary redirects are eliminated.
• Your server has adequate resources and configurations to handle your traffic (reducing server response time).

To start testing your website's loading speeds, check out our Loading Speed page. ‍

Moz's write-up on Page Speed can also be a good place to start if you want more information about improving Page Speed.

‍

Security

Most of us have seen or heard about sites that got hacked or imitated by bad actors, or of user information being stolen and sold online.

These guidelines will help you reach a basic level of security for your site:

• An SSL certificate is set up and configured for auto-renewal.
• Requests to non-HTTPS URLs are redirected to HTTPS.
• A Content Security Policy is set up on the site to prevent script and data injection.
• The x-frame-options header is configured to prevent click-jacking attacks.
• Website backups are set up and configured to run frequently.

If your site manages any information about your visitors or users, especially personal information, you should make sure to apply best practices in your development and to vet the libraries, services and vendors you use to ensure that they are secure as well. Neglecting to do so may result in fines and legal trouble, so it's worth taking the time to learn about beforehand.

‍

Editability

If the website you built will be managed by someone else, they need to be able to edit it.

That's not gonna be a problem: the site is built with a CMS!

Are you ready to hear the bad news?

If you do not make any special effort to make using the CMS easy and intuitive, you'll find that most clients will have a hard time using it.

And when people have a hard time using a CMS, the likelihood of the website breaking skyrockets. 💥

So you have to put in some effort to make it more intuitive for your clients. But how?

Here are a few tips to guide you:

• Keep in mind that your users are likely not tech-savvy.
• Keep in mind that new people are likely to take over the website management role without receiving much training (if any).
• Be consistent when naming things. Using two different words to mean the same thing can be confusing.
• Name things using your client's vocabulary, not yours.
• Disable and/or hide sections, features and links that are irrelevant to your clients.
• Add guardrails where possible: validating client inputs and actions can prevent the majority of issues that commonly "break" websites.
• Guide your clients: if your CMS allows you to add help text, use that to provide context and clarifications.

These tips may seem simple, but stick to them! Use every opportunity your CMS gives you to make the admin experience better, and it will most definitely pay off.

It's also important to note that some platforms have a better user experience for their administrators than others:

• Wordpress's admin panel is known for becoming increasingly bloated and confusing with every plugin you add. This can be improved by reducing the number of plugins you use and by hiding unnecessary sections and navigation links with plugins or custom code.
• Shopify's basic features are easy to use, but third-party applications often come with their own management interfaces which aren't always as straightforward or intuitive. This can be improved by researching and testing different apps to find the one with the simplest interfaces and workflows.
• Webflow's Editor does a great job of keeping things simple and intuitive for clients, as long as you adequately name your collections and pages.

Improving your client's experience will not only make them happier: it also reduces the number of support requests you receive from them. It's a win-win! ✨

‍

Analytics

If you want to get some data about how your site is doing after you launch, you should set up some sort of Analytics service.

The most commonly used platform for this is Google Analytics. But Google Analytics is already illegal in some EU countries, and will likely be ruled illegal in many others in the future unless they take a sudden turn.

At Koalati, we recommend you analyze your analytics needs and go with a privacy-friendly alternative like Plausible or Fathom. You can also browse a more complete list of Google Analytics alternatives.

‍

A few more things...

These last few things might not be as crucial as the rest, but they're good to test for as well:

• The website has a working favicon that matches the brand.
• The 404 (Not Found) error page matches your brand and contains link(s) to the website.
• The site's system and plugins can be updated safely and easily without major risk of breakage.

‍

And... that's it! You're done!

Congratulations, you have thoroughly tested your site and are ready for launch! 🎉