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)
https in HTML5 creatives
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 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
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).
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
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.