Bonnes pratiques du développeur

Avant de concevoir des créations Rich Media, il est vivement recommandé de recueillir les spécifications du site. Cependant, il arrive parfois que vous deviez concevoir des créations ou des maquettes avant que le plan média final ou les spécifications du site ne soient disponibles. En respectant les bonnes pratiques et les exigences relatives au plus petit dénominateur commun (PPDC), vous pouvez éviter les éventuels problèmes liés au site.

Ces règles ont été créées sur la base des exigences de la plupart des sites. Il est toutefois possible que le site Web qui diffuse une annonce possède ses propres spécifications et que celles-ci soient différentes des exigences présentées dans cet article.

Consultez également l'article sur les modèles, tags et aperçus DoubleClick Studio dans le centre d'aide.

Pour toutes les créations
  • Taille maximale pour le chargement initial : 40 Ko
    Si la taille de votre fichier dépasse 40 Ko, procédez comme suit :
    • Créez un fichier parent et utilisez le composant Polite Load pour charger des fichiers plus volumineux. Les chargements suivants sont limités à 60 Ko afin que le chargement total ne dépasse pas 100 Ko.
      Remarque : N'utilisez pas le composant Polite Load avec les créations Flash transparent ou au format takeover.
      Pour en savoir plus, consultez l'article Configurer un composant Polite Load dans le centre d'aide.
    • Dans votre bibliothèque Flash, supprimez les composants, images, vidéos ou autres éléments que vous n'utilisez pas.
    • Supprimez la vidéo intégrée de votre fichier SWF et utilisez le composant vidéo de DoubleClick Studio pour lire les fichiers FLV. Pour en savoir plus, consultez le Guide de conception de vidéos – Fondamentaux.
  • Durée maximale de l'animation en lecture automatique : 15 secondes
    Les éditeurs ne font généralement pas de concessions sur ce point. Personne n'a envie de visiter un site où les annonces clignotent et se déplacent partout sur l'écran. Ce serait gênant et agaçant. Faites en sorte que votre animation ne soit pas lue en boucle.
  • Durée maximale totale de l'animation et de la vidéo en lecture automatique : 30 secondes
    Votre animation dure plus de 30 secondes ? Arrêtez l'animation ou insérez un bouton de type "cliquer pour continuer" permettant de continuer la lecture de la vidéo. Les éditeurs sont très pointilleux à ce sujet.
  • Après un clic sur leur bouton de fermeture, toutes les créations doivent :
    • arrêter toutes les vidéos (si la création comprend des vidéos) ;
    • arrêter tous les sons (si la création inclut du son) ;
    • afficher la dernière image de l'annonce.
  • Conventions de sortie pour les annonces basées sur le clic
    • Méthode de repli + sortie : si l'internaute se trouve dans le panneau déplié et en sort (par un clic), l'annonce doit se replier en même temps.
    • Minuteur d'expansion + sortie : le minuteur d'expansion doit s'arrêter au moment où l'internaute clique sur le panneau.
    • Coupure du son de la vidéo + sortie : le son doit se couper lorsque l'internaute quitte l'annonce en cliquant dessus (état replié ou déplié).
    • Minuteur vidéo + sortie : la vidéo et le minuteur doivent s'arrêter lorsque l'internaute quitte l'annonce en cliquant sur un panneau replié ou déplié.

    Consultez les articles du centre d'aide qui traitent des problèmes suivants : J'accède à la page sessionexpired suite à un clic et L'annonce ne se replie pas ou le son de la vidéo ne se coupe pas suite à un clic.

  • Liste des points à vérifier pour le contrôle qualité de base Rich Media
    Appliquez les consignes de contrôle qualité fournies dans l'article Consignes relatives au contrôle qualité Rich Media du centre d'aide pour être sûr de respecter les exigences de base du contrôle qualité Rich Media.
Consignes relatives aux créations HTML5 standards

Outre les consignes se rapportant à toutes les créations, tenez compte des informations suivantes pour les créations HTML5 standards :

Les annonces graphiques HTML5 standards sont constituées d'un fichier HTML et d'un fichier d'images. La limite de 40 Ko doit être calculée en additionnant les tailles du fichier HTML et du fichier d'images.

Par défaut, les créations rich media HTML5 comprennent un composant Polite Load. Cela signifie que la taille du chargement initial de la création ne comprend que le document .html principal (qui fonctionne un peu comme un fichier .swf parent qui charge tous les éléments). Les bibliothèques/feuilles de style .js externes et Enabler sont considérées comme faisant partie d'un chargement suivant et ne sont pas incluses dans le script de test du contrôle qualité.

Par défaut, les créations HTML5 pour DoubleClick Rich Media ne sont acceptées que dans Internet Explorer 9 et les versions ultérieures (le script de test du contrôle qualité est également compatible avec ces versions). Par conséquent, pour permettre à Internet Explorer 8 d'afficher une création HTML5, votre client requiert des solutions de contournement .css et .js afin que le navigateur reconnaisse correctement le format HTML5.

Consignes relatives aux créations vidéo
  • Durée maximale de la vidéo en lecture automatique : 30 secondes
    Si la durée de la vidéo dépasse 30 secondes, insérez un bouton de type "cliquer pour continuer", qui sera actif au bout de 30 secondes, et ajoutez un événement personnalisé.
  • Durée maximale totale de l'animation et de la vidéo en lecture automatique : 30 secondes
    Votre animation et votre vidéo combinées durent plus de 30 secondes ? Arrêtez l'animation ou insérez un bouton de type "cliquer pour continuer" permettant de continuer la lecture de la vidéo. Les éditeurs sont très pointilleux à ce sujet.
  • Vidéo automatique et vidéo déclenchée par l'hôte
    La création ne doit pas inclure plus de 30 secondes de vidéo non déclenchée par l'internaute ou non liée à une interaction de celui-ci. Par ailleurs, si vous utilisez des animations et de la vidéo, la durée totale ne doit pas non plus être supérieure à 30 secondes.
  • Déclenchement audio et vidéo
    Toute lecture vidéo et audio doit être déclenchée par un clic (au bout de 15 secondes pour le son et de 30 secondes pour la vidéo) sur les commandes vidéo (lecture/pause, arrêt, coupure/réactivation du son et nouvelle lecture).
  • Pour garantir une expérience utilisateur optimale, procédez comme suit :
    • Ajoutez systématiquement des commandes vidéo (par exemple, lecture, pause, coupure du son et nouvelle lecture).
    • Faites glisser et déposez les commandes du composant vidéo pour gérer la lecture et effectuer le suivi de l'ensemble des interactions vidéo au sein de votre création. Pour en savoir plus, consultez l'article relatif aux commandes du composant vidéo.
    • Lorsqu'une vidéo est terminée, il est recommandé de masquer les commandes vidéo, sauf le bouton de nouvelle lecture.
  • Insertion d'un bouton de nouvelle lecture à la fin de la vidéo pour la relancer avec le son
    Facultatif, bien que recommandé pour les créations vidéo Rich Media.
  • Le son des vidéos doit être activé par un clic.
    • La plupart des sites interdisent la lecture automatique des vidéos avec le son.
    • Les créations vidéo en lecture automatique doivent être dotées d'une option de nouvelle lecture avec son/réactivation du son.
    • Les vidéos cliquables peuvent être lues avec le son. C'est l'action du clic qui lance également le son.
    • Les vidéos contenues dans les panneaux dépliés par un clic des créations de type "cliquer pour déplier" peuvent être lues automatiquement avec le son.
  • Liste des points à vérifier pour le contrôle qualité audio/vidéo Rich Media
    Veillez à respecter les consignes de contrôle qualité pour être sûr de respecter les exigences du contrôle qualité audio/vidéo Rich Media.
Consignes relatives aux créations expand
  • Taille et direction de l'expansion
    • Les créations au format 300 x 250 ne doivent pas dépasser 500 x 250 une fois dépliées vers la gauche ou la droite.
    • Les créations au format 728 x 90 ne doivent pas dépasser 728 x 180 une fois dépliées vers le haut ou le bas.
    • Les créations au format 160 x 600 ne doivent pas dépasser 300 x 600 une fois dépliées vers la gauche ou la droite.
    • Les créations au format 120 x 600 ne doivent pas dépasser 300 x 600 une fois dépliées vers la gauche ou la droite.
  • Bouton de fermeture requis dans le panneau d'expansion
    Pour tous les types de créations expand : Masthead, pré-expand, Flash transparent, etc.
  • La taille de la zone d'interaction/zone cliquable déclenchant l'expansion ne doit pas dépasser 25 à 33 % de la zone repliée de la création.
  • Le bouton de fermeture ne doit pas se superposer à la zone d'interaction de l'expansion.
    Cela évite que l'internaute ne redéplie immédiatement la création après avoir cliqué sur le bouton de fermeture.
  • Les méthodes d'expansion et de repli doivent correspondre.
    Si une annonce est de type "cliquez pour développer", l'internaute doit également pouvoir la replier via un clic. Si elle se déplie par survol, elle doit pouvoir être repliée lorsque l'internaute éloigne la souris.
  • Les créations pré-expand doivent se replier automatiquement après 15 secondes.
    • Les consignes sont identiques à celles des animations de 15 secondes.
    • Si un internaute interagit avec l'annonce, celle-ci peut rester ouverte.
  • Si les créations pré-expand ne déclenchent pas le minuteur d'expansion Rich Media, procédez comme suit :
    • Souvenez-vous. Le minuteur d'expansion Rich Media ne peut être appelé que pour une expansion déclenchée par l'interaction d'un internaute.
    • Utilisez l'appel startExpanded() pour prédéplier votre création. Pour en savoir plus, consultez le Guide de conception du composant Expanding.
  • La couche div d'une page Web doit se replier en même temps que la création.
  • Lors d'une sortie, une création expand doit :
    • arrêter toutes les vidéos (si la création comprend des vidéos) ;
    • arrêter tous les sons (si la création inclut du son) ;
    • afficher la dernière image de l'annonce ;
    • se replier (si la création est dépliée).
  • Liste des points à vérifier pour le contrôle qualité des créations expand
    Pensez à effectuer les tests indiqués dans l'article Script de test du contrôle qualité – Expand afin de respecter les exigences liées au contrôle qualité des créations expand.
Consignes relatives aux interstitiels Flash transparent
  • Les créations Flash transparent doivent être dotées d'un bouton de fermeture.
    Pour tous les types de créations expand : Masthead, pré-expand, Flash transparent, etc.
  • Les créations Flash transparent doivent se replier après 15 secondes.
    • Après 15 secondes, la création doit se fermer automatiquement.
    • Utilisez l'appel closeCompanion(); pour fermer le composant Floater.
  • Il est déconseillé d'utiliser le composant Polite Load avec les annonces Flash transparent.
    Ces annonces doivent être diffusées directement, sans quoi l'internaute risque de quitter la page avant qu'elles ne s'affichent. Or, les éditeurs cherchent justement à éviter de nuire au confort de leurs visiteurs.
  • Liste des points à vérifier pour le contrôle qualité des créations Flash transparent
    Veillez à suivre les instructions de l'article Script de test du contrôle qualité – Flash transparent afin de respecter les exigences liées au contrôle qualité des créations Flash transparent.
Consignes relatives aux bannières Masthead
Les consignes YouTube sont très spécifiques et doivent être toutes respectées pour qu'une annonce puisse être diffusée sur le site. Nous vous conseillons vivement de consulter le Centre d'aide Display Specs pour vérifier que vos blocs remplissent l'ensemble des exigences des sites avant de les envoyer au contrôle qualité.
  • Toutes les bannières Masthead doivent utiliser le composant Polite Load.
    Insérez dans le shell parent une image d'ouverture (image de back-up) qui se charge dans le contenu Polite Load.
  • La taille du chargement initial de la bannière Masthead ne doit pas dépasser 50 Ko.
  • La taille des fichiers SWF du composant Polite Load et de la vidéo ne doit pas dépasser au total 1 Mo.
  • La taille totale des éléments vidéo doit être inférieure à 10 Mo.
  • Toutes les créations doivent inclure un composant Close Button YouTube, positionné dans l'angle supérieur droit.
    Ce bouton doit être placé dans le fichier parent de la création.
  • Le bloc d'annonces doit être entouré d'une bordure.
  • Le survol d'un bloc d'annonces Masthead ne doit en aucun cas déclencher un son, une vidéo, une action ou un déplacement.
  • Les bannières Masthead expand doivent être dotées d'un bouton "X Réduire".
    Conformément aux consignes YouTube, positionnez ce bouton dans l'angle supérieur gauche de l'annonce et utilisez la formule exacte X Réduire.
  • Lors de sa fermeture ou de sa sortie, la bannière Masthead doit :
    • arrêter toutes les vidéos ;
    • interrompre tous les sons ;
    • afficher la dernière image de l'annonce ;
    • se replier, si elle est dépliée.
  • Toutes les vidéos doivent être dotées de commandes.
    Les commandes suivantes sont obligatoires : lecture, pause, coupure du son, nouvelle lecture et barre de progression.
  • Exigences techniques liées aux bannières Masthead
    Veillez à respecter les spécifications techniques et les exigences du site qui sont propres aux bannières Masthead YouTube, telles qu'elles sont indiquées dans le centre d'aide YouTube.

Consultez également les modèles de bannières Masthead qui sont présentés dans l'article du centre d'aide traitant des modèles, tags et aperçus.

Cet article vous a-t-il été utile ?

Commentaires enregistrés. Merci !
  • Pas utile du tout
  • Pas très utile
  • Plutôt utile
  • Très utile
  • Extrêmement utile