Browser Support Matrix

The Super natural browser support matrix was a process driven project, created to keep track of what browsers / devices we did and didn't support. It was useful for both our internal QA and development methods but was also a hit with media agencies and clients alike. It's everything all in one place and a link to it was included in every projects risk assessment.

View Project

Let's start at the beginning. In the early days of HTML5 display advertising we found using GSAP pushed us over the "recommended" file weight allowance as outlined by media agencies. Gzipped GSAP is around 40kb, un-zipped it's around 100kb and whilst this might be ok for Rich Media we were still being asked to create standard media HTML5 ads, with a total file weight of 40kb. Using GSAP meant that's pretty much all you could have. Not many clients were happy with a blank ad, as you can imagine.

And so, superTween.js was born.

alt

I can't take credit for the development of this project as it was dreamt up and lead by Super natural's in house developer Steve Utting

Back to those all important numbers, GSAP: 100kb, SuperTween: 9kb
... and as the GitHub repo describes the project:

A very small tweening engine for those teeny tiny projects (minified with 5 tween ease options is 9kb).

superTween.js is pretty backward compatible too. We were finding that in order to maintain the reach of Flash display advertising we needed to ensure our ads worked on browsers such as IE9 on Windows 7. For those not in the know IE9 on Windows 7 is very very old and because IE9 doesn't support the .transition property it's unable "animate" DOM elements using hardware accelerated CSS methods.

superTween.js runs a check for this property and if found to be false uses Javascript to "animate" the DOM element. Granted, it's not as smooth as its CSS equivalent but it does mean the ad will still "animate".

domPrefixes = 'Webkit Moz ms O'.split(' '); elem = document.createElement('div'); if( elem.style.transition !== undefined ) { superTween.useCSS = true; } if( superTween.useCSS === false ) { featurenameCapital = "Transition"; for( var i = 0; i < domPrefixes.length; i++ ) { if( elem.style[domPrefixes[i] + featurenameCapital ] !== undefined ) superTween.useCSS = true; break;

Back to the BSM.
Now that we had an animation library that worked almost everywhere we knew if we used the library in our projects they'd too also work almost everywhere. We did find some discrepancies and issues which are all noted on the BSM.

alt

In short, superTween.js and the BSM worked together and meant we delivered hard working display advertising on a huge range of browsers and devices.

Furthermore, if we were ever in a situation where a client emailed to say "the ads not working" we could just ask them to check against the BSM to see if their browser/OS/device was indeed supported.