Cross browser testing evolves

It is no secret that i develop on a mac, in fact as with most of us mac developers, we even have a habit of smugly mentioning it when the opportunity arises, with some becoming experts at creating such opportunities.

However, only the most foolish developer makes websites for a mac, although we have all probably seen them at some point, a self righteous designer proclaiming that he is happy to only make himself available to <20% of the marketplace.

I make websites for companies of all shapes and sizes and of course a fundamental part of the development process is cross platform and cross browser testing. To achieve this i have always employed a selection of tools and techniques, and as there is a new one i am currently championing i thought it best to put some of this in writing.

1 – Buy a PC.
Why not, ..you can pick up a cheap secondhand ex corporate work horse for under £200, which is half a day to you an i, ..i know i have spent a lot more than half a day banging my head against IE6, so perhaps a wise choice.
I have one, …no, i didn’t buy it myself, my friend with the PC whom i shall speak of in point 2 bought it for me as i think he was getting a little annoyed at my skype chat IE debugging sessions, …conversations that consisted of “refresh again”, ..”clear your cache” ..”refresh”, ..”well mine doesn’t look like that”

The pitfall, ..in order to properly run all of the browsers and work in a secure environment, ..your going to need to find a PC running XP, that is not so bad, ..the bit i find frustrating (other than actually having to open a pc of course) is that even with a PC in my hand, and my friend on the phone on his PC, same browser, same OS, …different results. Is this due to one of the many many builds of IE6? …there was a time when i would have had to find out, ..no i simply invoke the words ‘gracefully degrade’ and ensure the content is presented in an acceptable fashion.

2 – Buy a friend
Ok, so you don’t have to buy the friend, it is best to start off with the friend in the first place, but after a few projects said friend will start to get a little annoyed at your request to know “if it looks ok in IE”.
Mine got so fed up he bought me a PC.

..and in case your wondering, no it mostly didn’t look ok in IE.

3- NetRenderer  - http://ipinfo.info/netrenderer/
So now i am actually starting to give you some useful information, NetRender is very very useful , especially if you use the FireFox plugin as it enables you to view your site in IE6/7/8 all in one click, and does seem to agree with the masses.

It falls down in one big heap though when it comes to being REALLY useful, you see not only does NR not allow you to interact with the page, rendering a static image, therefore making any testing of JS/AJAX functionality virtually useless, better than this, it only renders to the page fold !! …which is not exactly very useful to those of us that believe scroll bars were invented for scrolling.

4- Adobe BrowserLab – http://browserlab.adobe.com
Hello BrowserLab. BrowserLab from Adobe is not the be all and end all of solutions, but it offers a significant step in the right direction away from NetRenderer.

You have to sign up, but once you are in you have the ability to view you site in all of the major browsers and platforms and although it is not interactive in the page display, the entire page is viewable and scrollable. Better yet you are offered a 2-up view and also, my favourite, an onion skin overlay that allows you to easily spot the pixel differences in designs. Just check out the 2-up view and then the onion skin below and see if you spotted the differences in the 2-up without the onion skin version.

2 up display of page, spot the differences

Onion skinned version, the pixel differences are now clear, ....or fuzzy

Of course i do not think there is any replacement for extensive testing across multiple machines and environments and the allowance of suitable time to do this, but in the world of development keeping tabs on potential IE design issues as they arise is critical as often if left too late the rabbit hole can be too deep to find your way out of without losing hair and sleep, ..both of which i value.