An option for the Seamless Skin format, that allows for the creation of a custom HTML5 responsive skin, via the Zip-file upload tool.
Preview format
Preview format
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
Creative Lab Webinars
Join our resident Head of Creative, John Feltham, as he walks through the process of building hTML5 creatives.
Getting hands on with responsive HTML5
Examples
Recommended default creative dimensions
Skin:
2560x1440px (Responsive HTML5)
Top Banner (optional):
Top Banner:
Image or Video: 1280x180px* (JPG, WEBP or MP4)
HTML5: width: 1280px (100% width), height: 180px (100% height)* (HTML Zip File or 3rd Party Tag)
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.
Billboard placement sizes by country:
- 🇩🇪 DE: 1000x250px
- 🇩🇰 DK: 930x180px
- 🇫🇮 FI: 1000x400px
- 🇫🇷 FR: 970x250px
- 🇳🇴 NO: 980x300px
- 🇸🇪 SE: 1000x240px
- 🇬🇧 UK: 970x250px
Format description and guidance
This template allows for the creation of a HTML5 seamless skin. The skin must be built as responsive HTML5 with the width and height set to 100%, so that it scales responsively based on the size of the window.
A central “content area” should be positioned in the horizontal centre of the skin, with the remaining space used for the skin content.
In order to ensure that the skin adapts correctly to the publisher page, use the code snippet below to fetch the width of the content area (window.contentWidth), and height of the top banner (window.topHeight):
const contentWidth = window.contentWidth || 1000,
topHeight = window.topHeight || 250;
Note - these variables are only available to creative uploaded to Adnami as a zip-file, third party tags must use static values that correspond to the publisher specs.
Structure your skin as show below:
If your top banner contains interactive elements (eg video controls, carousels, multiple clicktags etc), then it should be built as a separate banner (that will be overlaid on top of the skin). Otherwise it can be incorporated as part of the skin.
All creative assets (images, videos, scripts etc) used by your banner must be included within the creative Zip-file. Linking to assets hosted on external severs is not permitted, and may result in your ad being blocked by some vendors. The only exception to this rule is for webfonts hosted by fonts libraries for licensing purposes, such as Adobe Typekit, Google Fonts, MyFonts etc.
Max total file weight
3.5 MB. For best performance, all assets should be compressed and optimized to the lowest possible file weight.
Animation
Maximum animation time 30 seconds (may vary by publisher).
Asset type
Responsive HTML5 (either Adnami hosted by sharing a zip-file or served via 3rd party tags).
HTML must be minified and optimized for polite load.
Click tags and tracking
For Adnami hosted creatives, see our clicktags and tracking guide.
To enable video tracking metrics, see our API for measuring VTR guide.
Audio
User-initiated.