BLOG

Why Test a Website?

A website represents your (or your client's) business identity online. In order to make a great impression (and maximise ROI) it is vital to check that your website is functioning correctly and is usable for all visitors.

If everyone had identical operating systems, screen sizes and were all using the same browser, testing would be easy. Unfortunately this isn’t the case. Below are a few things to consider before making your website live.

Cross Browser Testing your website

It is possible that your website may appear differently in different web browsers. For example, your website may look perfect in Firefox, but when viewing it in Internet Explorer the layout could appear broken.

You should test your website in the following browsers:

• Firefox
• Internet Explorer
• Safari
• Google Chrome
• Opera

If you are having problems keeping your design to be consistent in multiple browsers, think about setting default padding and margins to all your basic html attributes in your CSS file. Browsers set their own default padding and margins for html elements that do not have margin or padding assigned. These default styles can differ with each browser.

Not only can different browsers display a website differently, but also various versions of each browser. For example how your browser looks in Internet Explorer 7 will not necessarily look the same in IE 8. Internet Explorer 6 is the most difficult browser to correct your website in, however luckily only about 2.86% of internet users use this as mentioned on W3 Counter. Transparent PNG images on your website in IE 6 may appear to be unusual sizes and not transparent. To prevent your PNGs appearing on your website at the incorrect size, make sure to set the width and height dimensions on your tag. A good resource to use for making your images transparent is twinhelix.com.

Checking your website using different Operating Systems

Once all of your cross browser testing is complete it's a good idea to check the layout and functionality in an alternative Operating System. For example, if you have built your website on a computer with Windows 7, try viewing it on a Mac. Macs may sometimes portray colours differently to Windows. If possible, also try it out on a different version of Windows such as Windows XP.

Testing Different Screen Sizes

Load up your website and resize your web browser to the following sizes:

• 1280 x 1024
• 1024 x 768
• 800 x 600

Is your website still easily usable at these sizes? Does the layout on your website remain the same? Think about people using laptops with small screens and accessing your website, can they access the majority of your website without large amounts of scrolling?

Checking links on the website

If you have built your website on a staging domain, check all your links are pointing to the live domain.

Check any emails on the website are set up as 'mailto:' links. Go through any links to linking to documents (e.g PDF's) to check these are loading correctly.

Once your website is live, a useful resource to check for broken links is Xenu’s Link Sleuth.

Check your website content is understandable with either CSS or JavaScript turned off.

Your users should still be able to view important content on your website with these disabled.

To disable CSS or JavaScript:

• Load up Internet Explorer.
• Under 'Tools' select 'development tools'.
• A tool bar will pop up along the bottom of your browser.
• Click 'Disable' and select either 'CSS' or 'Script'.

Check that your website has no JavaScript errors

If you have used JavaScript on your website, make sure to check for any errors. In Internet Explorer if there is a JavaScript error a little exclamation mark will appear on the bottom left hand side of your browser. An easier way to debug JavaScript errors is using FIREBUG (http://getfirebug.com/) in Firefox. This will help you to identify what is causing the error, something which is not always clear from the error notification in Internet Explorer.

Does the site look the same as the original design file?

Compare your original design file and your completed website to check they both look as symmetrical as possible.

Is the website using the same font as the design file? If the font used on the original design file is not a 'web friendly' font (view core web fonts as listed by Wikipedia) you can get around this by including files such as cufon or google web fonts.

Testing forms on your website

Valuable business can be lost if the forms you use on your website to capture visitor information are not working correctly.

Things to look at when testing your forms are:

• Are required and optional fields obvious?
• Are field names clear and understandable?
• Do your forms utilise user-friendly validation, just in case the user enters something wrong or misses a required field?
• Is your form sending an email with the visitor's information to the appropriate person?
• Is there a clear 'success' message once the user has submitted the form?
• Are automatic response emails (if any) being sent?

Testing any additional functionality

Make sure to check over all functionality on your website. For example, if there is a shopping cart on your website is it easy to add items to your checkout? After the user has added an item to the shopping basket, is it easy for them to continue shopping? Is it easy for them to get back to the checkout screen again without adding another item? It's a good idea to get someone with fresh eyes to look over the functionality of your shopping cart in order to check that everything is easy to use and is working as it shuold.

Page Redirects

If you are redesigning an existing website, make sure that any pages that will no longer be used from the current site are 301 redirecting to the appropriate pages on the new site. This way you can maintain your website's existing footprint in Google and any links to your old pages will automatically be redirected through to your new page, as opposed to returning a 404 page not found error.

XHTML & CSS validation

To ensure best coding practices you should use the following links to make sure your website is XHTML compliant and that your cascading style sheets are correct:

• http://validator.w3.org/ - XHTML Validator
• http://jigsaw.w3.org/css-validator/ - CSS Validator