Specifications

Image Siteheader

Dimensions: 1600x300px + 1600x100px or 1600x400px + 1600x100px
Weight Limit: 160KB
Formats: JPG, PNG, GIF
JPG siteheader designs must be made on Adform studio, otherwise they are not accepted!

HTML Siteheader

Dimensions: 1600x300px + 1600x100px or 1600x400px + 1600x100px
Weight Limit: 160KB
Formats: HTML

Video Siteheader

Dimensions: 1600x300px + 1600x100px or 1600x400px + 1600x100px
Weight Limit: 80KB + 2MB video
Formats: JPG, PNG + VIDEO
Video siteheader designs must be made on Adform studio, otherwise they are not accepted!

Safe area

1200px wide are in the center of siteheader dimensions is "safe area" that is sure to display on smaller screens. Wider than safe area might be hidden and should therefore be used with discretion.

Background color

A solid body background color should be set for the banner.

Weight limit

Total weight limit of siteheader is 160 KB. (The sum KB size of both images.)

Video siteheader

Siteheader where the expanded part is video. Best done in AdForm using this template. The weight limit of the video is 2 MB (will not be counted against the weight limit of the siteheader). Video file should be optimized and correctly sized.
The video will autoplay muted and loop. Please keep the video file short and light.
Video cannot be implemented in a HTML5 rich media container, it should be added as a video file. If you would like to use video in the banner, please use the previously mentioned Adform template.

General tips on creating siteheader

The siteheader banner is displayed in a separate container that is resized by Delfi and the banner should be aware of the parent element resizing itself.
Set the background of the body of the banner something other than white so that it is visually distinct of rest of the page.

Siteheader banner must include the following script:

<script src="https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js"></script>

Also the banner must call for a resize function as soon as possible for the initial positioning and size to be set:

dhtml.external && dhtml.external.resize && dhtml.external.resize("100%", "100%");

All template files below include the Adform.DHTML.js script and the first resize function call.

How to add a clicktag

For clicktag to work you must have added the Adform.DHTML.js file and trigger the clicktag on a wrapper div element like this.

<div id="clickLayer">banner</div>
  <script>
	dhtml.external && dhtml.external.resize && dhtml.external.resize("100%", "100%");
	var clickArea = document.getElementById('clickLayer');

	clickTAGvalue = dhtml.getVar('clickTAG', 'http://www.example.com');
	landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');

	clickArea.onclick = function() {
		window.open(clickTAGvalue,landingpagetarget);
	}
  </script>

You can read more on how to add a clicktag at AdFrom

Examples

Image Siteheader: Example in Delfi
Video Siteheader: Example in Delfi

Testing Siteheader Locally

To test your Siteheader locally please download this file and extract the siteheader_test.html in to the same directory as the Siteheader file you wish to test.
After you have placed the siteheader_test.html file in the same directory as your Siteheader, open siteheader_test.html file and follow the instructions.

Click on Choose File
Select Siteheader file (not siteheader_test.html)
Select the height of your Siteheader
Scroll this page to see your Siteheader in action

AdForm Studio

All of the JPG & Video siteheader designs must be made on Adform studio, otherwise they are not accepted!

Simplest way to create a siteheader is to use an existing Adform studio siteheader banner. Just replace the images, change the background color, add clicktag and that's it.

Image Siteheader Template

Click on Template
(Optional) set the height of the siteheader
Set the clicktag of the siteheader
Set the background color of the siteheader
Open additional assets
Replace the collapsed image
Replace the expanded image
(Optional) preview siteheader
Upload directly or download siteheader

Banner settings

Additional Assets

Video Siteheader Template

Click on Video Template
(Optional) set the height of the siteheader
Set the clicktag of the siteheader
Set the background color of the siteheader
Open additional assets
Replace the collapsed image
Replace the video on expanded part
(Optional) preview siteheader
Upload directly or download siteheader

Banner settings

Additional Assets

Adobe Animate CC

Creating siteheader banner in Adobe Animate CC is possible using our template file that includes the collapsing and expanding logic as well as the automatic setting of background color based on stage color. As Adobe Animate CC uses canvas to display the banner and creating a responsive canvas that doesn't flicker when resizing, we have edited code to support hidpi screens and responsive scaling. within the template.
Adobe Animate CC uses symbols for elements within canvas. The project file below has been set up with two main symbols with the type of movie clip that the template itself switches as it detects resizing of the page. All animations and visuals should only be done within those symbols.

If you do not wish to use our template please make sure your banner is vertically responsive, has a body background color and AdForm clicktag added.

Template file: adobe_animate_siteheader_template
Project file: siteheader_1600x400

How to create siteheader in Adobe Animate CC:

Download the template file
Download the project file
Open the project file with Adobe Animate CC
In Publish Settings, select the template file adobe_animate_siteheader_template
Save the Publish Settings
Design the collapsed and expanded symbols.
Export the banner zip file
Include siteheader dimensions in file name (eg. siteheader_1600x300_est)
Send the zip file to Delfi AdOps

Misc notes

Do not add clicktags in design. Send urls with the banner and Delfi AdOps will set the clicktag in our ad engine
Template file has been written so that the changing of symbols of the canvas is done based on window size

Adobe Edge Animate

Note: Adobe Edge Animate is discontinued and Adobe Animate CC should be used instead.

Creating siteheader in Adobe Edge Animate is similar to creating it in Adobe Animate CC.
Below we have supplied a template file that you can use and modify.
The template file contains two symbols that have been configured to be shown depending on parent element height. Background color of the siteheader is set same as the Stage element background in Adobe Edge Animate template file.
Do not create a separate clicktag layer. Send the url with the siteheader and it will be included automatically.

Template file: siteheader_1600x400_edge_template

Download the template file
Extract and import to Adobe Edge Animate
Make changes
(Optional) Set the Adobe Edge Project stage color to set the siteheader background color
Publish
Add to zipfile
Make sure the zipfile name contains the dimensions of the siteheader
Send the zipfile to Delfi

Google Web Designer

Easiest way to create a Rich Media Siteheader in Google Web Designer is to use GWD pages for both the expanded and collapsed states of the banner.
We have created a template file you can use to create the siteheader banner. It includes the expanding and collapsing logic and automatically sets the background to mach the GWD page stage color.

Template file: delfi_1600x300px_siteheader_gwd_template

How to create a siteheader banner in Google Web Designer

Download the template file
Extract and save the template file in documents/google web designer/templates folder
Open Google Web Designer application
Click USE TEMPLATE
Click MY TEMPLATES
Click delfi_siteheader_1600x300
Click USE LAYOUT
Write name for the banner (include banner dimensions in the name 1600x300 or 1600x400)
Click CREATE
Design ExpandedPage
Design CollapsePage
Save and Publish Locally
Send the zip file to Delfi

Misc notes

Do not add clicktags in design. Send urls with the banner and Delfi AdOps will set the clicktag in our ad engine
Template file has been written so that the changing of pages of the banner is done based on window size.
Do not remove the tap area in CollapsedPage. It is required for clicktag to work properly.
Do not remove button_1 in CollapsedPage. It is required for banner to expand and collapse.

Tumult Hype

To create a siteheader banner in Tumult Hype, create two separate scenes and change them on the resize event based window height. If window height is less than 105px show the collapsed scene, more than that show the expanded scene.
Or alternatively use the template file below that has been set up for you. The template already contains the resize and scene change logic, as well as clicktag logic.

Template file: siteheader_1600x400px_hype_template

How to create a siteheader banner in Tumult Hype

Download the template file
Open the template file
Make changes to the Expanded scene
Make changes to the Collapsed scene
Save as HTML5
Compress and send the zip file to Delfi

Misc notes

The scene background will be set as the background color of the whole siteheader
Do not insert clicktag. The template has been set up with AdForm clicktag and works out of the box. Send the url to Delfi along with the banner.

Puzzle

Specifications

Limitations

Instructions

Templates

Examples