Technical specification of ad formats
Branding iLayer is a very popular version of ad format. It is based on Branding format, which is due to its size around entire page excellently visible for all the time a user is scrolling down the page. It is, however, supplemented by excellent functionality, when the mouse is over MegaBoard (Leader) it expands down and reveals another content in the form of an image or a video.
Available on these sites
General description of Branding ad.
- Branding is an image showing above and on sides of the page content. The whole area is clickable.
- There are two options for placing branding into the web page - fixed or repeating. Fixed branding is not moving when rolling the page down. Repeating branding is moving with the rolling page and the image is repeated to fill the entire height of the page.
- With branding comes standard banner position - MegaBoard (Leader). It’s placed above the page content and over the branding image and it is usually used for animation or to place a video.
Above mentioned branding displays only on the desktop platform. However, if you choose cross-platform Branding (desktop + mobile) it is necessary to prepare also a mobile version of Branding. You will find all technical specification for its creation here: Specification for Mobile Branding.
Technical specifications of banner
- 1 image in format JPG, PNG
- Dimensions: 2000x1280 px
- Data size: max. 350 kB
- 2 images in format JPG, PNG
- Dimensions: width 2000 px, height depends on your ad layout
- Datová size: max. 350 kB
- The first image (header) is placed at the top of the page.
- The second image (repeater) is placed under the first image and is repeated to fill the entire height of the page.
- Dimensions: 998x200 px / expanded 998x600 px
- Data size: max. 100 kB / max. 200 kB HTML5
The leader is placed centrally 12px above the content of the page and 17px from the top of the page.
For default animation, it is sufficient to pass on only static images (JPG, PNG) separately. Banner completion is done on our side. In case of other animations, dynamic elements or embedded video it is important to provide HTML banner for the specified section of 3D animation.
Recommendations to get the highest visibility of branding ad
Due to a variety of display resolutions and their formats, the main advertising statement should be within the rectangle of 1280px to 780px so the majority of users can see it. We recommend perusing scheme for the preparation of Branding ad.
Before you start creating a banner
Image formats for ad banners:
- JPEG: Good for photos. Doesn’t support transparency. It uses lossy compression, which doesn’t like hatching and fields of red color. Tends to make blocks of 8x8 pixels. Data size is more dependent on image dimensions then image complexity.
- PNG: It fits on logos, texts, and uniform color elements. Supports transparency. Compression is lossless. The color palette can be reduced to 256 (and less) colors, and thus significantly reduce data size. Data size depends on image complexity and specifically on the number of used colors, not so much on image dimensions.
- SVF: Its a vector format so its ideal for logos, texts, icons, and other vector graphics. It's losslessly scalable but more complex vectors can be data-intensive.
- GIF: Fits only for animated graphic. Dat size is color dependent. For static image considering data and size is PNG always better.
General rules for all banners:
- The banner must not be overly aggressive in the sense of vibrating and flashing – an aggressive banner refers to a design that changes colors, headings or other important graphic elements in a striking manner and very short time span (less than 1 second), which can disturb the user when working with the page.
- The banner must not contain vulgarisms or other unethical elements.
- The banner must not exceed the permitted data limits and must have the correct dimensions for the required position.
- The banner must not contain control components of operating systems and must not look like a system report. Must not use generally known graphic elements in a misleading way – for example symbol “play” for anything else than the start of playing multimedia content and so on.
- The banner must in no way interfere with the page or influence the be-havior of page elements which are not a part of the advertising surfaces (banner). It must not change the page title or its main content, or arbitrarily adjust the entered URL without clicking on the banner.
- In file names must not be used any diacritical mark, space or any spe-cial character. Instead of space, you can use “_”.
- All versions of the banner and target URL addresses must be submitted at least two business days before the start of the campaign, if not stated otherwise.
General specification of HTML5 format:
- Banner is placed as an independent page in iframe thereby the risk of technical or visual collisions with other page elements is eliminated. If needed to be without iframe, then must be delivered more ahead for inspection by our specialist to prevent any collision.
- The banner must not cause any troubles in any browser, nor cause JS errors nor write anything to browser console.
- All data for the banner (including external sources, e.g. font from Google Fonts) must not exceed 100 kB limit.
- Hereby is excluded the use of tools like Adobe Edge or Swiffy etc. whose supporting JS libraries are bigger than data limit. The same applies to the use of various JS frameworks (YUI, MooTools, Prototype.js, jQuery etc.) and CSS frameworks (Bootstrap, Foundation, etc.).
- A banner must not overload the CPU; a computer with CPU Intel Core 2 (1,86 GHz) and tablet iPad 2 serves as a reference.
- CSS and JS should be within HTML file.
- The whole area for click must be in < a > element with attribute href (not onclick). URL will be set by our ad serving system.
- Redirection or any other change of URL within iframe which causes browser button not to go to the previous page is forbidden.
- Click-able parts of banner must have standard cursor of hand for links. Unclick-able parts must not have hand cursor.
- The banner must not steal focus or cause page exit without the standard and explicit action of the user (mouse click, finger tap, the press of the enter key).
- Any sound produced by banner without explicit user action is forbidden.
- Some of the users are having different font size set. So bare this in mind when coding.
For secure pages (https://) must all third-party measuring and display codes use only https://. In banner must all other calls and tracking URLs also use secured connection (https://). Only part, which need not be SSL compliant is URL clickthru. Differences in tracking code statistics without https:// will not be taken into account.