For HTML5 ads, a single campaign can be distributed across many different placements, each demanding their own creative solutions as opposed to how best to use the HTML5 as opposed to just resizing the ad.
Check Placement Specs First
We refer to the so-called Standard placements such as leaderboard (728×90), MPU (300×250), skyscraper (160×600) and mobile banner (320×50) in all cases with their typical proportions and within certain weight limits. The IAB has established the so-called Standard ad portfolio, which lists the accepted dimensions as well as the corresponding file size limits. We therefore suggest creating a version list for your single HTML5 campaign and check the corresponding Placement specs first.
Reflow Your Layout Per Size
Typically, it does not work to try to scale down a leaderboard to fit into an MPU. The headline for the leaderboard would typically be written to be a single line of text that is 728px wide. You would then cut down that copy for the mobile banner to be 320×50 and adjust the font size, and the positions of the various elements on the page.
Scale Animation to Format
Big formats (e.g. the Billboard 970×250) need big animations. Small formats (e.g. Mobile Banner 320×50) need short single-step animations, otherwise they get in the way. A useful reference for HTML 5 Ads is //thebannermen.com/banners/animated-ads/html5/.
Size Your CTA Carefully
Keep your call-to-action (CTA) button large enough to be tapable on smaller formats (minimum 44 x 44 pixels for best results). For larger desktop format creatives, ensure the CTA is placed within the ‘safe area’ to avoid it getting clipped by the edges of the ad container.
HTML5 banner ads can be created in order to cover a number of different placements and then published as individual files for each size required. These can then be used as needed.
By treating each of the different placements as separate creative units, it takes more time initially to create the necessary versions for the different placements but you avoid all the problems associated with resizing your content without proper thought to the creative!
