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, JavaScript and CSS the logical solution, as these devices don’t support flash by default (see: Apple didn’t killed Flash, HTML5 did).
Like any other language used in advertising, in order to optimize user-experience and therefore your campaign performance & ROI, you should follow a few best practices.
Here are the top 6 best practices 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 quality for your targets
The first recommendation is simple but nevertheless crucial: keep your creatives light.
There are many available methods to create & compress your images, but keep in mind that your final image format should be suitable for the final devices where it will be displayed:
▪ 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.
▪ Make sure you use the lowest quality & maximum compression rate as possible, so your image is displayed at its best with a minimal weight.
▪ If you don’t need transparency, don’t use it.
▪ Never, ever, use heavy formats such as RAW or BMP.
▪ Make sure you use the lowest quality & maximum compression rate as possible, 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 compressing the files as much as possible, that will save a good deal of bandwidth, reducing the number of files to be downloaded simultaneously (number of parallel HTTP requests) will also greatly increase the loading time for your users.
A common tactics is to parallelize downloads of images using sprites, by combining all of your images into a larger single one, and then with their known X and Y coordinates display each specific image of the creative using a classic CSS cross-browser supported technique that will point to each one by its coordinates.
The number of parallel downloads will be significantly decreased in case of numerous and specially repetitive images.
A similar tactic is recommended for JS files (javascript), since by centralizing your 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), rather than including their JS file physically (embeded) in your creative, prefer calling external libraries, using global CDNS, with good response time, such as http://code.jquery.com/jquery-1.10.1.min.js.
The first advantage of this technique is that the HTML5 creative file can be much lighter (this gain in weight can vary from 60kb to 100kb), and the second but not less important is that Apps and Browser’s caches will be used, saving bandwith. It’s a powerful best pratice, since it is very likely users might have already previously downloaded these commonly-used libraries on their devices while surfing, and already have them stored on cache. 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 creatives try using pure javascript and HTML5.
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 creatives try using pure javascript and HTML5.
4) Keep your code light & clean: minimal & the most efficient are the best
Optimize the way the creative is coded: use efficient & compact JavaScript, take advantage of CSS techniques, CSS3 if possible, 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 environments
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. One great site to consult regarding compatibility is caniuse.com
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.
0 comments:
Post a Comment