How To Make a Responsive HTML5 banner

How To Make a Responsive HTML5 banner

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.

HTML5

To create a responsive HTML5 banner, create the banner using relative positioning of the elements or use percentages for positions.

Adform Studio

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.

1. Make responsive checkbox must be checked and the dropdown selection must be Both
2. 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%

Tumult Hype

To make Tumult Hype banner responsive make sure that when creating a new banner, the Scene Size Scale checkboxes are checked.