conseils et bonnes pratiques
Post on 21-Jun-2015
1.834 Views
Preview:
DESCRIPTION
TRANSCRIPT
CONSEILS ET BONNES PRATIQUES
Tout connaître pour optimiser vos signatures mails !
Sommaire
Le contexte …………………………………………………………………………………... p.3
Le contenu ………………………………………………………………………………... p.4 - 6Le contenu rédactionnelLa mise en page
Le code HTML …………………………………………………………………………… p.7 - 13Diffé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 - 17Pour optimiser la délivrabilité
Qq spécificités par messagerie
A retenir
Besoin d’aide ? …………………………………………………………………………….. . .p.18
Le contexte
L’email en entrepriseL’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 mailLa 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.
Focus sur : le contenu
13/0
4/20
23
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 7CCommuniquer 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.
La mise en page
Le placement de l’informationLes 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 graphiqueL’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é.
Focus sur : le code HTML
13/0
4/20
23
Différences site web et email
Le site webUn 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’emailUn 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.
Ce qu’il faut savoir…
… Sur les styles CSSLe 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>.
AstucesQuelques 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>
La structure HMTL type
Respecter des règles simplesUtilisez 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
Les images
Hébergement des imagesAfin 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 HTMLLe 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.
Le contenu texte
Les polices systèmeArial, 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éciauxL’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 casseLes 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
à à
ç ç
ê ê
é é
ë &ecuml;
<span style="font-family:Verdana, Geneva, sans-serif;">
Les liens
Lien absoluSi 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">
Focus sur : la délivrabilité
13/0
4/20
23
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 texte50% d’images
Bannir certains éléments de vos envois, au risque
que le message soit considéré comme
du spam
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
Exemple de mise en forme
A retenir
Logo
Préférer : 50% Image50% 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
Besoin d'aide ?
13/0
4/20
23
Tél. : 04 91 11 47 34
Email : customercare@letsignit.com
Le service customer care est à votre disposition pour toute demande !
www.letsignit.com
Les Baronnies - bât C15, Rue Marc Donadille
13013 MarseilleTel. +33 (0)4 91 11 47 30Fax. +33 (0)4 91 70 50 61
top related