Siteheader

Siteheader is a collapsing banner on the top of the page that starts off expanded and collapses on scroll event and expands again if scrolled back up.

The collapsed state is sticky and scrolls along with the page. Banner is always visible until closed by clicking on the close button.

The close button appears after the banner collapses for the first time and after that it will be on top of both closed and expanded states of the banner. The button is added on top of the banner by DELFI and is located on the top part of the banner approximately 30px form top and approximately 500px to right from the center of the banner.

Example

IMAGE Siteheader Example VIDEO Siteheader Example

Specifications

Dimensions
Siteheader consists of two possible states, expanded and collapsed, where accepted dimensions of are 1600x400 + 1600x100px and 1600x300 + 1600x100px

Safe area
1265px 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
Outside of the dimensions of siteheader a solid background color is shown and hex color code should be supplied with the images.

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 the example file. 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.

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

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.

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

AdForm Studio

We recommend downloding one of the example banners below, uploading them to AdForm Studio and simply changing the images and background color there. After making the changes, download the banner and send the downloaded zip to Delfi.

Example file 1: 1600x300px
Example file 2: 1600x400px
Example file 1: 1265x300 video

How to create siteheader in adform studio:

  1. Download example banner
  2. Got to http://studio.adform.com
  3. Click on NEW dropdown button
  4. Click on Upload banner
  5. Navigate to and upload the example banner
  6. In Studio click on File Browser
  7. Hover over the collpased.jpg to show the button
  8. Click on the button
  9. Click on Reupload file
  10. Choose the file you wish to use for the 1600x100px (collapsed) part of the banner
  11. Hover over the expanded.jpg to show the button
  12. Click on the button
  13. Click on Reupload file
  14. Choose the file you wish to use for the 1600x400px (expanded) part of the banner
  15. Click on index.html
  16. On line 18 and 23 change the hex color code of the background
  17. Click on Banner settings
  18. Under CLICKTAGS set the clickTAG url for the banner
  19. At the top right corner click Export banner and then Optimze banner & Export
  20. Send the downloaded zip to Delfi adops

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:

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

Misc notes


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

  1. Download the template file
  2. Extract and import to Adobe Edge Animate
  3. Make changes
  4. (Optional) Set the Adobe Edge Project stage color to set the siteheader background color
  5. Publish
  6. Add to zipfile
  7. Make sure the zipfile name contains the dimensions of the siteheader
  8. 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 : siteheader_1600x300px_gwd_template
Project file : siteheader_1600x300px

How to create a siteheader banner in Google Web Designer

  1. Download the template file
  2. Extract and save the template file in documents/google web designer/templates folder
  3. Open Google Web Designer application
  4. Click USE TEMPLATE
  5. Click MY TEMPLATES
  6. Click delfi_siteheader_1600x300
  7. Click USE LAYOUT
  8. Write name for the banner (include banner dimensions in the name 1600x300 or 1600x400)
  9. Click CREATE
  10. Design ExpandedPage
  11. Design CollapsePage
  12. Save and Publish Locally
  13. Send the zip file to Delfi

Misc notes


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_1600x300px_hype_template

How to create a siteheader banner in Tumult Hype

  1. Download the template file
  2. Open the template file
  3. Make changes to the Expanded scene
  4. Make changes to the Collapsed scene
  5. Save as HTML5
  6. Compress and send the zip file to Delfi

Misc notes