Responsive banner ads

Responsive design is hot, so responsive advertising is hot too. That’s why we see many new ads techniques and strategies. You will find a nice example of technique on Responsive Banner Ads with HTML5 and CSS3. Or maybe the GASP project will bring nice responsive html5 advertisements in future.
Also platforms like responsiveads.com introduce innovative techniques to show banners on responsive websites. And Google had announced to change their Adwords programm to responsive ads starting june of this year.

You will find responsive ads strategies on responsiveads.com too. To get some ideas take a look at their Ad Formats & Showcase page.

At the moment most advertisers have not adopt new responsive techniques. So i was looking for techniques and strategies to show conventional graphical banners on a responsive website. As i wrote earlier in responsive images (Dutch only) we can’t detect phone orientation or even screensize/viewport server side. Javascript can be a bridge between the media query detection of the viewport and the server side scripting. A solution for this is described on Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width. The post gives also some other solutions: MediaCheck,jRespond and Breakpoints.js.

I found MediaCheck intuitive and uptodate so i build a proof of concept with it. Based on the viewport i load different banner formats on different positions. You can see the results by viewing the demo page on responisator or download the source on Github.

With MediaCheck you define your breakpoints based on CSS Mediaqueries like:


mediaCheck({
media: '(max-width: 420px)',
entry: function() {
console.log('starting 420');
},
exit: function() {
console.log('leaving 420');
}
});


MediaCheck is initialized with the jQuery Document Ready call so the banners are load after the page loads. This seems the main disadvantage of this method. On the other side this method prevents you from loading too much data to the client. None of the banners is hide or resize by CSS. You can use your banner loads for statistics. Every banner load should be a real view except from changing phone orientation maybe.