Testing is very important in website development, how a website works can influence how the visitor interacts with the site, whether they will visit again or for an ecommerce site, make a purchase. This does not only include browser testing, but it also involves validating your code to ensure you are sticking to the standards, and ensuring your site is as accessable and usable as possible.

Code Validation

There are several code validation tools avaliable, if you prefer to use a website I recommend sticking with the W3C validator (http://validator.w3.org/) which provides you with a detailed list of any errors and warnings you have about your code. If you would prefer a plugin, the HTML Validator plugin for Firefox is the best I have found, it sits on your status bar and validates whatever page is open in your browser, upon clicking on it, it will show you exactly where the problem is so you can quickly remedy it, refresh and be happy in the knowledge your website is valid HTML code.

Desktop Browser Testing

The first decision to make is which method of testing is most suitable for your development environment. If you are using a computer using a single processor core then its unlikely you will be able to run virtual machines without driving your computer to a halt so you would probably be best off using online testing combined with an application like Spoon. If you are on a powerful computer you have the option to use virtual machines although this does require multiple licences of the host operating system (most likely Windows XP) to do this legally.

Online Testing

There are many solutions for testing websites if you are unable to use virtual machines, most of these require you to host the website somewhere and then provide a testing website a URL. One popular service for cross-browser testing online is BrowserShots, this enables you to test on many different operating system and browser combinations but unfortunately they do not provide testing on the Mac. This is an issue because browsers like Firefox render webpages slightly differently depending on the operating system.

Virtual Machines

A better option than online testing is using Virtual Machines, this enables you to test and debug your sites directly in a browser. The main disadvantage of this is that it can hog up system resources and slow down your computer. Ideally you should be running a computer with a large ammount of RAM for this to work well.

As there are many browsers out there it is important to choose the best combinations to test in which will most likely cover all bases. The following is what I do my tests on.

Internet Explorer 6 – Running in VM on Windows XP^
Internet Explorer 7 – Running in VM on Windows XP^
Internet Explorer 8 – Running in VM on Windows XP
Internet Explorer 8 – Running locally on Windows 7
Mozilla Firefox 3.6 – Running locally on Windows 7
Mozilla Firefox 3.6 – Running locally on a Mac OS X laptop
Safari 5 – Running locally on Windows 7 (Where possible we should have a Mac avaliable for testing)
Google Chrome 7.0 – Running locally on Windows 7

^Internet Explorer 6 & 7 are aging browsers which lack compatibility with alot of new technologies so support for these browsers should be scoped and decided if necessary.

Accessbility Testing

There are several ways you could carry out Accessibility testing, one way would be to test your website with various screen readers and see if your website still makes sense to the user. This is most likely not practical so the alternative is to use an accessibility checker such as WAVE which will check your website and advise you on how to improve the accessibility.

Other Tests

There are several things you should be considering when testing, how the website works with javascript disabled, how it looks with CSS disabled, what happens if the user has not got flash installed and how the website will look if Java is not installed or is disabled.

It is important that you always provide a fallback for all of these situations as you cannot expect users to have the same computer setup as you.

Fun Testing Tools

An interesting website that a work colleague told me about is How 90′s (http://how90s.com).  This will show whether you are using elements common in 90′s websites in your website.

I have long been a fan of the open source movement and have myself developed several projects with the intended purpose of making them open source but I until now I haven’t committed anything to any large projects, but today that has changed.

I made a small change to the HTML5 boilerplate template which I have just requested be incorporated into the main repository.

UPDATE: My change was accepted and is now part of the master branch of the project, I am now officially a contributor

I have been experimenting with HTML5 Boilerplate further and have found several interesting things which could be used separately from HTML5 boilerplate to help with your web development.

Internet Explorer fixes using classes

This has been my most interesting find, rather than include separate style sheets for each browser, boilerplate applies a class to the element based on the version of Internet Explorer the user is using.

The code that boilerplate implements is:

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->


The class can then be referenced in your main stylesheet, there are several advantages and disadvantages to this.

Advantages

• No additional stylesheets to load
• All the css remains in one file which keeps it easy to find

Disadvantages

• The stylesheet is longer meaning extra file size for all users

Overall this is a great idea but it would only be suited to websites that only have a few style corrections for the older versions of Internet Explorer otherwise we are adding extra overhead to people who do not use an old browser.

Highlight colour

Using CSS3 we are now able to change the colour that text is highlighted in when we select it, so rather than the default blue of Safari you are able to make the highlight colour more suit your site. An example of where this could be used is to make the highlight colour green on a website about the environment.

The CSS3 used to do this is:

::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}

Over the next couple of months I plan to post several tutorials based on what I have learnt from using HTML5 Boilerplate. I must thank both Paul Irish and Divya Manian for developing such an amazing template which all web developer should be looking at to learn lessons over how we can get started with HTML5 now.

The Tag Experiment

I decided to try using the HTML5 tags to try and limit the number of classes I would need to implement the design (shown below).

First I looked at the design and saw it consisted of 4 columns, one of which was the menu. I therefore decided to use the <menu> tag for the menu and the <section> tag for each of the columns. This allowed me to apply the following CSS to achieve a column based layout.

menu,section{
float:left;
}

To achieve the spacing between the columns I applied a padding to the left of the sections

section{
padding-left:22px;
}

I followed standard best practice building breadcrumbs and the menus as unordered lists and then he bulk of the content was built in a typical way using the correct headings where it was approriate.

To avoid additional markup I built the shopping basket simply as a <h2> for the top, a <ul> for the body and a <p> for the bottom. This also lends itself towards accessibility and looks good even with CSS disabled.

To ensure that the build matched the design as much as possible I used a took called PixelPerfect which is a plugin for firefox. Once setup I then used firebug to allow me nudge the elements and then I copied the changes to my stylesheet.

Conclusion

The design built worked well with boilerplate as it provided the basis to get me started on the website design without having to worry about implementing PNG fixes etc. Had I found I had browser compatibility issues with any of the internet explorer versions it provides you with a class to apply these changes to which removes the need for separate stylesheets, still its probably best practice to put all your IE styles together so if you decide to remove support for the older versions of IE at a later date you can quickly remove the extra css.

Link – http://www.jonathanfielding.com/experiments/html5/