A template for the Seamless Skin format, that allows for the easy creation of a responsive skin creative for sites with an asymmetrical layout. Overlays in the side panels should be used to ensure your content is always clear and visible, avoiding the need to rely on safe-zones. When used in conjunction with the Skin Top with Sticky Streaming Video top banner, the format also supports sticky video playback in the larger side panel, so the video can remain in view after the top banner scrolls out of sight.
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
Adventure Travel
Plantagen
Note - Adnami preview page does not currently support asymmetrical layouts, so its best to use the Adnami chrome extension to preview the format in-situ on an asymmetrical layout publisher.
Recommended default creative dimensions
Skin Background
- Image: 2560x1440px (JPG)
- Video: 1920x1080px (MP4)
Side Overlays:
- Max size of 800x1440px (PNG with transparent background)
Sticky Video:
- Sticky video can be enabled in the larger side panel when paired with the Skin Top with Sticky Streaming Video top banner.
Top Banner:
- JPG or PNG with transparent background. Produce assets to the billboard heights below.
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 should 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
For Finnish placements on iltalehti.fi, export the top banner at 1280x400px while keeping a 1000x400px safe zone.
Format description and guidance
The background asset (image or video) spans the entire screen background. You can change the scaling mode to control the scaling behaviour.
- contain - The asset keeps its aspect ratio, but is resized to fit within the given dimension.
- cover - The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit.
- none - The image is not resized and appears at its original size.
When using the "cover" scaling mode, avoid placing any "key" elements (logos, messaging, CTA etc) near the edges of the background asset, as they may be cropped on smaller screens.
We recommend using the overlays to add static branding and messaging elements on top of the background. The overlays automatically scale and resize, so using them will enable responsive functionality for your skin. You can define what width & height (as a percentage of the total side-panel area) the overlays should occupy, as well as define minimum and maximum widths (in pixels) to constrain their scaling. On pages with asymmetrical layouts, the overlays will be scaled differently on each side, so it's important to check publisher specs to ensure your overlay assets are designed appropriately.
You can also choose how the overlays are positioned within the skin side-panels. By default they are centered, however you can modify the horizontal (X) and vertical (Y) position of the overlays using the preset options, or define your own custom position (measured from the top, you can use any valid css unit eg 250px, 50%, 20vh etc).
For best results, export the overlay PNG assets without any excess empty space - this allows the template to handle the overlay scaling and placement more effectively.
The Top Banner of the skin should be added as a static image, produced to the size defined by the publisher specs. It will be automatically repositioned to appear above the content element on the publisher page.
Max total file weight
3.5 MB
For best performance, all assets should be compressed and optimized to the lowest possible file weight. We recommend using tinypng.com to compress PNGs.
Click tags and tracking
The template supports one click URL & tracker.
Template Details
Seamless Image & Streaming Video Skin (Asymmetric)
General
| Parameter | Purpose |
|---|---|
| Click URL | Click destination for the skin. |
Background
| Parameter | Purpose | Default |
|---|---|---|
| Background (Image) | Image asset used as the background. Add only an image or a video, not both. | |
| Background (Video) | Streaming video asset used as the background. Add only an image or a video, not both. | |
| Max Video Stream Weight | Sets the maximum stream weight for the background video. With more than one background video the budget is split between them, and the skin and top banner together must stay within platform limits. | 2.5mb | choices: 3.5mb, 2.5mb, 1.5mb, 1.0mb |
| Scaling Mode | Sets how the background scales. Cover fills the area and may crop. Contain shows the whole asset and may leave empty space. None keeps the intrinsic size. | cover | choices: cover, contain, none |
| Background Anchor Point | Sets where the background is anchored when it is scaled to fill the panel. | top-center | choices: top-left, top-center, top-right, mid-left, mid-center, mid-right, bot-left, bot-center, bot-right |
| Background Minimum Width | Optional minimum width applied to the background asset. | 0 |
| Background Colour | Colour shown wherever the background does not cover the skin. | #000000 |
Side Overlays
| Parameter | Purpose |
|---|---|
| Main Overlay | Main overlay asset, using as much space as is available within the overlay container. |
| Main Overlay | Main overlay asset, using as much space as is available within the overlay container. |
| Top Banner Overlay | Optional overlay shown inside the top banner area. |
Overlay Container
| Parameter | Purpose | Default |
|---|---|---|
| Hover Effect | Sets the effect applied to the overlays when the pointer hovers over the side panel (desktop only). | scale | choices: disabled, glow, scale, glow & scale |
| Overlay Container Width | Sets the width of the overlay container as a percentage of the side panel width. | 80% |
| Overlay Container Height | Sets the height of the overlay container as a percentage of the skin height. | 100% |
| Overlay Container Minimum Width | Sets a minimum width for the overlay container, so the overlays do not become too small on narrow screens. | 120px |
| Overlay Container Maximum Width | Sets a maximum width for the overlay container, so the overlays do not become too large on wide screens. | 300px |
| Overlay Container Horizontal Alignment | Sets the horizontal alignment of the overlay container and every overlay within it. | center | choices: center, inside, outside |
| Overlay Container Horizontal Offset (optional) | Sets a horizontal offset for the overlay container away from its aligned edge (px, %, vw). | |
| Overlay Container Vertical Alignment | Sets the vertical alignment of the overlay container and every overlay within it. | center | choices: top, center, bottom |
| Overlay Container Vertical Offset (optional) | Sets a vertical offset for the overlay container away from its aligned edge (px, %, vh). | |
| Hide Overlays Below Minimum Width | When enabled, hides the overlays whenever the overlay container is narrower than its minimum width. | Disabled | choices: Enabled, Disabled |
Sticky Video Player
| Parameter | Purpose | Default |
|---|---|---|
| Sticky Video | Enables the sticky video player in the larger side panel. When the top banner scrolls out of view its video continues there. | Disabled | choices: Enabled, Disabled |
| Video Transition | Sets the transition animation used when the sticky video player appears. | Slide In | choices: Disabled, Slide In |
| Position | Sets the vertical position of the sticky video player within the side panel. | top | choices: top, middle, bottom |
| Max Height | Sets the maximum height of the sticky video player. Match Top Banner Height copies the height of the top banner. | Match Top Banner Height | choices: Match Top Banner Height, 200px, 250px, 300px, 350px, 400px |
| Vertical Offset | Sets an additional vertical offset from the chosen position (px, %, vh). | 0 |