Perform cross browser testing

To ensure your website works for as many users as possible, we recommend testing your website across a multitude of desktop and mobile browsers. Some of the main browsers to test with include Mozilla Firefox, Google Chrome, Apple Safari, Microsoft Edge and Internet Explorer.  
There are many tools available to assist you, such as Browserstack, where over 700+ desktop browsers are supported, as well as local testing and a variety of screen resolutions.

Use Google Development Tools

Using Google’s DevTools is a great way to get under the hood of your website and capture data relevant to the problems you’ve discovered, whilst testing your website.
These tools give you access to the code for individual pages, including the page structure and styles applied with HTML and CSS. For example, if a hover state on a button is not working or images are missing from a page, then we can see why by inspecting the elements of the web page and applying a fix there and then.
Google Chrome analyses runtime performance, so if your page is slow you can see a record of everything that has been delivered to your browser and analyse the results to seek opportunities for page speed optimisations.

Think about your users

How do you want your users to interact with your website? As you test your product, be sure to detach yourself from being the “maker” and try to enter the mindset of the user. Often, people want to find your website, view the data and take something away from it, whether that be a purchase or information.
By thinking of the different ways your customers can interact with your website and what journeys they will navigate through, you can focus on making simple user journeys from start to finish that are easy to use and function well.

Enter complex test data

Dummy text such as Lorem Ipsum is a great way to test for character limitations and form submissions. To take this to another level, try adding numbers and symbols in your form before submitting it. For example, when entering a name turn this into a hyphenated name; and when entering an age, try entering a decimal place and continue to think this way when testing fields across your website. This is one of the most effective ways of finding errors in your forms before your users do.

Use browser extensions

Some of the most helpful browser extensions we’ve used here at Hallam are listed below, so you can use these to speed up your testing process, and find things that you may not find without having them by your side:

  • Page Insights: This helps you to identify technical issues whilst testing your website. Any time you visit a page, the extension will report any issues it discovers, such as missing h1 tags or missing meta descriptions.
  • WhatFont: This extension allows you to easily find out what fonts your webpage is using. Simply click on the typography and see the font-family, style, weight, size, line height and colour all listed for you. Compare this with your designs and you’ve found a simple way to test the font of your web pages.
  • Site-Improve Accessibility Checker: This tool gives you an overview of accessibility issues on your website with clear explanations of how this affects your users, and recommendations of how to fix them.
  • PageRuler: This allows you to draw out a ruler across your web page and view the width, height, top, bottom, left and right positions. It’s useful for finding where your content is becoming misaligned, and where new breakpoints need to be included.

All of these browser extensions are for Google Chrome and they can be found here. Be sure to experiment with these and search for others that can contribute to the quality of your products. If you’re using a different web browser you can search for similar or matching extensions within the browser of your choice.