Les spécifications techniques pour les publicités HTML5

Les navigateurs ainsi que certains réseaux ont arrêté la prise en charge complète des bannières swf. Dans le trio de tête, seul Microsoft avec IE/Edge continue d’activer l’extension Flash par défaut. Les créations HTML nous permettent depuis plusieurs années de proposer une alternative au format flash sans pour autant diffuser une simple image cliquable. Quelles sont les spécifications techniques ? Quels sont les fichiers attendus? Quels sont les éléments à vérifier?

1. Le livrable HTML 5

Une bannière HTML 5, doit être vue comme une page web classique. Les bannières HTML 5 reposent sur l’utilisation des feuilles de style CSS et de fichiers javascript. L’utilisation des feuilles de style et du javascript va permettre à l’annonceur la personnalisation de la bannière mais également son animation.
Le livrable est :

- un fichier HTML intégrant directement l’ensemble des scripts et les déclarations de style compilés. (Certains ad serveurs peuvent supporter plusieurs pages.)
- les éléments images/vidéos utilisés dans la création

Les recommandations de l’IAB sont de ne pas faire appel à des solutions tierces au sein du code.

1.1. Le poids des créations

Comme pour une création flash classique le poids d’une création HTML 5 doit lui aussi être limité. Ne pas dépasser les 50ko en flash était facile. Une création HTML 5 est souvent plus lourde. Il faut compter 200ko. Je recommande cependant de prévoir un chargement maximum de 50ko du contenu principal et le reste du contenu en polite load (chargement après la page parente).
Il faut limiter idéalement le nombre de fichiers joints à la création car chaque image par exemple représente un appel au serveur supplémentaire.

1.2. L’utilisation CPU pour l’utilisateur.

Il est important également de ne pas surcharger les créations en calcul. Le fait d’animer plusieurs éléments dans la création va augmenter la charge de l’ordinateur du visiteur.
Nous pouvons faire un raccourci assez simple en disant que plus la création sera complexe et demandera de ressource au CPU client plus il consommera de batterie.

1.3. Un gif de back-up ?

Afin d’afficher une création flash, l’utilisateur doit avoir installé un plugin à son navigateur. Dans le cadre de la création HTML, même si DoubleClick demande un gif, cela ne sera pas réellement indispensable dans le futur.
La compatibilité entre la création principale et le navigateur peut être détectée au sein de la création.
Des librairies javascript comme modernizr détectent les capacités du navigateur client. Le créatif pourra charger par exemple un gif alternatif dans le cas où certaines fonctionnalités ne seraient pas prises en compte par le navigateur de l’internaute.
Le gif pour les créations HTML 5 est toujours requis dans DFA
Avec l’HTML 5, le gif de back-up ne sera plus à terme indispensable dans le chargement des créations pour les adops.

1.4. Les autres facteurs

Le poids n’est pas le seul facteur à prendre en compte dans une création HTML 5 et particulièrement dans sa vérification.
Le code de la bannière fait souvent appel à des librairies externes. Les créatifs ont besoin de ces librairies pour faire des animations, détecter des comportements. Par exemple des scripts externes peuvent être faits sur des serveurs distants ou des API externes. Il va être important de regarder le temps de chargement ainsi que le poids de l’ensemble de scripts dans la vérification des créations.
Imaginons qu’une création comprend plusieurs typographies chargées par Google Fonts API dans la création. Le chargement en sera impacté.
L’api de Google Fonts permet de charger uniquement les lettres utilisées dans la création si nécessaire.
L’opération de vérification des créations va demander une vérification plus minutieuse pour les ad ops.

2. Améliorer l’expérience utilisateur

2.1 Polite load

Le polite load est une technique qui consiste à charger les éléments de manière différée.
Grace au Javascript, vous avez la possibilité de contrôler le chargement d’éléments externes comme par exemple les images de fin.

Pour une bannière vidéo, afin de ne pas surcharger l’appel des pages hôtes vous allez appeler dans un premier temps un loader avec un pack shot et à la fin du chargement de la page par l’utilisateur, vous allez charger la vidéo. Il en va de même pour les expands.

2.2 Les vidéos

La vidéo offre des possibilités plus intéressantes avec des créations HTML 5. L’adaptation du flux vidéo est possible en fonction du device et du navigateur mais également de la vitesse de connexion. Le bénéfice de ces normes est donc l’adaptation du contenu permettant ainsi d’obtenir la meilleure qualité possible de diffusion en fonction du débit.

A la différence avec flash, les vidéos pourront être ouvertes par l’utilisateur en plein écran tout comme une vidéo en vast sans pour autant être appelées dans un player.

3. Les solutions existantes de contrôle des créations

Afin d’éviter de nombreux allers-retours, la création d’une galerie d’exemples est fortement conseillée. Elle va permettre aux créatifs de se calquer sur vos exemples afin de construire ses créations. Github vous permet de proposer directement des exemples de code de bannière. https://github.com/iheartradio/ads
Codedrop vous permet de proposer aux créatifs la vision directe du code recommandé dans vos bannières ainsi que sa visualisation. http://codepen.io/jay-bee-why/pen/KEdjD

Il existe des sociétés spécialisées dans la vérification de publicités digitales. Ces derniers effectuent des tests aussi bien de performance que de complaisance aux policies. Ces derniers peuvent vous fournir des rapports plus précis sur le contenu de la création ainsi que les éléments qui doivent être modifiés.
Geo Edge : http://www.geoedge.com/
Ad validation : http://advalidation.com/