The growth of traffic coming from mobile devices (Smartphones & Tablets), which is about to surpass the desktop traffic in 2014, has made the use of HTML5 indispensable, as these devices don’t support flash by default (see: Apple didn’t killed Flash, HTML5 did).
Like any other language used in advertising, to optimize user-experience and therefore your campaign performance & ROI, you should follow best practices.
Here are the top 6 best pratices about HTML5 creatives we suggest when using Smart Adserver to deliver your HTML5 campaigns.
You can find further official HTML5 information on this page made by IAB.
1) Keep your HTML5 creatives light: optimize your image/video files
The first recommendation is simple but nevertheless crucial for the user experience: keep your creatives light.
. Image with few colors: it is better to save an image as an indexed PNG or GIF than as a JPEG (which has greater array of colors.
. If you don’t need transparency, don’t use it.
. Never, ever, use heavy formats such as RAW or BMP.
. Select your settings accordingly to find the right balance between the highest possible compression rate and lowest resolution, so your image is displayed at its best with a minimal weight.
In case of a video file, you can opt for a MP4 format, compressed as much as possible.
2) Save bandwith: less files = faster downloads
Besides saving precious bandwith by compressing your files size, reducing the number of simultaneous files to be downloaded will also improve your creative loading time.
A common tactics to parallelize downloads of images is using sprites, by combining all your images into a single larger one, and then with their known X and Y coordinates display each specific image of the creative using a classic CSS technique that will point to each one by its coordinates.
In case of numerous and especially repetitive images, the number of parallel downloads will be significantly decreased.
A similar tactic is recommended for JS files (JavasScript): centralizing code into one single file (one single HTTP request) rather than splitting it into several different files is much more efficient.
3) External libraries : Use faster & reusable download sources
Whenever you need to use visual effects (jQuery, jQueryUI, jQueryMobile, Adobe Edge, etc), opt for calling external libraries (using global CDNs, with great response time, such as http://code.jquery.com/jquery-1.10.1.min.js) over physically including their JS file (embedded) in your creative.
It has 2 advantages. First, the HTML5 creative file will be much lighter (the gain in weight can vary from 60kb to 100kb). Second, its saves bandwith, because the use of these libraries is so widespread, most users might have previously downloaded and stored them on their apps or browsers’cache, on their devices while surfing. This optimization makes even more sense when mobile users are connected through 3G.
Remember also that the advantage of easier programming by using libraries such as jQuery and Adobe Edge comes in exchange of loading a big – often over-powered – framework, so for simple creative, just try to stick to pure javascript.
4) Keep your HTML5 creatives’ code light & clean: minimal is key
Optimize the way the creative is coded: use efficient & compact JavaScript, take advantage of CSS techniques using global class-names instead of repeating in-line styles for each tag, and minify your code whenever possible to reduce its final length.
When compacting your code, it’s recommended to use a YUI-based library, such as http://refresh-sf.com/yui/
5) Adapt HTML5 creatives to browser & apps environment
Even if most standard formats (CSS, JavaScript & HTML5) are supported by all the most famous browsers (namely Chrome, Firefox, Internet Explorer, Safari), slight differences occur in the way they are executed. You should make sure, beforehand, all the file formats are compatible with the target browsers. You can refer to caniuse.com for instance.
Specifically regarding mobile advertising, always consider using mobile-specific events, such as Swipe, Pinch-to-Zoom, Touch, etc, and setup HTML mobile properties such as pixel ratio and viewport settings to ensure the correct display and interaction to the end users.
6) Set properly your click URLs
A HTML5 creative is usually displayed on a website within an IFrame, to make sure the layout of the page won’t be affected, by restraining the communication between the creative and the rest of the page. To ensure your landing page will open in a new window/tag, don’t forget to open your destination urls with “target=_blank”, and use them with a click-command in order to properly track your campaigns in the Smart AdServer platform.
email
