Smart AD is an advertisement network with its own information system for creating and managing online ad spaces. Therefore the technical requirements of banners are dictated by Smart AD, not individual web sites.
The Smart AD HTML is a banner type that is added into iframe container positioned in specific space in the middle of the HTML content and also in some cases be overlaid on top of the participating web site and is fixed to a certain location in the browser window.
Events
To track events made on creative and communicate with parent frame, the following javascript should be added to head section of html
var qparams=function(){var r=window.location.search.substr(1).split("&"),o={};if(""==r)return{};for(var n=0;n<r.length;++n){var t=r[n].split("=");2==t.length&&(o[t[0]]=decodeURIComponent(t[1].replace(/\+/g," ")))}return o}();
window.open(qparams.click_url, '_blank');
window.open(qparams.dynamic_url+ encodeURIComponent('http://www.website.com/'), '_blank');
window.parent.postMessage('remove' + qparams.banner_id , '*');
window.parent.postMessage('close' + qparams.banner_id , '*');
window.parent.postMessage('expand' + qparams.banner_id , '*');
window.parent.postMessage('collapse' + qparams.banner_id , '*');
<script type="text/javascript">
var qparams=function(){var r=window.location.search.substr(1).split("&"),o={};if(""==r)return{};for(var n=0;n<r.length;++n){var t=r[n].split("=");2==t.length&&(o[t[0]]=decodeURIComponent(t[1].replace(/\+/g," ")))}return o}();
_sa_clicker = document.createElement('div');
_sa_clicker.setAttribute("style","position:absolute;display:block;left:0;top:0;width:100%;height:100%;z-index:1000000;cursor:pointer;");
document.getElementsByTagName('body')[0].appendChild(_sa_clicker);
_sa_clicker.onclick = function(){
window.open(qparams.click_url, "_blank");
window.parent.postMessage("remove" + qparams.banner_id , "*");
};
</script>
http://www.iab.net/wiki/index.php/HTML5_for_Digital_Advertising_Resources
Use HTML as much as possible and only javascript libraries you actually need - http://www.greensock.com/tag/javascript/
All graphics should be as low quality as possible and optimized - https://tinypng.com/, http://luci.criosweb.ro/riot/
Degrade gracefully with fallback fonts, feature detection and backup images
For better understanding of the banner clickable area, use CSS: "cursor:pointer;" on your creative.