This page shares best practices, tips, and tricks to create an HTML5 file that will render faster on web browsers.

This page also provides you with resources that you can use to create a sophisticated ad by leveraging other JavaScript libraries.

Borders

Most publishers require a 1px border to consider creatives valid. As part of best practices, we highly recommend that a border is included on all ads.

When using the CSS property border, the border will be set outside the element. This means that if the CSS property width is set to 300px, and the property border is set to 1px solid black, the total width of the element will be 302px, not 300px. The same applies to the height property.

To ensure the border is visible to a user within a 300×250 box, the main container width should be set to 298px and the height to 248px, while leaving the CSS property border to 1px solid black.

There are other techniques for adding a border (such as using box-sizing or box-shadow), but they have their own peculiarities, so make sure you do understand these before implementing them.

Margin & Padding

By default, some browsers include a default margin or padding for any HTML page if none is defined. For this reason, you should always enforce the margin and padding around your contents. If you don't want any margin around your content, here's a snippet of CSS you can include in your HTML code:

    <style>
      body {
        margin: 0
        padding: 0
      }
    </style>

Tips & Tricks

Most of these tips were extracted from the HTML5 webinar hosted by IAB with Paul Vincent from Neuranet.

Minimizing loading time

• Use web fonts or SVG for the text.
• Use vector images (ex: SVG) instead of static images when possible.
• Use JPEG/JPG for photos, PNG for graphics (uniform colors, texts on uniform color backgrounds, logos etc.) and images with transparency (use sparingly because of possibly large size) and minimize the use of GIFs.
• Put lighter components (in terms of file weight) at the start of animations.
• Prioritize file loading based on animation frame order when possible.
• On newer browsers, you can use the WebP image format. WebP supports animation and is a great replacement for GIF.
• Minimize external calls. One JavaScript file and one CSS file should be sufficient, or you can even include everything inline within the HTML file.
• Externally-hosted frameworks and library (ex: jQuery) are counted in the max ad file weights, so use sparingly.
• Only include the parts of the libraries you really need, instead of the complete library.
• Minify code.

Animations

• Use CSS animations & CSS transitions where possible.
• Use JavaScript animation if CSS animations & transitions are not available or if more control or more complex animations are required.
• Opt for a JavaScript animation library (ex: Greensock) if you need to do complex animations.
• Minimize the use of simultaneous animations on multiple elements.
• Minimize animation on image or video elements.

3D

• WebGL · WebPlatform Docs
• Three.js – JavaScript 3D library: A JavaScript library using the WebGL API.

Canvas

• Canvas Tutorials · WebPlatform Docs
• CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5: A JavaScript library using the Canvas API.

Compressions

• TinyPNG – Compress WebP, PNG and JPEG images intelligently
• pngquant — lossy PNG compressor
• Easy web-font generator — Fontie: To only include needed characters.

Browser emulators (for testing)

• Browserstack
• Saucelabs