Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique Marketing direct Contact Emailing dédié Insertion en Newsletter p 5 p 7 p 8 p 9 p 10 p 11 p 12 p 16 p 17
Display classique : les formats Rectangle 300x250, 300x600 Skyscraper 120x600 Mégabannière 728x90 2
Display classique : les livrables > Format : jpg, gif(ou gifanimé), swf* > Poids max : 50ko > Url : simple ou trackée(ne pas utiliser de javascript) *Spécificités du fichier SWF: Pour le flash, nous utilisons le WMODE. Il faut donc intégrer la couleur de fond directement dans le flash et non dans la propriété du projet flash. Pour qu il soit possible de comptabiliser les clics effectués sur le flash par le biais de son ad serveur, il est indispensable d y intégrer un «geturl». Il faut bien penser à placer l instance associée à cette actionscript au dessus de toutes autres instances. Ce sera un bouton rendu transparent et qui comprendra une seule fois le script ci-dessous. Ce script doit être placé de préférence comme étant premier script du Flash. on (release) { geturl (_root.clicktag, "_blank"); ***swf en version 8, Action Script 2*** 3
Display classique : le footer Roll-over 728 x 50 728 x 600 Livrables : 2 fichiers swf (voir spécificités du fichier swf p.3) Images: 100 ko max (poids des 2 fichiers) 4
Publi-rédactionnel Chapô Un titre : 73 caractères max. espaces compris Une image : 243x166 jpg/gif 72 dpi 25ko max Une accroche : 244 caractères max. espaces compris Article (4 à 5 articles max) Texte: 3 000 caractères max. espaces compris Images: 20ko max 5
Publi-rédactionnel Médiatisation dans la Newsletter et sur la Home Page (chapô) : Généré automatiquement via le publi-rédactionnel 6
Jeu Concours Chapô Un titre : 73 caractères max. espaces compris Une image : 243x166 jpg/gif 72 dpi 25ko max Une accroche : 244 caractères max. espaces compris 1 Article Texte: 3 000 caractères max. espaces compris Images: 20ko max 3 à 4 questions + 1 question optin > 3 réponses possibles pour chacune des questions > 1 lien indice vers votre site pour répondre à chacune des questions > Question optin : «souhaitez-vous recevoir les offres de notre partenaire X» 7
Lien partenaire Livrables > Format : jpg, gif (ou gif animé) > Taille : 88x50 px > Cadre image : 1 px code couleur #807e7f > Poids max : 5ko > Titre : 25 caractères max espaces compris > Texte : 65 caractères max espaces compris > Url : simple ou trackée (ne pas utiliser de javascript) 8
Habillage Habillage de Home page de home page de rubriques ou de toutes les pages d une même rubrique Une seule image de fond habille l'ensemble du site. L'habillage peut-être cliquable. Image de Fond Taille : 1280*1280 Format : JPG Poids maxi : 300ko max L'image devra finir en dégradé sur une couleur unie (blanc par ex) La largeur du site est de 980 pixels, ne pas mettre d'informations dans cette largeur 1 1 2 3 Zone "sur Header" La hauteur de cette zone est extensible jusqu'à 100 pixels et abaisse le site d'autant 2 Header 3 Il est possible de modifier la couleur de fond du header (en vert dans l'exemple) Livrable Une image format JPG et une Url trackée ou simple 9
Accueil panoramique Bannière visible à l ouverture de la page Taille : 960x350 Bouton rejouer : S affiche automatiquement à la fermeture de l écran panoramique Format complémentaire : Taille : 300x250 ou 300x600 Livrables > Format : jpg, gif (ou gif animé), swf* (voir page 3 : spécificités du flash) > Poids max : 50ko 100ko pour le flash > Url : simple ou trackée (ne pas utiliser de javascript > Durée de l animation : 7 s maximum 10
Sponsoring de rubrique Couplage deux formats 960x70 300x250 / 300x415 Livrables > Format : jpg, gif(ou gifanimé), swf* (voir page 3 : spécificités du flash) > Poids max : 50ko > Url : simple ou trackée(ne pas utiliser de javascript) 11
Emailing dédié (1/4) Les bonnes pratiques Ne pas oublier dans votre envoi: > L objet du mail > Les adresses de test pour BAT > L intégration des header et footer (voir ci-dessous) Expéditeur: Notretemps.com présente Annonceur L utilisation de l HTML dans l emailing requière une certaine rigueur si l on souhaite que nos mails aboutissent de façon optimale chez les abonnés. La variété des systèmes de lecture d emailings en entreprise (Outlook, Lotus Notes, ) et chez les particuliers (Hotmail, Yahoo, Gmail, ) nécessite de se soumettre à quelques règles. Un mauvais code HTML rend le message illisiblesur certaines boîtes mails, il peut ne pas fonctionner correctement et peut déclencher un blocage total ou un filtrage de l email en dossier «spams / courrier indésirable» Créer un message avec un bon ratio texte dynamique/ image Préconisation 1/3 texte 2/3 image Dans l idéal 1/3 image 2/3 texte (près de 50% des internautes affirment que les images des e-mails qu'ils reçoivent ne sont "rarement" ou "jamais" affichées.) 12
Emailing dédié (2/4) Largeur de l email: entre 600 et 700 px afin d être sûr que vos lecteurs n aient pas à employer l ascenseur horizontal pour lire le message. Poids: plus le code est léger, plus il a de chance d arriver sans problème d interprétation en boîte de réception du destinataire Oter les balises qui sont en entête de mail: Le routeur de Notre Temps intègre directement les balises HTML suivantes : <!DOCTYPE html PUBLIC " "> <html xmlns=" "> <head> <meta http-equiv=" " content=" " /> <title> </title> </head> <body> </body> </html> > Ne pas intégrer ces balises dans vos fichiers HTML, NE GARDER QUE LES CONTENUS DES BALISES <BODY> </BODY> > Toute balise ouverte doit être fermée Positionnement: utiliser une mise en page en tableau et non pas en div pour positionner vos différents éléments. Styles: ne faites pas appel à des feuilles de styles externes ne pas intégrer les styles dans les balises <head> </head> mais les balise <td>, <span> Polices: utiliser une des 5 polices systèmes(arial, Courier New, Times New Roman, Georgia, Verdana) Evitez d écrire en blanc, préférez un fond gris très clair Encodez vos caractères spéciaux en HTML 13
Emailing dédié (3/4) Images: Héberger les images Mettre un lien absolu et non pas relatif (ni une adresse IP) Remplir les balises ALT (elles servent de commentaires d images) Préciser la taille de l image Eviter les images trop grandes qui prennent toute la largeur du mail Eviter les images trop lourdes Les URL de vos mages ne doivent pas avoir de caractères spéciaux ou d espaces Dans la balise <img: ajouter style = display:block; >> permet d éviter une bande de séparation entre les images sur certaines messagerie (ex: hotmail) Fond des cellules: dans les cellules avec une image de fond, prévoyez aussi une couleur de fond (au cas où l image ne s affiche pas ) Objet du message : nous préconisons un message de 35 caractères maximum (espaces compris), évitez les termes trop commerciaux (ex: «gratuit») ou trop médicaux. Evitez également la préposition «à». Ne pas ajouter de pièce jointe W3C: de manière générale, votre code doit respecter les normes internationales de codage W3C. 14
Emailing dédié (4/4) Header à intégrer dans votre code html: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center"> <span style=" font-family:verdana; font-size:10px;"> Si ce message ne s'affiche pas correctement, <a class="clic" href="$http(1)" target="_blank"> Cliquez ici.</a> </span> </td> </tr> </table> Footer à intégrer dans votre code html: <table width="600" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td align="center"> <span style="text-decoration:none; font-weight:normal; font-family: Arial,Verdana, Helvetica, sans-serif; font-size:9px;"> Si vous ne souhaitez plus recevoir la newsletter commerciale de Notretemps.com suivez le lien de <a href="http://www.notretemps.com/desinscription-emails-dinformation.html?email_nl=$u(1)&attribut=2" target="_blank" style="text-decoration:none;"> <span style="text-decoration:none; font-weight:normal; font-family: Arial,Verdana, Helvetica, sans-serif; font-size:9px;"> <u>désabonnement >></u> </span> </a> </span> </td> </tr> </table> 15
Insertion d un pavé en Newsletter éditoriale Livrables > Format : jpg, gif (ou gif animé) > Taille : 500x200 > Poids max : 25ko > Url : simple ou trackée (ne pas utiliser de javascript) 16
Contact technique > Amandine Danlos Chargée de trafic amandine.danlos@bayard-pub.com 01.74.31.48.39 17