By Nathan Donaldson
Tags: Design , Development
Cross-browser compatibility issues are the bane of web developers world-wide and in this ever shifting landscape it is important to have processes that integrate cross-browser testing in a robust and systematic way. Over the last 9 years we have evolved a robust workflow for web development and cross-browser testing is an integral part of this.
We start by constructing the HTML/CSS in a text editor (Textmate, RubyMine IDE or Aptana IDE) and viewing it in Firefox. We develop standards compliant HTML/CSS, so Firefox is a great starting point as it supports the CSS standards well and enables us to use a number of key tools including Pixel Perfect, YSlow and the Web Developer toolbar.
Once we are happy that the design is accurately implemented in Firefox we use Litmus to create screenshots across a selection of Browser/Operating System combinations. Litmus has a number of great features that really make this process easy. Firstly, you can retest the page with a simple button click and Litmus keeps track of the revisions, secondly Litmus uses the W3C validators to check that the HTML and CSS validate and links trough to the error pages and thirdly Litmus lets us indicate visually whether a particular combination is rendering correctly so we can keep track of what is complete and what remains.
Running the initial test in Litmus will usually through up a number of issues, especially in IE6 (suprise!). At this stage we move on to the target Browser/Operating system to correct the issues. More often than not this is a process of finding work-arounds for the poor standards support in IE6 and IE7 while still ensuring the the HTML/CSS validates and is semantically correct.
We iterate through the testing in Litmus and fixing problems on the target platform until we are happy that the design is working correctly across all platforms. We then use the publish option in Litmus to create publicly accessible version of the test to send through to our client. This enables our clients to be certain the design is rendering correctly across platforms. You can see an example test here: http://boost.litmusapp.com/pub/5125956
From here the HTML/CSS gets passed to a developer who integrates the HTML with the web application or content management system. This is where the utility of Litmus really shines. During this phase we use Litmus in the same way as we use Unit tests in our programming, to confirm that nothing is broken as we add features and develop the site. This is the key to consistent and successful projects, constant and consistent testing during the life-cycle of development.
The first step is entering the URL to test and choosing the Browser/Operating Systems. Once you have made your choice you can set this to be the default for further tests.
The second step is viewing the results. The overview screen gives an estimate of how long all tests will take to complete and the page updates as the tests complete. On the left side it shows the results of the HTML and CSS validation.
The third step is to check each of the individual results. At this stage we usually mark the ones that are passing and the ones that are failing to keep track of progress.
Below is a page that is not rendering correctly, and we mark this as incompatible.
Below is a page that is rendering correctly, and we mark this as compatible.
The final step is to publish the test and send the URL to the client, you can view the test here: http://boost.litmusapp.com/pub/5125956
