Tuesday, 18 June 2013

Browser testing - why should I test my web site?

The Big Five Browsers
One of the more frustrating things about website development is the ever landscape of web browsers. Each browser, and each new version, brings it's own challenges and despite web standards there is no one single approach to code that is guaranteed to work on every browser. So unless you test on multiple versions of multiple browsers, and on different platforms, the chances are that your web site won't work as you intend for all your visitors.

Things have improved over the last couple of years, since the release of Internet Explorer Microsoft have been much more standards compliant, but even so there are still some design elements of coding that are supported in a unique way. With Internet Explorer 10 we have now discovered that many of our tricks to single out the various versions of Internet Explorer no longer work.

Firefox, Safari and Opera are all pretty similar in how they display web pages, and there usually isn't much difference in display using Google Chrome - although we recently discovered a slight quirk on one client site which made our navigation mysteriously drop a level on the final element. Generally it seems to be the case that if the site displays correctly in one version of Firefox, Safari, or Opera it will work correctly in the other versions - unless you are using a particularly old browser version.

The story is completely different with Internet Explorer. Internet Explorer 6 is very basic with it's support of various technologies, and can be one of the most difficult browsers to work with. Internet Explorer 7 is a slight improvement, but still retains some of the quirks of the older version. Internet Explorer 8 was the most standards compliant browser from Microsoft, but still had its quirks and now we have to accommodate the differences of Internet Explorer 9 and 10. As a web developer this makes life challenging, and there are tricks that we can use to target these browsers. The biggest difference between Internet Explorer and other browsers is well documented and known as 'The Box Model' and relates to the way that the browsers handle padding and margin. This seems to have improved with later versions, but can still be an issue.

Even with standards compliant browsers, not all elements of design and layout are described in the same manner in these browsers - if you are using CSS drop shadows, gradients, rounded corners and some text effects, you will have to write multiple versions of the code to cope with the different browser bases: One for Mozilla, one for webkit browsers, one for old versions of Internet Explorer, one for Internet Explorer 9, and one for Internet Explorer 10.

Take as an example a simple gradient background that goes from one shade of blue to another. To provide support for all browsers you need to use the following code:
background: #1e5799; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
To support Internet Explorer 9 we have to generate a dynamic SVG image on the fly, we have to add filter code for Internet Explorer 6-8, and various versions of gradient code for the different browser code types. And, of course, we have to provide a solid colour for any browser that doesn't support the gradient code. A lot of code, and a lot of work, for a simple background. And this complex code highlights why it is so very important to test your web site on as many browsers as you can.

So how do you test on multiple browsers? With Firefox, Chrome and Opera you can easily install different versions of the browser - just make sure that you install to a different folder on your hard drive. For Internet Explorer and Safari this is not possible, and my solution has been to install Oracle VirtualBox on a spare laptop and set up various Virtual Machines running Windows XP and various older versions of the main browsers. I also run the beta of Windows 8 with Internet Explorer 9 on a Virtual Machine on this laptop.

Browser testing doesn't end here though, not only do web sites need to be tested on the main browsers on Windows but also need testing on Mac, Linux and mobile devices. For our testing purposes we have an old eMac in the office, with a wide variety of browsers installed. We also use Firefox and Opera on our Ubuntu development server, and we have an HTC Android smartphone and an iPad.

As you can see, coding a web site is not just a simple case of writing some HTML, a bit of CSS and sticking in the content. After all that is done and working in your chosen development browser (we use Firefox as it may be the most standards compliant browser), a lot of time and effort must be put in to cross-browser, cross-platform testing. It's worthwhile having a pad and paper to hand as you test so you can note anything that doesn't quite sit correctly.

Check out our Useful Links page for cross-browser, cross-platform, development resources including a number of CSS generator tools.