Pushdown
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.
Specifications
Content Pushdown banner ad is a single expanding banner but as the expanded part assets are loaded on expand event the specs are separated for collapsed and expanded states.
Single expanding banner consists of two states:
Collapsed State
- Dimensions: 995x300px
- Weight Limit: 100KB
- Try to avoid black or dark colors in the top right corner of the banner as the loader animation on mouseover/hover appears there.
- The expand button is on the bottom center position and is a black arrow pointing down with white border. This desing is not subject to change.
Expanded State
- Dimensions: 995x700px
- Weight Limit: 150KB
- Optional Video Weight Limit: 2MB
- An optional autoplay muted video can be added to this part.
- This part appears if the user clicks on the expand button on the collapsed part or if the user is mouseover or hover on the collapsed part.
- The collapse button is on the bottom center position and is a black arrow pointing up with white border. This design is not subject to change.