When building an HTML5 banner, it is crucial to take into consideration the different screen sizes and ad slots available online. The layout needs to be flexible enough to fit into dozens of different configurations.
Use Relative Units Throughout
Set width, padding, and font sizes in percentages or ems instead of pixels. A container set to 100% of its parent will scale with the ad slot, whereas a banner set to 300px will need to be resized for every different placement.
Set a Max-Width on the Container
A fluid layout for an HTML5 banner can stretch too wide on larger screens, so a max-width is usually sufficient to keep such designs properly scaled.
Add Media Queries Inside the Markup
Media queries within the HTML5 banner file itself can be short little clauses to change font size, to move elements around, to hide secondary text at a certain breakpoint size. These are contained within the single HTML5 file for the banner ad. Therefore, the HTML5 banner ad will behave consistently on any given network that has their own display advertising technical standards for the ad.
Use SVG Assets and Scale Fonts with em
SVG graphics scale perfectly without any loss of quality. Using SVG graphics for logos and icons as well as setting heading sizes in em instead of px helps them to scale perfectly with the container in a responsive ad. There is more on HTML 5 Ads at The Bannermen.
Add responsiveness to your banner ad from the very first line of code and it will always look great wherever it is displayed.
