HTML5 creatives best practices

This article provides Smart AdServer's recommendations for HTML5 creatives for developers who create HTML5 ads.

Compressing image assets

To keep HTML5 creatives light, you should find a good compromise between image quality and file size. Here are some points to consider:

  • use image files with few colors; indexed png or gif files are much lighter than JPEG files
  • do not use transparency if it is not needed
  • never use heavy file formats such as raw or bmp
  • choose the lowest quality and the maximum compression rate to get the best quality with minimal weight

Reducing the number of HTTP requests

To reduce loading times for end users, you should reduce the number of files downloaded simultaneously (parallel HTTP requests).

In case of images, using sprites are a good strategy:

  • combine all the image files into a single, large image file
  • make use of the coordinates (X and Y) of each image file
  • choose a CSS technique supported by all common browsers
  • use the CSS to point to the image files using their coordinates (X and Y)

In case of javascript, merge all your scripts in a single javascript file. This leads to a single HTTP request, rather than multiple requests for each script.

https in HTML5 creatives

If the HTML5 creative is served in a secure context, the HTML5 creative must load libraries (javascript file, css file, etc.) and any other resources with https. Check all the URLs inside the HTML5 creative and make sure that libraries and resources are called with https. Otherwise, browsers will issue a security warning and ad delivery will fail.

Using external libraries

In your HTML5 creative, you may need visual effects and use common libraries such as jQuery, jQueryUI, jQueryMobile, Adobe Edge, etc. We do not recommend referencing such libraries as external libraries, but rather embed the library codes directly (physically) in your HTML5 creative.

Keeping code light and clean

Follow these guidelines to get light and clean code:

  • use efficient and compact javascript
  • use CSS3 if possible
  • in the CSS, use global class names instead of inline styles for each tag
  • minify code whenever possible to reduce file length
  • use a YUI based library to compress code (e. g. http://refresh-sf.com/)

Adapting to Browser and App environments

Even though modern browsers all support the common web standards (CSS, Javascript, HTML5), they slightly differ in the way they execute code. Check if all your file formats are compatible with the target browsers - for instance using a site like CanIUse.
For mobile advertising, consider mobile-specific events (swipe, pinch-to-zoom, touch, etc.) and set up HTML mobile properties (e. g. pixel ratio and viewport settings).

Video ads

Videos in HTML5 creatives can be integrated using the <video></video> tags. Please refer to the IAB's guidelines on HTML5 creatives here (page 15). You fill find information about:

  • video controls
  • browser support
  • video events
  • autoplay and audio settings
  • delivery and file size

Animations

When using animations, a crucial point to consider is performance in order to avoid overwhelming the CPU. Please refer to the IAB's best practices here (page 18).

Flash to HTML5 conversion tools

To convert Flash creatives to HTML5, you can use conversion tools, such as Swiffy. When using such tools, keep this in mind:

  • the resulting HTML5 creative may differ from the swf original in terms of rasterization, colors and fonts
  • typically, most shapes, embedded fonts, timeline animation, text, movie clips, buttons, and scripting are supported; filters or blending are not supported

Smart AdServer cannot provide support in case of issues when using Flash to HTML5 conversion tools.

About the click target

Keep in mind: For Swiffy-converted creatives, the click target (e. g. target "blank", to open in a new window) cannot be changed after conversion. If you wish to apply a specific click target, this has to be done before conversion with Swiffy.

Was this article helpful?
0 out of 0 found this helpful
Powered by Zendesk