Technical specification of ad formats
HTML5
TECHNICAL SPECIFICATION
Required file type
Banners in HTML5 format must be delivered as a separate archive with the ZIP extension.
Naming of the ZIP archive
For easy manipulation with banners in HTML5 format, name each ZIP archive as follows: Client + Action + HTML5 + banner size / name (eg: CSOB_Karty_HTML5_300x600.zip). This will significantly speed up the entire process of deploying a banner in the advertising system.
Banner structure
The HTML5 banner archive (ZIP) must contain a startup file with the extension ".html" and any other files that are necessary for the error-free display of the banner on the page. All files and directories must be stored in the first level of the archive, ie without folders and subfolders
Supported file types
V rámci archivu banneru HTML5 (ZIP) jsou povoleny všechny níže vyjmenované typy souborů:
- CSS
- JS
- HTML
- JSON
- GIF
- PNG
- JPG
- SVG
- WOFF/WOFF2
- EOT
- XML
Number and names of files
- The number of all files in the HTML5 banner archive must not exceed 40.
- File names in the archive must not contain accents or special characters. If the banner is generated by an external program (Adobe Edge Animate, Google Webdesigner), it is necessary to make sure that the layer names do not contain accents or special characters before exporting the banner.
Loading data from external sources
The total maximum banner data size, including all scripts, libraries, and external service data sources that are downloaded after placement on a page, should not exceed 1MB when unpacked. We strongly recommend using external sources from fast and reliable CDNs to eliminate errors due to slow CDN responses. We reserve the right to reject if the 1 MB limit is exceeded.
Recommended external sources:
- fonts.googleapis.com
- code.jquery.com
- s0.2mdn.net/ads/studio/
- s1.adform.net
- cdn.jsdelivr.net/npm/lottie-web
- ajax.googleapis.com/ajax/libs/jquery/
- code.createjs.com/createjs
- code.createjs.com/1.0.0/createjs.min.js
- cdnjs.cloudflare.com/ajax/libs/bodymovin/
When loading support libraries, the script address must start with two slashes (see example below).
Correct: <script src="//cdn.example.com/file.js"></script>
Incorrect: <script src="http://cdn.example.com/file.js"></script>
Click-thru settings
Within the HTML5 banner, redirection to only one URL is supported, which must be sent together with the banner separately. The entire clickable portion of the banner (<a>
element with href
attribute, no onclick
). Our ad system sets the destination address in the href
attribute. Use of JavaScript (eg window.open ();
) is not allowed.
Proper functionality
Caution! The manufacturer is responsible for the correct display and trouble-free functionality in all major browsers, including mobile versions.
Attention!
- There can be only one ".html" file in the banner archive.
- No redirects (or other address changes) may occur inside the iframe, causing that a click on the browser's Back button on our page could not take you to the previous page.
- The clickable part of the banner must have a standard cursor when hovering over the links. Over non-clickable parts must be a normal cursor.
- The banner must not steal focus or cause us to leave our site without standard explicit user action (i.e. not without mouse click, enter key or touch which started and ended at the same point).
- The banner must not emit sounds without mouse hovering over the ad or without explicit user action.
- Some users use a different default font size. We don't require the banner to look the same in all sizes, we just point out that it's important not to forget this flexibility of the environment (it can't be avoided).
- The supplied banner or creative must not overload the processor and use the memory resources of the device on which it is displayed. The evaluation is based on the iAB recommendation that individual creatives should not require more than 30% of available CPU resources (relative to the average user base). We reserve the right to reject the creative in the event of excessive workload and use of system resources.
Tips to reduce data size
Use the optimal format for your graphics:
- JPEG: Suitable for photos. Does not support transparency. It uses lossy compression, which does not like hatching and solid red, and instead likes aligning blocks into an 8x8 pixel grid. The data size is proportional to the dimensions, not to the image complexity. Compression tool tip: JPEGmini
- PNG: Fits all other graphics (logos, inscriptions…), can have translucent parts. Compression is normally lossless, but it is possible to limit the palette to 256 (and fewer) colors, which can shrink the size. The data size is proportional to the image complexity, not the dimensions. Compression tool tip: PNG Gauntlet, TinyPNG
- GIF: Suitable only for moving graphics. For a still image, it is always worse than PNG.
- SVG: Suitable for all vector graphics. It is losslessly scalable, but can be data intensive. Compression tool tip: SVGOMG, SVG Editor
What about non-standard fonts?
- Convert to PNG image. Relatively low data size. Only on devices with a higher pixel density (mobile phones and tablets) can it look worse. Still, it's usually the best solution.
- Generate a webfont of the WOFF / WOFF2 format. For example, you can use the FontSquirrel generator to generate a webfont limited to a certain range of characters - then the WOFF file is small.
- Do not use a non-standard font. ;-) That is, fonts that are not part of operating systems (Windows, Mac OS (iOS), Linux, etc.)