Cross Browser Compatibility

We’ve recently created a number of responsive websites and web apps, each of which required bespoke features and functionality.

Many of these features will fall within standard development parameters; you plough on and work with what you have and with the tools at your disposal.

One headache, however, has proven to be cross browser compatibility. In the old days – just a couple of years ago, really – it was reasonably straightforward to test against relevant browsers of the time.

When building for responsive, this development and testing phase has more than tripled in size with tablet and mobile device considerations adding to the overall browser matrix.

HTML5 with JavaScript builds work across desktop as well as mobile which means we are not just working with IE but also mini IE and the same for Chrome, Safari, Firefox, etc.

This causes a number of issues that often bounce back to the design should elements not be within a safe area or to development if you don’t get your breakpoints, layout or scaling right. Of course it doesn’t help that all of this software is being constantly updated at different times. In one case, on the day before we were due to handover a web app an iOS update introduced black bars along the top and bottom of our screen which bumped our already long day far up into the double digits.

To assist us with the testing we use software that replicates different web browsers as well as manual testing on our own PC’s and Mac’s.

Below is a list compiled by Mashable (http://tinyurl.com/kurkhj7of some of the software testing options out there, our favourite of which is BrowserStack:

  1. Ghostlab
  2. BrowserStack
  3. Sauce Labs
  4. CrossBrowserTesting
  5. Browsershots
  6. Browserling
  7. Browsera
  8. Mogotest
  9. IE NetRenderer
  10. Litmus
  11. BrowseEmAll
  12. TestingBot
  13. Spoon