Creative Production Guidelines


HTML5 Banner Production Guidelines


HTML5 creatives optimized for EasyPlatform consist of assets (gif, png, mp4 etc.) and a main html file, which references the assets. These files have to be bundled into a ZIP file. When creating the ZIP file, in order to work correctly with EasyPlatform you have to respect the following rules:
  • Name the main html file "index.html" (without the quote characters)
  • Place the index.html file into the root of the ZIP file (do not place it in a sub-folder)
  • The index.html file must contain <head> and <body> tags!
  • Place the assets into sub-folders or into the root of the ZIP file
  • Use relative paths to the assets. For example: <img src="foldername/logo.png">
  • If you use a library, please include it into the .ZIP file
  • If you have to use external resources you must use https:// protocol
  • Only use assets used by the HTML5 creative (do not use "orphan" assets)
  • Remove default body margin setting style attribute to the body: body: { margin: 0; }
  • Follow the instructions for adding links to the banner below

Requirements:


File type: . zip
Assets formats: jpg, jpeg, png, gif, txt, js, json, svg.
Required banner sizes (px): 300x250, 300x600, 970x250, 970x90, 728x90, 468x60, 160x600.
B anner (.zip file) weight: up to 150 KB for all sizes.

Inserting Links in HTML5 Banners


In order to define a link in the banner which will work correctly with EasyPlatform you have to insert our dynamic parameter for click correctly and according to your goal.
Inserting only parameter for click and define the link in the platform (recommended)

Add a link with standard <a> html tag and define the EasyPlatform parameter for click: <a href="_eaclick_" target="_blank"> </a> and style the <a> to be clickable throughout the banner.
In this way the platform will track the clicks and set the link according to the defined link in the platform when uploading or modifying the banner. This is recommended in order to be able to change the link fast and easy without modifying any code.
Inserting multiple links defined in the banner

In order to track all the links, the parameter for click "_eaclick_" (without the quote characters) has to be implemented correctly before every link in the banner:

<a href="_eaclick_http://yoursite.com/landing-page-1 " target="_blank">Link 1</a>
<a href="_eaclick_http://yoursite.com/landing-page-2 " target="_blank">Link 2</a>
<a href="_eaclick_http://yoursite.com/landing-page-3 " target="_blank">Link 3</a>

All the links should lead to one domain only!

Best practices

  • Compressing image assets!
    Use image files with few colors; indexed png or gif files are much lighter than JPEG files.
    Do not use transparency if it is not needed.
    Never use heavy file formats such as raw or bmp.
    Choose the lowest quality and the maximum compression rate to get the best quality with minimal weight.

  • Reducing the number of HTTP requests
    Combine all the image files into a single file (spritesheet).
    Use the CSS to point to the image files using their coordinates (X and Y)
    Merge and minify all your scripts in a single file ( javascript / css )
    Using external libraries In your HTML5 creative, you may need visual effects and
    use common libraries such as jQuery, jQueryUI, jQueryMobile, Adobe Edge, etc. We do not recommend referencing libraries as external libraries, but rather embed the library codes directly (physically) in your HTML5 creative. If you do have to load a resource externally it must be with https://

  • Keeping code light and clean
    Use efficient and compact javascript.
    Use CSS3 if possible.
    In the CSS, use global class names instead of inline styles for each tag.

  • Animations
    When using animations, a crucial point to consider is performance in order to avoid overwhelming the CPU.
    Please refer to the IAB's best practices - page 18.


Native Text Ads Production Guidelines


The text ads are being created directly in the platform. They are consisted of Headline, Description and up to 5 different images which rotate randomly or sequentially based on your choice. They are really easy to create and edit and are perfect for short-term promotions. Find out more about the elements:
  • Headline - up to 30 characters which is usually visualized with bigger font size and sometimes bold.

  • Description - up to 80 characters. Here you can give the users more information about the product, service or promotion. With informative description the users have make better decisions to click and you get better traffic for your landing page

  • Link - the landing page you want to redirect the users who have clicked on your ad. We recommend you to avoid redirecting them to the homepage when the ad is for a specific product or service.

  • Images - you can upload/select up to 5 different images in two resolutions and ratios. The different ratios are needed in order to generate the best possible layouts for your ad according to the different placements where it is displayed. You may use our crop module to resize and crop your images for optimal results or you can use our predefined gallery with stock images all for free.

  • Keywords - up to 100 words per ad. They are important for the contextual targeting of the ads when there are matching words on a page where your ad is displayed. The keywords have to be one per line and no phrases are supported.

Requirements:

  • Headline: up to 30 characters;
  • Description: up to 80 characters;
  • Link: up to 600 characters;
  • Images: up to 5 images in the following ratios and resolutions:
    Ratio 4:3 - minimum 400x300px
    Ratio 1:1.91 - minimum 600x314px


You have difficulties creating banners or native text ads for the platform?
Our team is at your disposal for questions and cooperation.
Email: team@easyplatform.com
Mobile: +359888 181655