Cet article a été publié sur le site graphuccino.com
J’ai récemment été confronté à un gros travail de refonte de campagnes d’emails pour un éditeur de sites (design et intégration). Un peu novice dans le domaine, je pensais naïvement retrouver les contraintes du design et de l’intégration HTML de sites web… et je fus bien surpris des résultats de mes 1ers tests !
Si comme moi, vous avez un jour du analyser en profondeur vos réalisations HTML dans différents lecteurs mails, vous savez alors à quel point les contraintes du web (nombre de configurations de transmission de l’information différentes) sont multipliées lors de la réalisation d’emails HTML…
Et face à chaque problème, la meilleure attitude reste de tirer profit des difficultés pour en apprendre plus. C’est ce que j’ai fait en me documentant sérieusement sur les contraintes et les enjeux du design et de l’intégration d’email HTML… voici donc quelques conseils ou règles que j’ai pu retenir et qui pourraient vous intéresser.
Quelques rappels rapides
Grossièrement, il existe 2 types de lecteurs mail : les logiciels (Outlook, Thunderbird, le mail de mac,…), et les webmails (des services par navigateur du type Gmail, Hotmail, Aol, et tout type de fournisseur d’accès). Et pour ne rien simplifier, les différentes versions de ces lecteurs peuvent parfois prodiguer des interprétations HTML/CSS totalement différentes. Globalement il faut retenir que les lecteurs les plus « difficiles », et donc ceux qui réclament le plus d’attention, sont Outlook 07 (les précédentes versions beaucoup moins), Gmail, et Lotus.
En gardant cela à l’esprit, il faut ensuite connaître sa cible pour lui adapter au mieux ses réalisations. Beaucoup d’outils statistiques permettent d’avoir des informations sur l’audience d’une campagne de mail (notamment grâce à des outils fournis par les gestionnaires de campagnes…). Mais si vous n’avez pas accès aux statistiques précises de votre audience, je vous conseil de jeter un oeil à ce bilan 2008 d’un gros éditeur de campagnes de mail.
1- Largeur maximale de 600px
Il faut bien garder à l’esprit que beaucoup des lecteurs de vos mails utilisent des services web (hotmail, orange, aol, yahoo, gmail,…) pour consulter leurs messages. Souvenez-vous alors des dimensions conseillées pour vos webdesign de pages… entre 800px et 1000px de large. Il faut soustraire de ce chiffre la largeur de la colonne, souvent située à gauche de la page, et parfois d’une seconde colonne publicitaire. On arrive à un habillage externe au mail d’environ entre 170px et 300px sur la plupart des webmails… et que dire de ceux qui n’utilisent que le mode prévisualisation de leurs lecteurs mail (Outlook, Thunderbird, le mail de mac,…). Dans ce cas, la largeur est assez imprévisible.
Pour toutes ces raisons, il est conseillé de se limiter à une largeur de 600px lors du design de ses mail pour être à peu près certain d’une bonne visibilité sur toutes les plateformes. On peut bien sûr aller un peu au delà , mais passer au dessus de 800px me semble très risqué.
2- Pouvoir identifier les principales informations du mail dans les 500 premiers pixels de lecture
Encore une fois les contraintes de dimensions ne sont pas les mêmes que pour un site web… Si vous souhaitez gagner la confiance de votre auditeur et lui faire lire votre mail, il va falloir indiquer clairement de quoi il s’agit : qui êtes vous, et ce que vous souhaitez lui dire. Il faut donc faire figurer votre nom, celui de votre entreprise, ou même un logo, ainsi qu’un titre de mail dans les 300 à 500 premiers pixels de la hauteur du mail. Cela assurera la visibilité de ces informations même en mode de prévisualisation (le mode où ces informations sont les plus nécessaires !).
3- Proposer un lien vers la version web du mail
C’est essentiel car cela vous permet de résoudre la plupart des problèmes pour peu que votre lecteur prenne la peine de se rendre sur cette version web… imaginez donc l’un de vos lecteur, qui souhaiterait accéder au contenu de votre mail, mais qui pour une quelconque raison ne pourrait pas le faire correctement dans son lecteur mail. Il serait impensable de ne pas lui proposer un moyen de visualiser ce mail directement dans son navigateur. Il faut donc bien penser à publier une version de vos mail sur votre serveur web, et d’inclure un lien pointant dessus dans votre version mail.
4- Proposer un lien de désabonnement
Encore une fois c’est essentiel ! Si vous entretenez une liste de diffusion régulière, c’est même obligatoire… alors surtout ne l’oubliez pas.
5- Proposer à vos lecteurs de vous ajouter à leur carnet d’adresse
Cela peut paraître idiot, anodin, ou un peu candide… pourtant, si cela est bien fait, les résultats peuvent être très intéressants aussi bien pour vous que pour vos lecteurs. N’hésitez pas à expliquer d’ailleurs à l’utilisateur les avantages de cet ajout (pas de passage dans les spams, images débloquées,…).
6- Un équilibre texte/images
Il faut absolument proscrire les mails tout en image ! C’est certainement l’un des meilleurs moyens de faire passer directement vos messages par la case spam. Une bonne moitié de contenu textuel est essentielle, surtout dans les secteurs « à risque » : jeux concours, commerce, séduction, rencontres,…
7- Un texte alternatif sur vos images
Encore une fois, c’est extrêmement important. Il faut bien que vous gardiez à l’esprit que les images de votre mail seront bloquées par défaut sur la plupart des lecteurs (Outlook, Gmail, Hotmail, Thunderbird,…). Un texte alternatif vous permet d’informer le lecteur sur le contenu de votre mail avant qu’il n’ait besoin de débloquer les images. Pire, il faut savoir que environ 30% de vos lecteurs ne sauront même pas reconnaître des images désactivées, et ne les afficheront donc jamais…
<img alt="Texte de description" />
8- Déclarer toutes les dimensions de vos images en HTML
Vos images seront presque toujours désactivées par défaut, mais il ne faudrait pas qu’en plus votre mise en page soit détruite ! Il faut bien penser à déclarer toutes les dimensions de vos images en HTML pour éviter que les espaces qu’elles remplissent d’ordinaire dans votre mise en page ne soient « écrasés ».
<img width="10px" height="20px" />
9- Eviter les images sur les éléments importants
Même avec de bons textes alternatifs, une image désactivée, ce n’est pas très engageant… les liens importants de vos mails devraient dans la mesure du possible ne pas être intégrés sous forme d’images pour être les plus efficaces possible.
10- Eviter les termes à risque dans l’intitulé des liens
Même si les mécaniques du classement d’un mail en spam restent relativement obscures, il semble évident qu’une abondance de termes du type « Cliquez-ici », ou encore « Gagnez xxxxx euro », est extrêmement néfaste. Je ne vais pas établir une liste exhaustive des termes en questions, le bon sens suffit bien souvent pour éviter les tournures généralistes ou racoleuses.
11- Eviter les URL dans l’intitulé des liens
Un peu plus subtil que le point précédent, mais peut être tout aussi risqué. L’utilisation d’URL (du type http://www.google.fr) peut être assimilée à du phishing (hameçonnage) : une technique qui consiste à obtenir des informations (mot de passe, login, numéro de carte,…) en simulant l’interface d’un autre site, ou pour notre exemple, les liens vers des sites de confiance.
12- Ne pas aller au delà de 8 tableaux imbriqués
Un seul lecteur mail (Lotus) semble ne pas réussir à interpréter le HTML au delà de 8 tableaux imbriqués. Il faut noter que ce lecteur touche une cible assez particulière et ne représentent souvent pas une grosse part de l’audience. D’un autre côté, on peut se questionner sur l’utilité d’aller au delà de 8 tableaux HTML imbriqués…
13- Attention aux GIF animés
Ils resteront tout simplement statiques (sur la 1ère image) sur Outlook 07… pour les autres navigateurs ça passe à priori. Prenez donc soin de bien inclure votre message dans la 1ère image de vos GIF animés.
14- Pas de contenu Flash
Votre contenu Flash ne sera pas affiché sur la plupart des lecteurs… pire il pourra même provoquer certaines alertes de sécurité sur quelques lecteurs !
15- Eviter la transparence sur les PNG
Je vais rester un peu plus retenu sur ce point qui reste flou pour moi… il semblerait que la transparence des PNG pose encore problème sur la plupart des lecteurs mail.
16- Eviter le mapping d’images
Cette technique consiste à déclarer plusieurs liens sur une seule image grâce à un système de coordonnées. Je ne sais même pas si c’est une technique encore utilisée dans les intégrations de sites web, en tout cas je pense qu’on peut assez facilement s’en passer dans la plupart des cas.
17- Eviter les images CSS
Les images placées dans un style « background:url(image.jpg); » risquent de ne pas être affichées dans certains lecteurs… c’est une chose à savoir et à anticiper, pour ne pas, par exemple se retrouver avec du texte blanc sur un fond blanc au cas ou les images CSS d’arrière plan seraient désactivées. Les lecteurs concernés sont principalement Gmail et Outlook 07.
18- Pas de formulaires
Les formulaires ne seront pas actifs dans la plupart des lecteurs mail (AOL, hotmail, Outlook 03, Yahoo mail classic,…). Ils ne seront même pas affichés dans Outlook 07, ce qui pourra en plus vous causer des problèmes de design. Préférez toujours un lien vers un formulaire web.
19- Déclarer tout vos styles en ligne dans les balises HTML
Si il semble évident que les liens vers des feuilles de style externes sont à proscrire, il faut faire le tri entre les 2 méthodes restantes. Doit-on déclarer nos styles dans des balises HTML « <style> .votrestyle { color:#fff; } </style> », ou bien directement en ligne dans les balises HTML « <p style= »color:#fff; »> » ? En fait, la 1ère méthode suffirait si l’on oubliait Gmail… malheureusement, le lecteur de Google n’interprète que les styles en ligne. Si l’on souhaite s’assurer une compatibilité maximale, il faut donc s’en tenir aux styles en ligne, même si cela est beaucoup plus contraignant pour les mises à jour. Remarquez que pour les utilisateurs de Mac et de l’éditeur de texte Textmate, il existe une série de bundles pour passer directement vos styles CSS en styles en ligne. Notez également que si vous décidez d’utiliser des balises « <style> », il faudra absolument les placer dans le body de votre page et pas dans le header.
20- Toujours prévoir une version texte brut de vos mails
Dans le pire des cas, il est toujours bon de pouvoir offrir un résumé de votre mail écrit en texte brut. Placez le en fin de mail pour ne pas entacher votre design si vous le souhaitez.
Bonus : 21- Balisage sémantique, ou mise en page par tableaux ?
Idéalement, il faudrait bien sûr utiliser un joli balisage HTML qui respecte sémantiquement le contenu… malheureusement, il n’exite pas réellement de standard pour l’interprétation des mails, comme c’est le cas pour le web. Et très peu de propriétés CSS de positionnement sont correctement interprétées par certains des lecteurs mail les plus populaires (Outlook, Gmail, Hotmail,…) : pas de margin ou de padding, pas de positions absolute ou relative, et parfois même pas de float (détail des supports de propriétés CSS dans les mails). Je vous conseille donc de vous rabattre sur les tableaux pour tout ce qui concerne le positionnement de vos éléments… c’est un peu lourd, c’est un peu moche, mais ca passe à peu près correctement partout en attendant une standardisation des interprétations des propriétés CSS. Pour ce qui concerne les propriétés CSS qui ne touchent pas au positionnement (couleur, taille de texte,…), vous devriez pouvoir vous en sortir avec de simples styles CSS en ligne.
Dans tout les cas
Soyez toujours capable d’anticiper le rendu de vos mails ! Je trouve que cette citation résume bien la problématique : « beautiful designs for recipients with CSS-friendly clients and accessible, functional versions for everyone else » (un design agréable pour les les lecteurs proches des standards, une version fonctionnelle pour les autres).
Sources :
http://www.pompage.net/pompe/emails-html-dompter-la-bete/
http://www.campaignmonitor.com
http://www.campaignmonitor.com/stats/email-clients/
http://www.email-standards.org/
