Asymmetrical Seamless Skin

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. 

Guide to skins

The guide covers:

- 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

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)

Top Banner:

  • JPG or PNG with transparent background. Size varies by country:

    • ๐Ÿ‡ฉ๐Ÿ‡ช DE: 970x250px
    • ๐Ÿ‡ฉ๐Ÿ‡ฐ DK: 930x180px
    • ๐Ÿ‡ซ๐Ÿ‡ฎ FI: 1000x400px  (1280x400px for iltalehti.fi)
    • ๐Ÿ‡ณ๐Ÿ‡ด NO: 1000x300px
    • ๐Ÿ‡ธ๐Ÿ‡ช SE: 1000x240px
    • ๐Ÿ‡ฌ๐Ÿ‡ง UK: 970x250px

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.