Fluid Skin (Image/Video)

The fluid skin format consists of three separate elements - a left panel, a right panel (the side panels), and a top banner. You can use either images or video as the background asset of each element. For best results, combine with a PNG overlays, to create a simple responsive skin. For skin designs with artwork that spans across the entire screen, consider using our seamless skin format instead.

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

Toyota
Lexus
Imerco

Format Specs

Side panels:
Background: 

  • Video - 1080x1920px (9:16) MP4 (Optimised for web)
  • Image - 800x1440px JPG

Overlay: Up to 800x1440px (PNG with transparency), for best results avoid exporting overlay assets with any excess white space, and instead set the size and position within the template.

Top banner:
Background: 1000x180px* (MP4 or JPG)

*Default Top banner dimensions vary by country:

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

Top banner width may vary from publisher to publisher. Always confirm specs with the publishers on your plan before creating skin assets.

There are multiple templates and options available for the top banner, including third party tags and custom HTML5 zip upload.

Format description and guidance

We advise using the new Fluid Skin Responsive Side Panel template for the left and right banners.

Background assets use the โ€œcoverโ€ scaling mode by default, so be aware that the edges may appear cropped for different screen sizes and resolutions. You can set the anchor point of the background via background position - this is the transformation point around which the image will be scaled, and it will be the part of the asset guaranteed to be in view, so make sure to set it to an appropriate value for your specific assets.

Overlays appear on top of the background asset, and should be used for essential static brand elements (eg logos, messaging, CTA etc). The overlay uses the โ€œcontainโ€ CSS behaviour, so will never be cropped. The width and height of the overlay are flexible, you can define a percentage of the total side-panel width/height the overlays should occupy, as well as define minimum and maximum widths (in pixels) to constrain their scaling if you so desire.

You can also set how the overlays are positioned within the skin side-panels. By default they are centered, however you can choose which side or corner they should be anchored to, as well as offset the position on the X or Y axis (custom X/Y position). Custom position offsets will be added to whichever side the asset is positioned from, eg if an overlay is positioned at the bottom, an Overlay Custom Y Position of 10px will set the overlay to be 10px from the bottom of the skin. 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.

Max duration

Autoplaying videos should not exceed 30 seconds in duration.

Click URL

Click tracking is included in the template.

Max total file weight

Combined file weight of all assets must be under 3.5MB

Audio

User-initiated

Secondary pixels supported

Yes

Supported Ad Verification

Adnami supports pixels for impression and viewability tracking from 3rd party providers