Conseils et bonnes pratiques

29 688 vues

Publié le

Découvrez des conseils, des astuces et des bonnes pratiques pour optimiser vos signatures mails.

Publié dans : Marketing
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
29 688
Sur SlideShare
0
Issues des intégrations
0
Intégrations
25 695
Actions
Partages
0
Téléchargements
27
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Conseils et bonnes pratiques

  1. 1. CONSEILS ET BONNES PRATIQUES Tout connaître pour optimiser vos signatures mails !
  2. 2. Sommaire  Le contexte …………………………………………………………………………………... p.3  Le contenu ………………………………………………………………………………... p.4 - 6 Le contenu rédactionnel La mise en page  Le code HTML …………………………………………………………………………… p.7 - 13 Différences site web et email Ce qu’il faut savoir La structure HTML type Les images Le contenu texte Les liens  La délivrabilité ………………………………………………………………………….. p. 14 - 17 Pour optimiser la délivrabilité Qq spécificités par messagerie A retenir  Besoin d’aide ? …………………………………………………………………………….. . .p.18
  3. 3. Le contexte  L’email en entreprise L’email s’est imposé comme l’outil le plus utilisé en entreprise du fait qu'il permette de :  Multiplier les communications indépendamment du nombre de correspondants et de leur disponibilité immédiate,  Assurer la traçabilité et le suivi des échanges,  Gérer la diffusion de l’information, personnelle ou au sein d’un groupe, directe ou indirecte,  Classer, archiver et rechercher les communications réalisées.  La signature mail La signature mail, quant à elle, permet de :  Valoriser l’image de marque,  Communiquer,  Recruter sur les réseaux sociaux,  Partager un fil d’actualité,  Dynamiser le trafic web,  Récolter des datas.
  4. 4. Focus sur : le contenu 08/08/2014
  5. 5. Le contenu rédactionnel  Quelles infos mettre dans votre signature mail ? Texte, image, widget, variable, lien (vers une vidéo, un site internet…). Tout est possible !  Infos fixes : logo, site internet, adresse postale…  Infos variables : nom, prénom, fonction, téléphone, adresse email…  La méthode des 7C Communiquer c’est avant tout s’adapter à son interlocuteur !  Clair : respectez la règle d’une idée par phrase,  Concis : privilégiez la synthèse,  Cohérent : donnez à vos écrits un contenu logique,  Concret : illustrez vos propos et suscitez l’intérêt,  Correcte : soignez l’orthographe, la grammaire et la syntaxe,  Convaincant : mettez en œuvre une stratégie rédactionnelle,  Courtois : soyez empathique et n’oubliez pas les formules de politesse. Le concept « user centric attitude » Mettez-vous tout simplement à la place de votre lecteur et devinez ce qu'il aimerait.
  6. 6. La mise en page  Le placement de l’information Les informations importantes au bon endroit !  Positionnez les informations de l’entreprise à gauche (logo, site internet…)  L’appel à l’action principale doit être visible, plutôt à droite.  La charte graphique L’empreinte de l’entreprise, la construction de son image et le renfort de sa stratégie de communication.  Préférez les fonds clairs et les polices foncées,  Evitez les mises en forme trop différentes, les mots en majuscule, les couleurs trop criardes… Le « look and feel » C’est l’impression visuelle du message Le « flat design » Design graphique minimaliste se caractérisant par des aplats de couleurs. Style sobre et épuré.
  7. 7. Focus sur : le code HTML 08/08/2014
  8. 8. Différences site web et email  Le site web Un site web est composé d’un ensemble de pages codées, qui sont lues et interprétées par des navigateurs (Mozilla Firefox, Internet Explorer, Google Chrome…)  Outils flexibles,  Outils intelligents,  Outils capables d’interpréter du code complexe.  L’email Un email peut être lu à partir d’un logiciel dit « client de messagerie lourd » (Outlook, Lotus Note, Thunderbird…) ou d’un webmail (Gmail, Hotmail, Yahoo!Mail…)  Chaque solution possède ses propres contraintes en termes d’accessibilité, d’affichage, et de lutte antispam,  Un même message pourra être parfaitement interprété sur une version d’Outlook 2003 et illisible sur 2007. Site web = structure complexe Email = structure simple Comment être sûr que vos emails seront lisibles ? Il existe des fondamentaux et des bonnes pratiques à mettre en œuvre.
  9. 9. Ce qu’il faut savoir…  … Sur les styles CSS Le principe des feuilles de style consiste à regrouper dans un même document des caractéristiques de mise en forme à des groupes d’éléments.  N’utilisez pas de feuille de style externe car elles sont ignorées par les messageries,  N’ajoutez pas de style dans les balises <head></head> car elles peuvent être supprimées en fonction du client de messagerie,  Intégrez les styles « in line » , c’est-à-dire dans les balises <p>, <td>, <tr> ou <table>.  Astuces Quelques pré-requis pour optimiser le code HTML :  Evitez de raccourcir les CSS :  Préférez les écrire entièrement :  Indiquez les valeurs hexadécimales pour les couleurs : Des styles « en ligne » pour la mise en forme Le concept de feuilles de style Apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS <p style="font:bold 12/24em georgia,times,serif;"> <p style="font-size:12px; line-height:14px; font-family:georgia,times,serif;"> <p style="color:#FFFFFF;">votre texte</p>
  10. 10. La structure HMTL type  Respecter des règles simples Utilisez le HTML standard et n’insérez pas d’autres types de langages tels que Php, Javascript... provoquant des problèmes d’interprétation.  Privilégiez une architecture en tableau (<table>),  Précisez les styles in-line (dans les <p>, <td>, <tr>, <span>…),  Travaillez sur une largeur maximum de 600 px,  N’imbriquez pas plus de 3 tableaux,  N’utilisez pas les fusions de cellules (rowspan, colspan),  Evitez l’utilisation de blocs flottants (<div>),  N’embarquez pas de « Rich Média » (Flash par exemple),  Supprimez les commentaires du code source,  N’ajoutez pas d’effets de survol (on mouse over). Ajouter des langages Php, Javascript, Flash… dans un email est considéré comme suspect Proscrire les copier- coller depuis des logiciels de bureautique (Word, Open Office…). Passez par le bloc note pour faire ensuite votre mise en page dans un éditeur HTML. Template de signature mail
  11. 11. Les images  Hébergement des images Afin que les images puissent être visibles pour vos destinataires, il est indispensable de les héberger.  Abstenez-vous d’utiliser des caractères spéciaux (accents) et/ou des espaces dans le nom de vos images et dossiers. Ils seraient réinterprétés dans l’URL. L’URL peut ne pas fonctionner.  Formats : Privilégiez le format .jpg  Si besoin, redimensionnez votre image avant de l’héberger.  Dans le code HTML Le point sur quelques bonnes pratiques pour vos images. Renseignez :  Un texte alternatif (attribut alt) visible en cas de blocage des images (en fonction du paramétrage de la messagerie),  Une hauteur (height) et une largeur (width) pour éviter un éclatement de structure. Forcez la balise border à 0 afin d’éviter l’apparition d’un contour bleu en cas de lien sur l’image. Insérez un style display:block pour éviter les espaces entre les images <img src="http://wwwmascotte-letsignit/image.jpg" alt=" Monsieur Mailer" width="600" height="114" border="0" > Evitez les images en arrière plan. N’utilisez pas de blocs flottants (float). Créez un tableau et ajoutez l’attribut align.
  12. 12. Le contenu texte  Les polices système Arial, Verdana… si vous utilisez une police autre qu’une police système, il faudra ajouter une image de votre texte.  Privilégiez des polices sans empattement,  Ne cumulez pas plus de 2 polices différentes,  Evitez des tailles de police inférieures à 10px,  Préférez les px plutôt que les pt.  A savoir : dans un groupe de polices, la première aura l’avantage. Dans l’exemple ci- dessous, Verdana aura l’avantage :  Les caractères spéciaux L’encodage des caractères spéciaux est nécessaire dans l’envoi d’email afin que le rendu visuel soit parfait. Quelques exemples ci-contre, sur la droite. En savoir plus : http://www.commentcamarche.net/contents/489-caracteres-speciaux-html  La casse Les termes en majuscule sont souvent interprétés comme des mots agressifs. Mieux vaut opter pour une majuscule maximum par mot. Spécifiez la police souhaitée en premier dans le groupe. Caractère Code HTML à &agrave; ç &ccedil; ê &ecirc; é &eacute; ë &ecuml; <span style="font-family:Verdana, Geneva, sans-serif;">
  13. 13. Les liens  Lien absolu Si vous souhaitez mettre un lien dans votre signature mail, pensez à indiquer une adresse absolue qui utilise l’adresse complète vers un fichier.  A éviter  N’utilisez pas de lien vers des adresses IP,  N’ajoutez pas de caractères spéciaux comme un espace ou un caractère accentué. Sinon pensez à les encoder (Ex : %20 pour un espace),  N’indiquez pas de zones de clic (map-area) car les webmails ne les prennent pas en compte.  A préférer  Les styles dans les liens sont parfois supprimés dans les messageries, ajoutez un span et mettez votre style de lien sur la balise <a> et sur le <span>,  Dirigez l’ouverture du lien dans une nouvelle page avec l’attribut target blank <a style="color:#FF9600;" href="http://www.letsignit.com"><span style= “color#FF9600;”>Retrouvez-nous sur Letsignit</span></a> Landing page - Déterminez vos objectifs - Optimisez l’offre, la conception, le formulaire et l’URL Appel à l’action Optimisez la : - Visibilité - Couleur - Police - Taille UNE seule action est recommandée ! ----------- <a href="http://www.letsignit.com/dossier/fichier.htm">Intitulé du lien</a> <a href="http://www.letsignit.com" target="_blank">
  14. 14. Focus sur : la délivrabilité 08/08/2014
  15. 15. Pour optimiser la délivrabilité  A retenir Dans le code HTML, le texte est primordial afin d’attirer l'œil du lecteur.  Les messageries n'affichent pas automatiquement les images,  43% des destinataires lisent leurs emails sans les images.  Le format Il est conseillé de ne pas dépasser une largeur de 600 pixels pour optimiser la lecture dans la plupart des messageries et selon les résolutions d’écran.  Les animations Le format flash n’est pas supporté par les boîtes de messagerie et a une incidence négative sur la délivrabilité. Des solutions existent :  Une image statique « Clic to Play » Il s’agit de simuler l’insertion d’une vidéo comme sur l’exemple ci-contre:  L’utilisation de Gif animés : pas de son mais bonne qualité. Attention, certaines messageries ne les lisent pas. Favorisez une mise en forme : 50% de texte 50% d’images Bannir certains éléments de vos envois, au risque que le message soit considéré comme du spam
  16. 16. Quelques spécificités par messagerie  Hotmail  Les images sont bloquées par défaut  Ajout de pixels supplémentaires autour des images donc pensez à indiquer un style="display:block;"  Affichage par défaut du texte en gris foncé, si la couleur n’est pas spécifiée dans le code  Gmail  Les feuilles de style CSS ou les balises CSS dans le head sont rejetées  L’image d’arrière-plan, le style « background-image » n’est pas pris en compte  Le background-color saute  Attention aux erreurs de syntaxe dans le code. Elles sont très mal supportées  Outlook 2007  Il faut renseigner les largeurs (« width ») des tables et des images pour éviter l’éclatement de la signature mail  Les images de fond ne s’affichent pas  Les gif animés ne s’animent pas. Seule la première image s’affiche  Lotus  Evitez les formats d’image png  Les bordures sont mal interprétées  Pensez à spécifier la taille du logo dans le style de l’image pour éviter la déformation
  17. 17. Exemple de mise en forme A retenir Logo Préférer : 50% Image 50% Texte Carte de visite Tableau : 600 px maxi Appel à l’action Susciter l’intérêt pour générer le clic Attention à la hauteur : Une signature email ne doit pas ressembler à un emailing Penser à la rotation de vos campagnes : 1 par mois pour capter l’attention Bannir le flash et javascript Opter pour une landing page
  18. 18. Besoin d'aide ? 08/08/2014 Tél. : 04 91 11 47 34 Email : customercare@letsignit.com Le service customer care est à votre disposition pour toute demande !
  19. 19. www.letsignit.com Les Baronnies - bât C 15, Rue Marc Donadille 13013 Marseille Tel. +33 (0)4 91 11 47 30 Fax. +33 (0)4 91 70 50 61

×