After a long time I got again a request for the creation of animated online ad. Strictly speaking, it was about a full-responsive sitebar banner, in which a video should play. In theory, this is not a problem. I had already built this a few times in the past.
WHAT SHOULD GENERALLY BE CONSIDERED WHEN CREATING A BANNER?
Good planning is the be-all and end-all. If you collect all the information about the concept, provided images and/or video material, CD specifications, fonts, etc. at the beginning, you can already create a concept and thus the choice of the structure is already easier.
THE FOLLOWING QUESTIONS SHOULD BE ASKED AT THE BEGINNING:
- Do I have the necessary material ready? (Graphics, fonts, CD manuals, possibly a video, etc.)
- Do you already have ideas about the story and animation of the banner?
- For which ad network should the banner be created? Is it a Google ad? (different networks need different code)
- Are there several format mutations? Which formats are desired?
WHICH TOOL DO I USE FOR THE SETUP?
For the creation of banners, there are now some tools that simplify the creation or even include ready-made templates including animations.
For banners for the Google Display Network I like to use the Google Web Designer, which pre-selects the necessary codes and clickTag notation for Google. With the help of a timeline, different animations can be built. You can also use this tool to create dynamic (programmatic) banners, which you fill with variables.
Since all these tools unfortunately also contain large file amounts of code, I decided to build without a special banner tool, but with my own HTML5 code, CSS and JavaScript. So I can determine myself how much code I use.
TECHNICAL SPECIFICATIONS AND IAB STANDARDS
Before creating the banners, it is important to know the technical specifications. Each advertising platform may have different requirements. Some agencies require certain tags in the code to play the banners on their network.
IAB-Standards
In general, the general IAB standards, which contain standardized formats and specifications, apply to almost all display platforms. However, these specifications and formats can still be extended by the respective ad agency or advertising platform with their own requirements.
The IAB standards can be found on the IAB website.
What is a clickTag?
The ClickTag is a variable that is implemented in the code. The publisher/ad agency can then provide this variable with the target URL to the landing page that users should reach when they click on the ad.
Not every platform needs the same code for the installation of the ClickTag, therefore inform absolutely before, how this is to be installed. As a rule, the IAB standards apply here again, but some platforms such as Adform require a different notation: ClickTag for Adform.
JavaScript snippet for implementation according to IAB standards:
<script>
var getUriParams = function() {
var query_string = {}
var query = window.location.search.substring(1);
var parmsArray = query.split('&');
if(parmsArray.length <= 0) return query_string;
for(var i = 0; i < parmsArray.length; i++) {
var pair = parmsArray[i].split('=');
var val = decodeURIComponent(pair[1]);
if (val != '' && pair[0] != '') query_string[pair[0]] = val;
}
return query_string;
}();
</script>
</head>
<body bgcolor="#F7A409" >
<a href="#clicktag" id="IAB_clicktag" target=“_blank“>IAB clicktag</a>
<a href="#clicktag2" id="IAB_clicktag2" target=“_blank“>IAB clicktag2</a>
<script>
document.getElementById('IAB_clicktag').setAttribute('href',
getUriParams.clicktag);
document.getElementById('IAB_clicktag2').setAttribute('href',
getUriParams.clicktag2);
</script>File Size
The biggest problem with banner creation is probably the allowed file size. This is usually very limited. For example, a full responsive sitebar banner may only be 120kB in size. Therefore, the amount of work for compression should not be underestimated.
Tools like tinyJPG/tinyPNG can help to get images as small as possible.
Where possible, it is recommended to use SVG graphics. These are usually many times smaller than e.g. PNG graphics. Also the code itself should be compressed.
The exact file size restrictions can be found in the respective tech specs of the advertising platform.
Format / Responsive
Most formats have standardized static pixel dimensions (e.g. „Medium Rectangle“: 300×250 px). However, there are also banner formats that are responsive to the available space. Unlike web pages, where you usually only adjust the width, you also have to consider the screen height for banners. In most cases, the banner is made proportionally smaller or larger. The maximum size is set with the window-height and window-width.
CTA
Don’t forget to include a CTA that prompts you to click. Buttons with texts like „Order your XYZ now!“ work much better than a „More information“ button.
Video
Videos normally exceed the maximum file size for banners, so videos may be reloaded/streamed from an external server. According to IAB standards, the file size limit of the reloaded content is 2.5MB.
Depending on the advertising platform, there are also different rules for autoplay. Maybe autoplay is generally forbidden on some platforms or it is allowed but only without sound (most browsers block autoplay in combination with activated sound anyway).
Fallback Image
Many publishers want a „fallback image“ for the HTML5 banner. This can be displayed, for example, in older browsers that do not display the Html5 banner optimally. Likewise, there are banner formats, which are output on the desktop as HTML5 and mobile as graphics. Here the graphic is to be delivered separately to the banner to the publisher.
HOW TO KNOW IF THE BANNER NOW MEETS ALL TECHNICAL REQUIREMENTS?
Once the banner is finished, you compress all the necessary files (html, js, css, image files) and you can test them in a test tool to see if the created banner meets all the technical specifications.
Some ad creation tools like Google Web Designer offer their own validator functions.
If you have built the ad in another tool or by hand, there are several online tools to test the technical requirements.
Attention: As mentioned, technical requirements may differ depending on the advertising platform.
HTML5 ad Check-Tools:
- html5check.at
- Google HTML5 Ad Validator
- Google Ad Preview (für in Google Display Netzwerk geschaltete Banner)
- HTML5 Ad Validator von creativeqa.io
PROBLEMS WITH VIDEOS WITH AUTOPLAY AND SOUND
Generally, most modern browsers disable autoplay with sound enabled from the beginning. The video will therefore not play on page load. However, if you add the attribute „muted“ to the <video> tag, the video will play from the beginning – but as the term suggests, without sound. This is suitable e.g. for background videos in hero elements on a web page. But for banners usually less useful, if the video contains for example spoken recordings or music, which should evoke a recognition value with the user.
In general, the IAB standards state that it is not allowed to have sound activated via autoplay anyway. So sound is only allowed on interaction (click) of the user, or on mouseover over the banner. Okay, that means you could turn on video sound via JavaScript on mouseover on the banner using .muted = false on the video element, … or?
Wrong thinking! Until a while ago, this was still possible, but current browsers such as Chrome and Safari prevent the sound from being switched on before the user has already interacted with the website. At least a single click is enough. This would not be a problem with a website, but we create an online banner that is embedded on other websites via iframe. That means the user will not click within the banner before. And even worse, the browsers then not only prevent the sound from activating on mouseover, but even stop the video. This is of course an unattractive state, if in a banner the video is playing and as soon as you hover over the banner, the video stops. Unfortunately, there is no workaround for this until today. Therefore, there are only the following alternatives.
WHAT ALTERNATIVES ARE THERE?
- The video plays by autoplay without sound and you offer the user a button that turns on the sound by clicking (then you have the interaction)
- The video is stopped at the beginning and you put e.g. a big play button over the video (also here the interaction of the user is necessary).
- You generally omit the sound from the video
But none of the three solutions really appealed to me …
so I wrote a small function that turned out to be a workable compromise solution for me.
I now query whether the video is paused or playing. Only if it is paused, I display the play button above the video and click to continue playing the video with sound.
This means that in the browsers that stop the video on mouseover then the play button appears to continue watching it. In browsers that allow sound on mouseover, it will continue to play with sound anyway. This is not the very best solution either, but it is a good compromise to show the user the video with sound.
Photo by Georgie Cobbs on Unsplash
