specs formats web mobile 13012015 .pdf



Nom original: specs_formats_web_mobile_13012015.pdfTitre: Le contexteAuteur: vtbn7306

Ce document au format PDF 1.5 a été généré par Acrobat PDFMaker 10.1 pour Word / Adobe PDF Library 10.0, et a été envoyé sur fichier-pdf.fr le 13/10/2016 à 21:25, depuis l'adresse IP 194.12.x.x. La présente page de téléchargement du fichier a été vue 326 fois.
Taille du document: 59 Ko (7 pages).
Confidentialité: fichier public


Aperçu du document


Formats Web Mobile - Spécifications techniques

Formats Web Mobile - Spécifications techniques
Contexte
Le « Web mobile » désigne tout contenu accessible dans le navigateur web d’un appareil mobile. Ce
contexte s’applique donc aux sites internet optimisés pour une consultation sur un appareil mobile
(parfois également appelé « webApp »). Par définition, le « web mobile » se distingue des
applications natives du fait de l’utilisation du navigateur web de l’appareil. Les formats
publicitaires candidats à une diffusion dans ce contexte sont :




La bannière
L’interstitiel
Les liens commerciaux

Bannières
Caractéristiques
La bannière est un format publicitaire standard exposant une surface utile fixe.

Ergonomie





Affichage automatique du format.
Le format peut exploiter 2 types de contenu : image ou HTML5.
Format cliquable sur l’ensemble de sa surface (url unique).
Tracking des click et des impressions par un tiers possible (clic command + pixel).

Bannière Image
Livraison
Les éléments à livrer pour une bannière image sont les suivants :




1 format Bitmap .jpg, .gif, .gif animé, ou .png de 30 ko max en 320x50.
1 url de redirection.
1 pixel de tracking.

L’ensemble des éléments doit être livré 1 semaine avant mise en ligne.

Bannière HTML5
Livraison
Les éléments à livrer pour une bannière HTML5 sont les suivants :




1 format HTML de 35 ko max en 320x50 (pour l’ensemble des éléments de la création).
1 url de redirection.
1 pixel de tracking.

L’ensemble des éléments doit être livré 1 semaine avant mise en ligne.

Réalisation
La bannière est compatible avec les technologies dites « HTML5 » et peut exploiter, de manière
générale, tout contenu compatible avec le navigateur web des appareils mobiles.
Le format HTML5 sera hébergé par nos soins dans un répertoire unique. Il est donc indispensable
que toutes références vers des images externes dans le fichier principal, soient faites de manière

Orange Advertising - Page 1 sur 7 - 13/01/2015

Formats Web Mobile - Spécifications techniques

relative.
L’ensemble du code CSS et javascript devra être inclus dans le fichier HTML principal et ne
pas être lié via des fichiers externes.
La bannière sera diffusée sur iOS et Android. Il est donc indispensable d’utiliser des
technologies compatibles avec les navigateurs de ces 2 OS dans le développement du format.

Redirection
L’url de redirection dans la bannière HTML5 doit être implémenté de la façon suivante (exemple sur
une balise <a> ) :
<a href="javascript:void(0)"
onclick="window.open('%%CLICK_URL_ESC%%%%DEST_URL%%');return false;"></a>

Interstitiels
Caractéristiques
L’interstitiel est un format publicitaire standard plein-écran qui s’affiche en superposition de la
page chargée dans le navigateur web. Ce format répond aux caractéristiques suivantes :




Le format peut exploiter 3 types de contenu : image, HTML5 ou vidéo.
Format cliquable sur l’ensemble de sa surface (url unique).
Tracking des click et des impressions par un tiers possible (clic command + pixel).

Interstitiel Image
Ergonomie





Ouverture et fermeture automatique du format.
La durée totale d’affichage du format n’excédera pas 5 secondes.
Un bouton de fermeture sera automatiquement ajouté par nos soins en haut à droite du
format. Il est recommandé de ne rien afficher de fondamental à la création (logo, accroche)
dans cette zone.
L’image utilisée pour la création sera automatiquement adaptée pour couvrir un maximum
de la surface disponible dans le navigateur de l’appareil. Si des zones restent non
couvertes, ces dernières seront « remplies » par un aplat de couleur (#000 par défaut). Cette
couleur peut être définie par vos soins.

Livraison
Les éléments à livrer pour un interstitiel image sont les suivants :





1 format Bitmap .jpg, .gif, .gif animé, ou .png de 35 ko max en 320x480.
1 url de redirection.
1 pixel de tracking.
1 code couleur hexadécimal.

L’ensemble des éléments doit être livré 1 semaine avant mise en ligne.

Interstitiel HTML5
Ergonomie




Ouverture et fermeture automatique du format.
La durée totale d’affichage du format n’excédera pas 7 secondes.
Prise en charge des modes Portrait / Paysage au chargement du format.

Orange Advertising - Page 2 sur 7 - 13/01/2015

Formats Web Mobile - Spécifications techniques



Un bouton de fermeture sera automatiquement ajouté par nos soins en haut à droite du
format. Il est recommandé de ne rien afficher de fondamental à la création (logo, accroche)
dans cette zone.
Les contenus vidéo ou audio demeurent proscrits pour ce format. La diffusion vidéo reste
possible en choisissant le format « interstitiel vidéo ».

Livraison
Les éléments à livrer pour un interstitiel HTML5 sont les suivants :




1 format HTML de 60 ko max, responsive (pour l’ensemble des éléments de la création).
1 url de redirection encodée.
1 pixel de tracking dont le paramètre src est également encodé.

L’ensemble des éléments doit être livré 1 semaine avant mise en ligne.

Réalisation
L’interstitiel est compatible avec les technologies dites « HTML5 » et peut exploiter, de manière
générale, tout contenu compatible avec le navigateur web des appareils mobiles.
Au regard de la disparité des tailles d’écrans, l’interstitiel doit être conçu de manière responsive
ou encore adaptative. La dimension minimum à adresser est de 320x356. Il est recommandé de
bien tenir compte de l’espace utile réservé par les navigateurs (importance du « chrome » du
navigateur qui réduit l’espace utile).
Le format HTML5 sera hébergé par nos soins dans un répertoire unique. Il est donc indispensable
que toutes références vers des images externes dans le fichier principal, soient faites de manière
relative.
Le fichier HTML à livrer doit prendre en charge l’orientation du device afin de présenter un rendu
optimisé pour les 2 orientations dans le même fichier (portrait / paysage).
L’ensemble du code CSS et javascript devra être inclus dans le fichier HTML principal et ne
pas être lié via des fichiers externes.
L’interstitiel sera diffusé sur iOS et Android. Il est donc indispensable d’utiliser des technologies
compatibles avec les navigateurs de ces 2 OS, dans le développement du format.
Il est important de prendre conscience que le temps de chargement et d’affichage du format est
critique (un temps de chargement trop long sera rédhibitoire pour l’utilisateur). De manière générale,
l’ensemble du contenu de l’interstitiel doit être optimisé pour une diffusion sur réseau mobile 3G.et
la durée de chargement du format ne doit pas excéder 2 secondes. De la même façon, les éléments
graphiques constitutifs du format doivent être pré chargés pour obtenir une exécution fluide de
l’animation.
Enfin, nous vous recommandons de ne pas utiliser d’images dans la partie CSS (pré chargement
des images malaisé).

Redirection
L’url de redirection pour l’interstitiel HTML5 doit être intégrée en deux temps. Tout d’abord, doit être
ajouté à la partie <head> le script suivant :
<script>function getURLParameter(name){return decodeURIComponent((new
RegExp('[?|&]' + name + '=' +
'([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g,
'%20'))||null}</script>
Ensuite, la redirection doit être implémenté de la façon suivante (exemple sur une balise <a> ) :
<a href="javascript:void(0);"
onclick="window.open(getURLParameter('clicktag'));return false;"></a>

Orange Advertising - Page 3 sur 7 - 13/01/2015

Formats Web Mobile - Spécifications techniques

Interstitiel Vidéo
Ergonomie





Ouverture et fermeture automatique du format.
Lancement post-click de la vidéo.
Son ON par défaut.
La durée totale de la vidéo ne devra pas excéder 20 secondes.

Livraison
Les éléments à livrer pour un interstitiel vidéo sont les suivants :






1 format vidéo .mp4 de 2 MO max (cf. paragraphe suivant pour l’encodage).
1 format vidéo .3gp de 2 MO max (cf. paragraphe suivant pour l’encodage).
1 format Bitmap .jpg ou .png de 15 ko max en 320x180 (poster image).
1 url de redirection.
1 pixel de tracking.

L’ensemble des éléments doit être livré 1 semaine avant mise en ligne.

Encodage
Les caractéristiques des vidéos à livrer sont les suivantes :
Fichier .mp4 :


Poids max de la vidéo : 2 Mo

piste vidéo :









Extension : .mp4
Codec : H.264
Profil : main profile
Débits : 700 kbits/sec max
images / s : 25 ips
Compression : CBR 2 passes (pour une meilleure qualité) ou VBR 1 ou 2 passes
640x360 (homothétie HD 16/9)
480x360 (Si source vidéo 4/3)

piste audio :





AAC
96 kbits/s max
44,000 kHz
stéréo ou mono

Fichier .3gp :


Poids max de la vidéo : 2 Mo

piste vidéo :








Extension : .3gp
Codec : H.264
Profil : baseline niveau 1.3
Débits : 500 kbits/sec max
images / s : 15 ips
Compression : VBR 1 passe
352x288

Orange Advertising - Page 4 sur 7 - 13/01/2015

Formats Web Mobile - Spécifications techniques

piste audio :





AAC
32 Kbits/s max
22,000 kHz
stéréo ou mono

Vous trouverez dans le dossier _templates/ des presets d’encodage (Adobe Encoder CS6 / CC)
pour l’encodage de ces 2 types de vidéos.

Interstitiel Vidéo & Habillage
Caractéristiques
L’interstitiel vidéo précédemment décrit peut être décliné pour obtenir un « habillage » de la
vidéo. Cet habillage est constitué de plusieurs images qui sont également des zones cliquables,
utilisées pour la redirection vers le site annonceur. L’habillage est composé de la façon suivante :


En mode Portrait :
o La vidéo prend la largeur de l’écran et est centrée verticalement.
o Les zones restées vides, au-dessus et en-dessous de la vidéo, sont utilisées pour
l’habillage, qui exploite donc une image haute et une image basse.



En mode Paysage :
o La vidéo prend 65% de la largeur de l’écran (ferrée à gauche) et est centrée
verticalement.
o La zone restée vide, à droite de la vidéo, est utilisé pour l’habillage, qui exploite donc
une seule image, placée à droite.

A noter que l’image utilisée lorsque la vidéo est en attente de lancement (poster image) est la
même en portrait et en paysage.

Ergonomie





Ouverture et fermeture automatique du format.
Lancement post-click de la vidéo.
Son ON par défaut.
La durée totale de la vidéo ne devra pas excéder 20 secondes.

Livraison
Les éléments à livrer pour un interstitiel vidéo sont les suivants :












1 format vidéo .mp4 de 2 MO max (cf. paragraphe suivant pour l’encodage).
1 format vidéo .3gp de 2 MO max (cf. paragraphe suivant pour l’encodage).
1 url de redirection.
1 pixel de tracking.
1 format Bitmap .jpg de 15 ko max en 320x180 (poster image).
1 format Bitmap .jpg de 20 ko max en 320x150 (image haute de l’habillage en portrait).
1 code couleur au format hexadécimal (fond de l’image haute de l’habillage en portrait).
1 format Bitmap .jpg de 20 ko max en 320x150 (image basse de l’habillage en portrait).
1 code couleur au format hexadécimal (fond de l’image basse de l’habillage en portrait).
1 format Bitmap .jpg de 30 ko max en 168x320 (image droite de l’habillage en paysage).
1 code couleur au format hexadécimal (fond de l’image droite de l’habillage en paysage).

L’ensemble des éléments doit être livré 1 semaine avant mise en ligne.

Orange Advertising - Page 5 sur 7 - 13/01/2015

Formats Web Mobile - Spécifications techniques

Réalisation
L’interstitiel vidéo & habillage est destiné à être diffusé sur tout type de terminaux mobile (iOS et
Android). L’espace total disponible pour l’affichage dans le navigateur est donc extrêmement
variable du fait de la multiplicité des tailles d’écran sur ces 2 plateformes.
Le format utilise donc une approche responsive pour adapter l’habillage à la taille de l’écran. Pour
que cette approche soit efficace, il est nécessaire de prendre en compte les contraintes
suivantes :


Chaque image constitutive de l’habillage (haute et basse en portrait et droite en paysage) doit
être conçue pour se fondre vers un aplat de couleur. Cette contrainte permet d’afficher la
même image, sans déformation, dans n’importe quelle homothétie, en comblant les espaces
laissés vides par cet aplat de couleur (dont le code hexadécimal doit être également
fourni). Cette contrainte ne pose pas de problèmes pour tout ce qui est logo, accroche, ou
autres boutons CTA. En revanche, pour un visuel contenant des textures, il s’agira de
composer une image qui respecte tout de même cette contrainte.



De la même manière, il est inutile de concevoir des raccords entre les images (entre
l’image haute et l’image poster en portrait par exemple) car nous ne pouvons pas présupposer
de la taille d’affichage des différentes images. Il serait donc impossible de maintenir ces
raccords sur toutes les tailles d’écran.

Vous trouverez dans le dossier _templates/images/ des fichiers .jpg illustrant le montage des
différentes images à fournir, ainsi que différents exemples de réalisation.

Encodage
Les caractéristiques des vidéos à livrer sont les suivantes :
Fichier .mp4 :


Poids max de la vidéo : 2 Mo

piste vidéo :









Extension : .mp4
Codec : H.264
Profil : main profile
Débits : 700 kbits/sec max
images / s : 25 ips
Compression : CBR 2 passes (pour une meilleure qualité) ou VBR 1 ou 2 passes
640x360 (homothétie HD 16/9)
480x360 (Si source vidéo 4/3)

piste audio :





AAC
96 kbits/s max
44,000 kHz
stéréo ou mono

Orange Advertising - Page 6 sur 7 - 13/01/2015

Formats Web Mobile - Spécifications techniques

Fichier .3gp :


Poids max de la vidéo : 2 Mo

piste vidéo :








Extension : .3gp
Codec : H.264
Profil : baseline niveau 1.3
Débits : 500 kbits/sec max
images / s : 15 ips
Compression : VBR 1 passe
352x288

piste audio :





AAC
32 Kbits/s max
22,000 kHz
stéréo ou mono

Vous trouverez dans le dossier _templates/ des presets d’encodage (Adobe Encoder CS6 / CC)
pour l’encodage de ces 2 types de vidéos.

Liens commerciaux
Caractéristiques
Les liens commerciaux sont un ensemble de 3 liens, affichés uniquement sur la page d’accueil du
portail Orange. Chaque lien est doté d’une vignette, d’un titre et d’un corps de texte. Le format
évoqué dans les lignes suivantes concerne un lien (et non pas le bloc de 3).

Ergonomie




Affichage permanent du format.
Format cliquable sur l’ensemble de sa surface (url unique sur la vignette, le titre et le corps).
Tracking des click par un tiers possible (clic command).

Livraison
Les éléments à livrer pour un lien commercial sont les suivants :





1 image Bitmap .jpg de 10 ko maximum en 99x49.
1 titre de 25 caractères maximum.
1 corps de texte de 51 caractères maximum.
1 url de redirection.

L’ensemble des éléments doit être livré 1 semaine avant mise en ligne.

Compatibilité
L’interstitiel, la bannière et les liens commerciaux seront diffusés sur les navigateurs web des
plateformes mobiles iOS et Android. Une diffusion différenciée selon la plateforme est possible
(à l’exception des liens commerciaux).

Orange Advertising - Page 7 sur 7 - 13/01/2015


specs_formats_web_mobile_13012015.pdf - page 1/7
 
specs_formats_web_mobile_13012015.pdf - page 2/7
specs_formats_web_mobile_13012015.pdf - page 3/7
specs_formats_web_mobile_13012015.pdf - page 4/7
specs_formats_web_mobile_13012015.pdf - page 5/7
specs_formats_web_mobile_13012015.pdf - page 6/7
 




Télécharger le fichier (PDF)


specs_formats_web_mobile_13012015.pdf (PDF, 59 Ko)

Télécharger
Formats alternatifs: ZIP



Documents similaires


specs formats web mobile 13012015
specs formats applications natives 28012015
specs maxiarche html5 desktop 04202016 1
offre noel pack des princes 2014 perform
porfolio
techno web seance 3 technologies des donnees

Sur le même sujet..