A template for the Seamless Skin format, that allows for the easy creation of a responsive skin creative. You can use either an image or a video as a background. Overlays in the side panels are used to ensure branding and messaging are always visible. When used in conjunction with the Skin Top with Sticky Streaming 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
Background
ONE of either:
- Image: 2560x1440px (JPG, PNG or WEBP)
- Video: 1920x1080px (MP4)
Overlays:
- Main overlays - Max size of 800x1440px (PNG or WEBP with transparent background), one asset for each side of the skin.
- Top/Bottom overlays - additional optional overlay elements that will be top/bottom aligned with the overlay container. Max size of 800x500px (PNG or WEBP 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.
Sticky Video
- Sticky video will be automatically enabled when used in conjunction with the Skin Top with Sticky Streaming Video top banner
Format description and guidance
The background asset (image or video) covers the entire screen background. You can change the scaling mode to control the scaling behaviour.
- cover - The asset is scaled to cover the entire screen, without leaving any empty space. May appear cropped at the edges on some screens.
- contain - The asset is scaled to fit fully within the screen, without any cropping, possibly leaving empty space where a background colour will be visible.
- none - The image is not scaled, and appears at 100% its original size.
When using the “cover” or "contain" scaling modes, avoid placing any "key" elements (logos, messaging, CTA etc) on background assets, as they may be cropped on smaller screens. The "none" scaling mode can be used to disable responsive behaviour, and appear at a fixed size.
Use the overlays to add your 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 the overlay container width & height (as a percentage of the total side-panel area) , as well as define minimum and maximum widths (in pixels) to constrain their scaling.
The main overlay is the primary overlay asset, which will fill as much space within the overlay container as is available. Optional top and bottom overlays can be added on each side, allowing for static branding elements such as logos and CTAs to be placed separately from the main overlay, allowing for more advanced responsive layouts. The top/bottom overlays will match the full overlay container width, and you can adjust their heights to control how big they will appear
You can additionally configure 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 selected position 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 if scaling mode is set to “none”, can be incorporated as part of the design of the background asset
To enable the sticky video behaviour, you must use the Skin Top with Sticky Streaming Video template for the top banner. 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.
Creative Lab Webinars
Join our resident Head of Creative, John Feltham, as he walks through the process of building creatives using HTML5.
Diving Deeper into Responsive HTML5
Getting hands on with responsive HTML5
Max total file weight
Video: Files up to 50 MB are accepted, with a recommended maximum length of 20 seconds.
Image: Maximum 200kb
For best performance, all assets should be compressed and optimised to the lowest possible file weight. We recommend using tinypng.com to compress PNGs.
Click tags and tracking
The Seamless Skin format supports two separate clickURL & trackers - one for the main skin body, and another for the top banner.
Audio
Muted by default, user initiated.