19
CONSEILS ET BONNES PRATIQUES Tout connaître pour optimiser vos signatures mails !

Conseils et bonnes pratiques

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Conseils et bonnes pratiques

CONSEILS ET BONNES PRATIQUES

Tout connaître pour optimiser vos signatures mails !

Page 2: Conseils et bonnes pratiques

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

Page 3: Conseils et bonnes pratiques

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.

Page 4: Conseils et bonnes pratiques

Focus sur : le contenu

13/0

4/20

23

Page 5: Conseils et bonnes pratiques

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.

Page 6: Conseils et bonnes pratiques

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é.

Page 7: Conseils et bonnes pratiques

Focus sur : le code HTML

13/0

4/20

23

Page 8: Conseils et bonnes pratiques

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.

Page 9: Conseils et bonnes pratiques

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>

Page 10: Conseils et bonnes pratiques

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

Page 11: Conseils et bonnes pratiques

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.

Page 12: Conseils et bonnes pratiques

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

à &agrave;

ç &ccedil;

ê &ecirc;

é &eacute;

ë &ecuml;

<span style="font-family:Verdana, Geneva, sans-serif;">

Page 13: Conseils et bonnes pratiques

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">

Page 14: Conseils et bonnes pratiques

Focus sur : la délivrabilité

13/0

4/20

23

Page 15: Conseils et bonnes pratiques

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

Page 16: Conseils et bonnes pratiques

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

Page 17: Conseils et bonnes pratiques

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

Page 18: Conseils et bonnes pratiques

Besoin d'aide ?

13/0

4/20

23

Tél. : 04 91 11 47 34

Email : [email protected]

Le service customer care est à votre disposition pour toute demande !

Page 19: Conseils et bonnes pratiques

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