How To Make a Responsive HTML5 banner
Technical specifications for HTML5 creatives
Creative should be sent in a single zip file that contains the static HTML and all of the resources required (the creative should not include resources from 3rd party sites unless stated otherwise).
Creative weight (total file size) should not exceed the allowed weight limit of the placement.
Banner weight is calculated as unZIPed.
The core libraries of the more popular media creation tools should not be included in the zip and will not be counted towards the weight limit of the banner. For example Adobe Animate CC, Adobe Edge, Google Web Designer, Tumult Hype, etc.
Special effects should be used reasonably (respect user experience and hardware load).
Creative must work in all modern browsers (oldest supported browser are IE10, Chrome 20, Firefox 20)
If you want to use a 3rd party viewtracker, then send it with the creative. Don’t inject trackers to the creative code.
With the number of different sreen size in the market growing rapidly we require the banners, we show on mobile devices, to be responsive. Please follow he below link for instructions on how to create responsive banners with most popular creation tools.
How to make a responsive HTML5 banner
All banners require https compliance. This means that the banner cannot make any requests to unsecure domains. All request must be to https.
How to make HTTPS compliant banners
Ekspress Meedia uses AdForm clicktag implementation.
Add the Adform.DHTML.js library to the head section of the banner:
<script> document.write('<script src="'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>'); </script>
That defines the dhtml variable that can be used as follows:
window.open(dhtml.getVar('clickTAG', 'http://www.example.com'), '_blank');
dhtml.getVar('clickTAG') will fetch the clickTAG URL and
window.open will open that URL in a new window.
'http://www.example.com' is NOT the final destination URL but for local testing only.» Detailed instructions on how to add clickTAG
For best user experience and page performance plese keep in mind the following best bractices:
- Make your creative light – Your banner should load as fast as possible.
- Only use assets you need – Delete all unused assets (fonts, grapchics etc)
- Optimize your raster images (jpg, png, gif)
- Avoiding narrow lines and small text – image compressing will make them blurry. You can add small lines and text in HTML
- Save images web optimized, without any metadata
- After saving jpg/png files – optimize your images also with image optimizers like http://kraken.io/ (NB! use lossless option)
- Using Custom fonts
- Custom fonts should also have always fallback to a web-safe font (Arial, etc). NB! Do not forget to test your fallback font.
- Fonts should be provided by Google fonts or included inside of the zip file with rest of the creative resources.
- If you are using Adobe Edge the default fonts are recommended – they have websafe font fallback defined for them.
- WebGL – WebGL is special case and not allowed by default. Please contact us before you use them
Different ad creation tools
Below we have compiled a list of specification pages for most common tools that are used to create html5 banner ads.
Below we have compiled a list of different instructional pages for most common issues and their possible solutions.
With the number of different screen sizes, in the market, growing rapidly we require the banners, shown on mobile devices, to be responsive.
Responsive and scaling in this context can be used interchangeably. A responsive HTML5 banner is a creative that does not have set fixed width and height but instead responds to whatever the width and/or height of the parent container. In most cases the parent container is the width of the device window.
The parent container is the placement where we implement your creative.
In short, a responsive HTML5 banner is 100% width and 100% height of the parent container.
To create a responsive HTML5 banner, create the banner using relative positioning of the elements or use percentages for positions.
To make a responsive HTML5 banner in Adform Studio add make sure that the checkmarks of Responsive Widht and Responsive Height in BANNER SETTINGS under DIMENSIONS are checked.
Adobe Animate CC
To make Adobe Animate CC banner responsive make sure that the settings in Publish Settings are correct.
- Make responsive checkbox must be checked and the dropdown selection must be Both
- Scale to fill visible area checkbox must be checked and the dropdown selection must be Fit in view.
Google Web Designer
To make Google Web Designer banner responsive make sure that when creating a new banner, the Responsive layout checkbox is checked.
Or if making an existing banner responsive, change the root element width to 100% and height to 100%
To make Tumult Hype banner responsive make sure that when creating a new banner, the Scene Size Scale checkboxes are checked.