100
Lost something?
Who writes here?

Arian Simon

Web Designer - Business Owner - Entrepreneur who makes happy little mistakes.

Read more about me

BLOG POST

Website Test: How To Verify Everything Goes According To Plan

One of the most important points I learned is to test. No matter if software, websites or anything else. There is no bug free system. And you will never achieve one. However you can make it as bug free as possible. And your visitors will thank you with increased engagement.

Website Test Overview

There are a couple of things you should regularly check on your live website. And even more you will achieve your best results when you follow a plan: your test plan. While there are even certifications on software testing (I’m ISTQB and IREB certified) I’ll keep it simple and on point.

Website Testing Tools

For each test explained I will suggest tools that help you set up and execute your tests. Feel free to recommend your own tools in the comments.

Website Test Plan

A website test plan determines when, what and how you test your website. At least you should have a rough idea how you will test your website. In nearly all cases you should take special care of interfaces. Interfaces between tools statistically provide the greatest error potential.

Website Testing Checklist

Another useful tool is your checklist which can be part of your test plan. Use it to systematically test yourself through your website. This way you are less likely to miss important functions and features.

Website Responsive Test

Responsiveness describes the ability of a website to align content dynamically dependent on your device’s screen size. The reason is to provide a great experience on all different devices. Previously users fought with small text and pictures on not optimized websites. The following screenshot shows typical responsive behavior. Note the different menus.
Responsive Website Test

There is one easy test you can do right now: Drag your browser window and make it smaller. You only need to drag it from right to left as most websites calculate responsiveness dependent on browser window width. Responsive websites will align the content to be easily accessible and readable on small screen sizes.

Tools: Google Mobile Friendly Testresponsivetest.net

Mobile Website Test

Of course there is no better test than to grap your smartphone and visit the site you want to test. If you are a bit lazy and your smartphone is too far away you can emulate several smartphones with little effort in chrome too. Right click somewhere on your website. Select “Inspect Element”. Click on the Smartphone Icon seen in the following screenshot.

Mobile Test Google Chrome

Now select your device in the left upper corner and reload the page. Voila!

Select Device For Mobile Test

Website Browser Test

As if different screen size wouldn’t be effort enough, you should also check for different browsers. The more complex a website, the higher the chance that it will behave differently dependent on the browser in use. Luckily there are a couple of tools that make our lives easier. My personal favorite is saucelabs.com. Of course, if you have all the different operating systems and browsers ready, you can just do it on your own devices. May even save you time and money. Most important browsers: Chrome, Firefox, Internet Explorer, Safari.

Tools: saucelabs.combrowserstack.combrowsershots.org

Website Speed Test

Another key factor is your website’s loading time. The faster the more it will be liked by your visitors and also search engines – remember: search engines like what their users like! To provide reliable results you should do all your tests from one source (to make them comparable). Even better if you can get data on other websites from this source too (to have even more insights on how fast your website loads).

Tools: Pingdom, WebPageTest, GTmetrix

Technical Tests

Technical tests are important to ensure your website is readable by search engines and behaves like you want it to behave.

SEO Tools: OnPage.org, Sistrix, Xovi

Code Tools: CSS Validator, HTML (W3) ValidatorGoogle PageSpeed Insights

A/B Testing

You are not sure if your visitors like your buttons in blue or in red? Use A/B Testing to get verifiable feedback! Visitor A will see a blue button and Visitor B will see the same button in red. As result you will get the amount of blue button clicks vs red button clicks (=conversion rate). Most A/B Tools do the setup and tracking out of the box.

Tools: Optimizely, Instapage

Summarizing

Tests are important to create loyal and happy visitors. Most of the time you can’t redo first impressions, so make sure your project is well tested.

Cheers,
Arian

2 thoughts on “Website Test: How To Verify Everything Goes According To Plan”

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest