A template for the Seamless Skin format, that allows for the easy creation of a responsive skin creative. Overlays in the side panels are used to ensure your content is always clear and visible, avoiding the need to rely on safe-zones. When used in conjunction with the Seamless Video Top Banner, it is possible to enable sticky video functionality, which keeps the video in view when the top banner is scrolled out of view.
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
Skin Background
- Image: 2560x1440px (JPG)
- Video: 1920x1080px (MP4) (Optimised for web)
Side Overlays:
- Max size of 800x1440px (PNG with transparent background)
For best results, export the overlay PNG assets without any excess empty space - the size and position of the overlay is configurable within the skin settings.
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.
Use the overlays to add static branding and messaging elements on top of the background. The overlays automatically scale and resize your content to fit within the available space, enabling 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.
You can choose how the overlays are positioned within the skin side-panels. By default they are centered, however you can modify the horizontal and vertical alignment of the overlays using the preset positioning options, and add an offset to fine-tune the position (you can use any valid css unit eg 250px, 50%, 20vh etc, measured from the aligned edge).
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 either be added as a separate image/video/HTML/template banner, or else incorporated as part of the design of the background asset (when scaling mode is set to “none”).
To enable the sticky video behaviour, you must use the Seamless Video Top Banner. Then upload your video as the “Sticky Video” in the creative parameters (When using sticky video, leave the parameter “2.0 Video” in the Top Banner template blank, to avoid the total file weight being calculated incorrectly) . You can choose which side of the screen the video should move to when you scroll down (left, right or both), as well as whether the video should be positioned at the top or the bottom of the screen.
Max total file weight
Image: 100 KB - 200 KB
Video: 1 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 two separate clickURL & trackers - one for the main skin body, and another for the top banner.
Audio
Muted by default, user initiated.