Guide to skins
- The difference between our Seamless Skin & Fluid Skin formats
- The respective templates (i.e. Seamless Image Skin, Seamless Sliding Skin, Fluid Skin Image, Fluid Skin Video, etc.) within our Seamless & Fluid Skin formats
- Tips and best practice for using overlays
Examples
Recommended default creative dimensions
Side Panels:
Width: 800px (100% width)
Height: 1440px (100% height)
Top Banner:
HTML5: width: 1280px (100% width), height: 180px (100% height)* (HTML Zip File or 3rd Party Tag)
Top Banner sizes vary across publishers and between countries, so please read carefully to ensure your assets are produced correctly.
For HTML5 Top Banners, the creative width must be responsive (width: 100%) up to a maximum width of 1280 pixels. The height will match the billboard height from the list below. If the width of your top banner is not responsive, there may be empty space visible between the top banner and side panels on some sites.
Billboard placement sizes by country:
- 🇦🇹 AUT: 1000x250px
- 🇨🇭 CHE: 1000x250px
- 🇩🇪 DEU: 1000x250px
- 🇩🇰 DNK: 930x180px
- 🇫🇮 FIN: 1000x400px
- 🇫🇷 FRA: 970x250px
- 🇮🇹 ITA: 1000x250px
- 🇲🇽 MEX: 970x250px
- 🇳🇱 NLD: 970x250px
- 🇳🇴 NOR: 980x300px
- 🇵🇱 POL: 970x250px
- 🇸🇪 SWE: 1000x240px
- 🇬🇧 GBR: 970x250px
Format description and guidance
Fluid skins are a responsive high impact format, composed of three individual HTML5 panels - a left panel, a right panel (the side panels), and a top banner. The side panels fill the space between the sides of the page content and the window edge, and scale responsively with the height and width of the browser. The topbanner fills the gap between the side panels, above the page content. The content within each panel should scale responsively based on the width and height of the individual panels. For more information about building responsive creative, check out of Guide to Responsive HTML and building responsive creative guide.
All creative assets (images, videos, scripts etc) used by your banner must be included within the creative Zip-file. Linking to assets hosted on external severs is not permitted, and may result in your ad being blocked by some vendors. The only exception to this rule is for webfonts hosted by fonts libraries for licensing purposes, such as Adobe Typekit, Google Fonts, MyFonts etc.
Sticky video and the side overlays. When the creative is paired with the Skin Top with Sticky Streaming Video top banner, the video moves into the side panel once the top banner scrolls out of view. The Overlay Behaviour setting controls what the side overlays do while that player is on screen:
- Overlap (default) – the player is drawn on top of the overlays. Nothing moves, but the player can obscure overlay content on shorter screens.
- Resize While Sticky – the overlay container shrinks to the space the player leaves while it is on screen, and returns to full size when playback is handed back to the top banner.
- Always Reserve Space – that reduced overlay area is kept at all times, so nothing moves as the user scrolls.
Both reserving modes scale the overlays down rather than cropping them, so design overlay artwork to stay legible at around two thirds of its full height. The Overlay Container Gap sets the minimum space kept between the player and the overlays. Overlap is the default, so a creative only behaves differently once this is changed.
Creative Lab Webinars
Join our resident Head of Creative, John Feltham, as he walks through the process of building creatives using HTML5.
Getting hands on with responsive HTML5
Max total file weight
3.5 MB.
For best performance, all assets should be compressed and optimized to the lowest possible file weight.
Animation
Maximum of 5 loops.
Maximum animation time 30 seconds (may vary by publisher).
Asset type
Responsive HTML5 (either Adnami hosted by sharing a zip-file or served via 3rd party tags).
HTML must be minified and optimized for polite load.
Click tags and tracking
For Adnami hosted creatives, see our clicktags and tracking guide.
To enable video tracking metrics, see our API for measuring VTR guide.
For creatives hosted using 3rd party tags, use the appropriate click methods and trackers for that provider examples.
Other Requirements
Do not link to any files or scripts hosted on external domains. All assets used should be included within the creative zip-file, or hosted on Adnami domains. Linking to resources on non-approved vendors may result in ads being blocked by Google Ads Manager and DV360.
Audio
User-initiated.
Template Details
Zip File
General
| Parameter | Purpose | Default |
|---|---|---|
| File | Upload a zipped HTML bundle (HTML/CSS/JS plus assets) that powers the file. Keep the archive within platform size limits. | |
| 1.0 Click Url (optional) | Destination URL triggered when the user interacts with this element. Include https:// and any tracking parameters. | |
| 1.1 Add automatic click button | Adds an invisible button on top of the creative that opens the Click URL. Note this can block interaction with the creative, for interactive creative set to Disabled and ensure click URLs are implemented at creative level. | Enabled | choices: Enabled, Disabled |
Fluid Scrolling Skin
General
| Parameter | Purpose |
|---|---|
| Default Click URL | Destination URL triggered when the user interacts with this element. Include https:// and any tracking parameters. |
Skin 1
| Parameter | Purpose |
|---|---|
| Click URL | Falls back to Default Click URL if blank. |
| Background Image | Upload the background image asset (JPG, PNG, or WEBP). Follow safe-zone guidance and stay within the platform file-size limits. |
| Main Overlay | Main overlay asset, will use as much space as is available within the overlay container. |
Skin 2
| Parameter | Purpose |
|---|---|
| Click URL | Falls back to Default Click URL if blank. |
| Background Image | Upload the background image asset (JPG, PNG, or WEBP). Follow safe-zone guidance and stay within the platform file-size limits. |
| Main Overlay | Main overlay asset, will use as much space as is available within the overlay container. |
Skin 3
| Parameter | Purpose |
|---|---|
| Click URL | Falls back to Default Click URL if blank. |
| Background Image | Upload the background image asset (JPG, PNG, or WEBP). Follow safe-zone guidance and stay within the platform file-size limits. |
| Main Overlay | Main overlay asset, will use as much space as is available within the overlay container. |
Static Overlays
| Parameter | Purpose | Default |
|---|---|---|
| Top Overlay (optional) | Top-aligned overlay, anchored to the top of the overlay container. | |
| Top Overlay Height | Define the top overlay height using responsive CSS units (px, %, vw, vh) so it scales across screens. | 15% |
| Bottom Overlay (optional) | Bottom-aligned overlay, anchored to the bottom of the overlay container. | |
| Bottom Overlay Height | Define the bottom overlay height using responsive CSS units (px, %, vw, vh) so it scales across screens. | 10% |
Background Config
| Parameter | Purpose | Default |
|---|---|---|
| Scaling Mode | Sets how backgrounds scale. Cover fills and may crop. Contain avoids cropping. None keeps intrinsic size. | cover | choices: cover, contain, none |
| Anchor Point | Anchor Point used to position background assets within the side panel. | top-center | choices: top-left, top-center, top-right, mid-left, mid-center, mid-right, bot-left, bot-center, bot-right |
| Background Colour | Colour of any empty space left after scaling. | #FFF |
Overlay Config
| Parameter | Purpose | Default | Notes |
|---|---|---|---|
| Overlay Container Width | Width of overlay container (% of side panel). | 80% | Required |
| Overlay Container Height | Height of overlay container (% of skin height). | 80% | Required |
| Overlay Container Gap | Minimum space between overlay items. | 1vh | |
| Overlay Container Minimum Width | Minimum width before overlays risk becoming too small. | 120px | |
| Overlay Container Maximum Width | Maximum width to prevent overlays growing too large. | 300px | |
| Hide Overlay Below Minimum Width | Hide overlays if container drops below its minimum width. | False | choices: False, True | |
| Hover Effect | Sets the hover effect when the user hovers over the skin side panel. | scale | choices: disabled, glow, scale, glow & scale | |
| Overlay position | Sets the positioning and alignment of the overlay container, and all the overlays within it. | mid-center | choices: top-left, top-center, top-right, mid-left, mid-center, mid-right, bot-left, bot-center, bot-right | |
| Overlay Container Horizontal Offset | For left or right positioned overlays, this is the horizontal offset for the overlays away from that edge. | ||
| Overlay Container Vertical Offset | For top or bottomed positioned overlays, this is the vertical offset for the overlays away from that edge. |
Sticky Video Player
| Parameter | Purpose | Default |
|---|---|---|
| Video Side | Enables sticky video handoff from top banner into side panel when scrolling. | Disabled | choices: Disabled, Enabled |
| Video Transition | Sets the transition animation used when the sticky video player appears. | Slide In | choices: Disabled, Slide In |
| Video Position | Vertical position of the sticky video within the side panel. | top | choices: top, middle, bottom |
| Max Height | Maximum height applied to the sticky video player. | Match Top Banner Height | choices: Match Top Banner Height, 180px, 200px, 250px, 300px, 350px, 400px |
| Overlay Behaviour | Controls how the side panel overlays react to the sticky video player. Overlap keeps the original behaviour, where the player is drawn on top of the overlays and can obscure them on some screens. Resize While Sticky shrinks the overlay container to the space left by the player while it is on screen, and restores it when the player hands playback back. Always Reserve Space keeps that reduced overlay area at all times, so nothing moves as the user scrolls. The Overlay Container Gap sets the minimum space kept between the player and the overlays. | Overlap | choices: Overlap, Resize While Sticky, Always Reserve Space |
| Vertical Offset | Additional vertical offset applied after positioning (supports px, %, vh). | 0 |