Available banners formats

Adaptive Banners for Different Devices

It's no secret that banners suitable for desktop may not be as effective and engaging on mobile devices.

Now, you will be able to upload two different versions. If, for some reason, you don't have a mobile version, we will continue to display the main desktop version, as before.

Recommendations:

Avoid burdening the mobile version of banners with prolonged animations, unlike the main banner. It's more effective to use a proper layout for eye-catching content elements, maintaining sufficient spacing between them.
On average, a mobile banner is in focus for no more than 1.5 seconds, and sometimes part of the information presented during animations may not reach the user.

Banner Formats and Sizes


Large Banner
Desktop Version — 300 x 400px
Mobile Version — 1080 x 1920px

Displayed on the main page, in articles, and in the affiliate programs listings.
Fixed and moves along with scrolling.
Format: GIF or HTML5, up to 120 KB.

 

Horizontal TOP, under branding
Desktop Version — 1000 x 90px
Mobile Version — 1080 x 160px

Displayed on all pages of the website;
Format: GIF or HTML5, up to 120 KB.

 

Horizontal 1, between different blocks on the page
Desktop Version — 1000 x 60px
Mobile Version — 1080 x 200px

Displayed on all pages of the website;
Format: GIF or HTML5, up to 120 KB.

 

Horizontal 2, below between different blocks on the page
Desktop Version — 1000 x 60px
Mobile Version — 1080 x 200px

Displayed on all pages of the website;
Format: GIF or HTML5, up to 120 KB.

 

Schematic example of banner placement on the website

Technical Requirements for HTML5 Banner Format

  • All files must be packed in a zip archive without nested directories. The main code should be in the index.html file and should not contain unnecessary spacing of elements (margin, padding styles, tags like <br>, and others). 
  • The link to the advertised page must be specified in the index.html file and should be replaced with the macro {{CLICK_URL}}. It will automatically be replaced with your referral link. The link should open in a new window or tab (target: blank).
  • We recommend wrapping all elements in a single <a> tag in the layout to make the entire area of your banner clickable.

A simple example of the index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <link rel="stylesheet" href="style.css">
</head>
<body>
        <a target="_black" class="block" href="{{CLICK_URL}}">
                <div class="item-logo">
                        <img src="logo.png" alt="">
                </div>
                <div class="item-title">
                        .........
                </div>
                <div class="item-btn">
                        <h1>BUTTON</h1>
                </div>
        </a>
</body>
</html>


A good example of html5 banner from Evadav.