1.1 images 1.2 videos

1 S PECIFICATIONS
1.1 I MAGES
Les images doivent respecter les spécifications suivantes :

Extensions de fichier : jpg, jpeg, png, gif

Hauteur max. image : 800 px

Largeur max. image : 728 px

Poids max. par image : 59.3 Kb

La totalité des images ne doit pas dépasser un poids total de 10Mb
REMARQUES : Les images ne doivent pas être appelées par le CSS.
L’utilisation d’images en Base64 n’est pas recommandée pour du mobile, spécialement sur
les terminaux non récents. Cela entraine une grosse consommation CPU.
1.2 V IDEOS
Les vidéos doivent respecter les spécifications suivantes :

Extension de fichier : mp4

Codec vidéo : H264, Mpeg-4 (H264 recommandé)

Codec audio : HE-AAC, AAC-LC

Fréquence d'images : entre 24 et 30 ips

Débit global maximum en 3G : 280 kbps

Taille de la vidéo recommandée pour une diffusion téléphone : 480x270

La totalité des vidéos (s’il y en a plusieurs) ne doit pas dépasser 20 Mb
REMARQUE : pour une diffusion sur certains modèles iPhone (3G) et pour les devices Android,
il est nécessaire de s’assurer que les entête atom moov sont correctement positionnés dans
la vidéo.
http://atomicparsley.sourceforge.net/mpeg-4files.html
QTIndexSwapper vous permettra de repositionner les atom moov en début de fichier.
http://renaun.com/blog/code/qtindexswapper/
1.3 CSS
Les CSS doivent respecter les spécifications suivantes :

Taille maximale de l’ensemble du CSS : 5Mb
ATTENTION : Ne pas mettre d’image dans le CSS.
(ex. background: transparent url("../image.jpg") no-repeat 0 0;)
AUTRES INFORMATIONS UTILES :

Au niveau du nommage des éléments, le css ne devra jamais comporter de règle
générale telle que " div{ ... } ". Trop de conflits pourraient en découler.

Attention à bien tester la compatibilité des propriétés CSS 3 sur les différentes
versions d'OS.
1.4 JS
Les JS doivent respecter les spécifications suivantes :

Taille maximale de l’ensemble du JavaScript: 5Mb
1.5 I MPLEMENTATION
DU LIE N PRINCIPAL ( URL DE CLICK )
L’url de click de la créa est directement saisie dans l’AdServer afin d’effectuer le tracking.
Votre code HTML doit prévoir un lien pointant non pas sur l’url destinataire mais vers
« CLICKURL ».
Par exemple :
<a href="CLICKURL"></a>
2 V IDEO ET AUTOPLAY VID EO
Il est possible de programmer un interstitiel contenant une vidéo en autoplay si la diffusion
est prévue sur iOS et que l’application cible embarque nos SDK compatible vidéo autoplay.
Pour cela il s’agit d’insérer une balise HTML5 vidéo.
La balise vidéo HTML5 doit respecter certaines spécifications afin d’assurer une compatibilité
maximale sur mobile.
Aussi il est recommandé de simplifier la balise vidéo au maximum et d'éviter les sous-balises
auto-fermantes.
par exemple :
<video width="320" height="240" controls="controls"
type="video/mp4 >
Your browser does not support the video tag.
</video>
src="movie.mp4 »
Il est possible d'enrichir la balise avec les attributs suivants :






width et height déterminent les dimensions de la vidéo comme pour une image,
poster détermine la vignette d'arrière-plan de la vidéo,
controls permet à l'utilisateur de contrôler la lecture,
autoplay lance la lecture de la vidéo automatiquement,
preload détermine le chargement de la vidéo.
webkit-playsinline Détermine si la vidéo doit être lue en vignette sur iOS. Si cet
attribut est absent la vidéo sera lue en plein écran.
Plus de précisions concernant cette balise sur ces pages :
http://www.w3schools.com/html5/html5_video.asp
http://www.w3schools.com/html5/tag_video.asp
Afin d'assurer une meilleure lecture sur iOS et Android il est recommandé de
paramétrer les dimensions de la vidéo ainsi que le preload.
Typiquement la balise HTML5 vidéo aura cette forme :
<video id="video" src="video/movie.mp4"
width="320" height="180"
poster="images/poster.jpg"
preload="auto"
controls
webkit-playsinline
autoplay>
Your browser does not support the HTML5 video tag.
</video>
3 HD ET R ETINA
Pour afficher des créas dans une meilleur définition sur les iPhone récents et les
Smartphones Android HD, vous pouvez transmettre des créas compatibles HD et Retina.
(L’insertion d’images dans le css n’étant pas faisable, l’utilisation de la méthode css n’est pas
applicable.)
Il s’agira d’utiliser le snippet jQuery disponible ici :
https://github.com/mcilvena/jQuery-Retina-Display-Plugin
Une démo est accessible sur le site de l’auteur
http://troymcilvena.com/post/998277515/jquery-retina.
Ce snippet reconnait la densité de l’écran du smartphone et affiche ou non la version HD des
images.
Il faut donc fournir des images HD dont la taille est le double de l’image utilisée dans la créa,
puis de les nommer comme suit :

Image1.jpg pour l’image de taille normale (ex : 320x460px)

Image1-2x.jpg pour l’image HD (ex : 640x920px )
Attention à vérifier que les spécifications liées aux images (cf. 2.1) soient respectées.
4 R ECOMMANDATIONS GENERALES POUR LE MOBILE
4.1 R ECOMMANDATIONS I OS
Les animations CSS3 peuvent manquer de fluidité selon les versions d’iOS, voire de ne pas
fonctionner sous iOS3.x et inférieur, il est préférable de coder les animation en JavaScript.
Il conviendra dans tous les cas de tester le rendu final sur différents iOS.
4.2 R ECOMMANDATIONS A NDROID
Gérer les différentes résolutions d’écran
Afin de gérer les différentes résolutions d’écran, il s’agit de penser à l’adaptation visuelle de
la création en conséquence.
-
soit positionner les éléments en relatif.
Soit implémenter une div conteneur qui sera intégrée de façon à être
automatiquement centrée dans l’écran.
En raison d'un problème de prise en charge de la balise HTML5 canvas dans une webview sur
Android, nous recommandons de ne pas utiliser cette balise sur cet OS.
CSS
Le préfixe « -webkit : » ne fonctionne pas sur toutes les versions d’Android, il faut ajouter les
mêmes animations sans « -webkit » et avec « -moz » :
Ex :
-webkit-transform : …
-moz-transform : …
transform : …
Les animations CSS3 peuvent manquer de fluidité voire ne pas fonctionner selon la version
Android du terminal, il est préférable de coder les animations en JavaScript.
Il conviendra dans tous les cas de tester le rendu final sur différents terminaux.
5 C OMMENT PREPARER LE ZIP POUR L ’ ADSERVER
La création est à compresser sous la forme d’un zip contenant :
o le fichier html
o les images
o le/les vidéos
o le js
o le css
Note : Le zip fourni ne devra pas contenir de zip.
Ci-dessous différents exemples d’arborescences compatibles :
CREA_INTERTITIAL_1
|_ index.html
|_ css.css
|_ image1.jpg
|_ video.mp4
|_ image2.jpg
|_image3.jpg
|_ javascript.jpg
CREA_INTERTITIAL_2
|_ index.html
|_css[dir]
|_ css.css
|_images[dir]
|_ image1.jpg
|_ image2.jpg
|_image3.jpg
|_videos [dir]
|_ video.mp4
|_Javascript[dir]
|_ javascript.jpg
CREA_INTERTITIAL_3 (LE JAVASCRIPT ET LE CSS SONT ‘INLINE’ DANS LE HTML)
|_ index.html
|_ image1.jpg
|_ image2.jpg
|_image3.jpg