If you regularly visit my website or blog you will have noticed that I have made some changes ( and one reason why I haven’t blogged as much as I used to over the last two months). Before I allowed myself to take my local site to the live server I had to do some basic testing and every website should go through this same process to ensure as few problems occur so your users can enjoy your experience to its fullest and also make sure your business looks professional. In this blog post, I will discuss 5 areas that must be tested before you allow yourself to let the website into the public domain.
1. Visual design testing
When designing a website it is imperative that as a designer we consider ALL possible users that may be visiting your site and this includes the visually impaired. This does not mean the person visiting is necessarily completely blind but may have visual impairments of colour blindness, partly sightedness, short-sightedness or other visual disabilities. A way to see how a visually impaired person will see your website is to take a screenshot of your website and do the following: –
Testing a Website With The Colour Blindness Test
Take a screenshot and open it in photoshop. Then desaturate your image of all colours by going to the edit image > adjustments > desaturate.
This allows you to see how a colour blind person may see your website. Now, is the text still legible or does it blend into the background? Is there enough contrast between colours? Does any element get affected with no colour?
Next, revert the image back to the original colours and instead flip it on its head. Now you will need to check for visual hierarchy. Is there anything that looks out of place? Is there anything that could be improved?
Following this, again, revert the image back to its original position and instead choose to use filter > blur > …gaussian blur and blur the image with varying levels of blur. This is the effect of what someone who is partially sighted might see. Can you still read the text? Is there enough clarity of icons and letters?
Repeat this for all of your different pages until you are happy it is all at a level that you would happy for someone with visual impairments to use.
W3C Testing
Now you have tested the visual hierarchy and accessibility of your website next you need to put your code through W3C Standard testing. W3C allow you to test your code to make sure it follows standards expected across the globe. Use the Validator of W3 to ensure your code doesn’t have any errors or glitches that may hamper the speed performance of your site or possibly not work on all browsers so you can make some changes.
An alternative validator for checking the CSS of a website can be found here.
Checking on real-life devices
Checking your website on real-life browsers from internet explorer of joy to Google Chrome and Android Phones is really important if you care about your users and customers. A website should work seamlessly on all devices so however someone accesses your website they can navigate freely and easily. There are various ways you can test a websites browsers compatibility. One is through Google Chrome Dev Tools another is through a website called browserstack.com that allows you to see your website on different devices and if any code needs to be adjusted so that it renders as expected or as close to as it is expected to for all browser users.
Keep in mind when testing browsers it is almost impossible to make it identical in every browser so don’t beat yourself down just try your best to make it as close to the design as you hope it to be .browserstack.com
Checking SEO settings
Lastly, if your website is a redesign, is important to ensure your website’s SEO and authority doesn’t take a nosedive.
To ensure that it doesn’t you should ensure the following: –
Ensure the heading structure of each page follows the guidelines that search engines spiders need to know what a webpage is you need to follow the hierarchy. So at the top of a page is heading 1, the most powerful heading tag and the main overview of the page, then we have heading 2, I use this quite regularly as subheadings to each section and then heading 3 for maybe a small conclusion title. Also ensure your alt tags on images are correctly labelled to make it as easy as possible to index your pages.
Meta Descriptions are the little bits of information that appear in search engines to try and entice the searcher to click on your link. You need to make sure this has your keyword in and that it has a call to action to make clicking your website a no brainer.
Links change on a website when you redesign a site so you might need to create some 301 redirects to avoid people that have bookmarked your pages landing on 404 pages, which can lead to a bad user experience. Also, check that your links that are broken are pointing to the right location after the move so again, no user sees you as unprofessional or worse.
Testing a website once it is live
Lastly, but not least, maybe the most important element of letting a website go live is testing once it is live. It is best you find errors before your users or search engine spiders do otherwise they may get a bad impression and never come back! Now that would be bad! Check your links, check your images are displaying, check heading structures and all of the above to ensure that your website going live doesn’t just excite but carries on growing as all websites should.
How do you go about testing your website before letting it go live? Please leave a comment in the box below.