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.
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.
- 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
- 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
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.