Cross Browser Testing Sessions

The Joys of Web Standards

While developing our new templates we had to make sure that our markup is displayed in the correct way across multiple browsers, operating systems, screen sizes and screen resolutions.

Our company likes to support and use open web standards because they make sense and you know if a browser implements a said standard it will display the same regardless of the user agents platform (life is never that easy).

Standards

Testing on all these devices can be quite a task which normally involves some kludging and compromises in terms of layout and style as all rendering engines interpret markup differently or maybe they do not support it at all.

Testing Platforms

The requirements for testing can lead to needing quite an extensive testing platform so for our needs we used Mint Linux 13 (Maya), Ubuntu 13.04, Windows XP SP3, Windows 7 SP1 for PC. We could not test on a Windows 8 rig because we do not have a license for it currently but when we pick one up we will run our use cases on it.

Besides these operating system we decided to also run a bunch of use cases on some Android™ 4.1.2 and 4.0.3 devices and iOS 6.1.3 (iPhone and iPod) to make sure it displays correctly on handhelds using the default style sheets.

Droid

Our handheld devices were a Galaxy s3, HTC Sensation, Nexus 7, iPad 2nd generation, iPhone5 and a iPod 4th generation.

We run our operating systems on separate devices and also multi boot setups but you could use a virtual machine to run all these separate operating systems but that is beyond the scope of this article.

Web Browsers

Another consideration of ours was to compile a list of popular browsers and decide which we are going to use for testing. The obvious ones are Firefox (geko), Chrome (webkit), IE (trident) and Safari (webkit).

Once we had the list of browsers complied we had to decide which platform(s) to install the browser on and also which version of the browser to install.

Mozilla

We like to keep all the old Windows browsers on XP and more recent browser versions on Windows 7 it make more sense to use older ones on the older OS.

Also we sometimes use a program called IETester which allows you to use all IE rendering engines since IE5.5 up to IE10. This application is great for doing all your testing in one place and can make life a bit easier.

Chrome

You can also put Internet explorer into quirks mode using the button by the address bar this will make IE use the quirks rendering engine which can help with old web sites but I personally tend to use IETester.

So in the end our browser versions and platforms were,

Mint 13 (Maya)

• Chromium 25.0.1364.160
• Firefox 21.0

Ubuntu 13.04

• Chromium
• Firefox 20.0

Windows XP SP3

• Chrome 26.0.1410.64m
• Firefox 2.0.0.11
• Internet Explorer 7 and 8 (IETester)
• Safari 5.1.7

Windows 7

• Firefox 20.0.1
• Chrome 26.0.1410.64m
• Internet Explorer 9 and 10 (IETester)

Screen and Resolutions

The minimum screen size we are targeting is 15" @ 1024x768 so we used an old Phillips Syncmaster I had laying around to make sure the website was displayed correctly. We also used a 19" @ 1440x900 Asus monitor to see how it renders on a larger screen. Both displayed the website correctly and as expected.

Monitors

Connections and Bandwidth

You might have noticed I have not mentioned anything about bandwidth which used to be a consideration and may still be for some countries but looking at the avarage speed of UK broadband which is 12.7Mbit/s^[1], this is high enough for us not to worry about file sizes to much.

Although we always try to keep size down and latency up for our web pages and servers, always trying to follow the KISS mantra.

Use Cases

Next up we dusted of our use cases which we do with every browser to try and test all of our different templates and follow common actions of our visitors

One use case is for viewing a care homes basic listing so we open up a browser tab and request the index page of our website. From there the next step is to click the care homes link in the header which takes us to the UK country page.

This is a list of links to UK county pages from here we select a county (Hertfordshire) and click on it which takes us to the town page.

On the town page is a list of links to towns in the county so we click on Watford which takes us to the town page which is were the information for each home in the town is listed.

From here you can click on the more info links to get the basic listing which we consider a sort of home page for the home on our site.

Below is a video of the use case in action it was a screen capture using VLC to record the stream using an OGGVorbis codec*.

Problems Encountered

Finally we will cover some of the problems we encountered which were surprisingly few considering the task at hand.

Our first task we had to implement a custom style sheet for IE 7 because it was shifting the right set of links in the header down to a new line.

We use a browser conditional <!--[if IE 7]> which means all other browsers apart from IE 7 will ignore this because they will think its a comment but IE being IE it will use the style sheet.

This allowed us to make the navigation links 24% in width rather than 25% I am not certain on what has caused this but removing padding and margins made it work in IE but that was unacceptable in terms of style so we decided to make the widths small.

I would guess that IE 7 uses a different box model than the rest and it also does not support the box-sizing CSS property either.

This was our only main problem and involved a bit of a kludge to fix but we are happy with the results so far.

We do have some outstanding enhancements for adding authorship microdata, adding language and dir attributes to our <html> tags and a couple of small things.

Also the website displays terribly in IE 6 but we do not wish to support such and old browser I would also assume they were on an old machine with and old monitor so the website would not look great anyway.

IE6

Thoughts

We are happy with our testing and the new templates passed all our use cases once the custom IE 7 style sheets were implemented.

Our pages conform to standard** and our web site displays the same across all our target platforms, browsers and devices which is exactly what we want.

The Care Homes Directory will be releasing a news system so we can publish care related news topics direct on our website.

I will be writing an article about it in the coming week about how we integrated into various social media API so when we publish it gets maximum exposure.

We hope to be releasing within the next few weeks after the QA has been done and any remaining features are implemented.

Appendix

[1] http://stakeholders.ofcom.org.uk/market-data-research/other/telecoms-research/broadband-speeds/infrastructure-report-2012/ (originally accessed on 2013-05-18)

* I think this blog software has mangled the video as it was 1080p @ 30fps but looks awful now in full screen.
** Apart from enhanced listings due to CKEditor using non standard markup.