Emails HTML - Dompter la bête

Par David Greiner

Devriez-vous utiliser les CSS ou (comble de l'horreur) les tableaux ? Et que faire quand les images sont désactivées ?

L'email HTML, on aime ou on déteste. Certains aiment la simplicité des emails en texte brut, tandis que d'autres louent la flexibilité et la beauté de l'HTML. Mais en fait il importe peu que vous aimiez ou détestiez les emails HTML parce que, tôt ou tard, un client va vous demander de concevoir, pour ses propres clients, l'un de ces jolis petits trucs qu'on envoie par email, et là que ferez-vous ?

La plupart d'entre nous a tendance à penser que si nous pouvons concevoir une page web, alors que diable, un email HTML devrait être du gâteau ! Mais avant que vous ne décidiez de plonger la tête la première dans la conception d'un email HTML, il y a quelques directives à suivre pour garantir les meilleurs résultats pour vous et vos clients.

Les directives se traduisent grosso modo par ces recommandations : comment vous devriez concevoir votre email, comment vous devriez le coder, et pour finir quel est le contenu indispensable à inclure. Avant d'entrer dans le vif du sujet, cela dit, tâchons de nous mettre d'accord une bonne fois pour toutes. Ces directives sont réservées aux emails pertinents et sollicités, envoyés uniquement aux abonnés ayant demandé à recevoir des messages de votre client sur le sujet spécifique de l'email concerné. Donc si vous êtes un spammeur, détournez les yeux maintenant !

Concevez pour le cas où les images sont désactivées

Accrochez-vous, première mauvaise nouvelle. Par défaut, n'importe lequel de vos destinataires qui utilise AOL, Outlook 2003, Outlook Express et Gmail ne verra jamais les images dans les emails que vous lui enverrez. Pour certaines personnes, cela peut représenter au moins la moitié de tous les gens à qui ils envoient des emails. Embêtant, non ? Je vous avais bien dit que c'était une mauvaise nouvelle.

L'annonce d'Apple iTunes

Voici un exemple qui montre à quel point les choses peuvent dégénérer. Il s'agit d'un email que j'ai reçu de la part d'Apple annonçant le lancement du très attendu iTunes Australia Music Store.

L'email HTML d'Apple que j'ai reçu, avec les images désactivées.

L'email HTML d'Apple que j'ai reçu, avec les images désactivées.

Le même email d'Apple, avec les images actives.

Le même email d'Apple, avec les images actives.

Heureusement, j'ai reconnu l'expéditeur et j'ai aussitôt réactivé les images, mais quelle proportion de leurs destinataires ont vu la version sans les images et ont supprimé l'email immédiatement ?

Nous savons que les images sont parfois bloquées et que cela affectera l'apparence de votre email - mais les images bloquées ne sont en aucun cas un obstacle définitif. Vous n'avez qu'à suivre quelques directives simples quand vous concevez votre email, et vous oublierez que la désactivation des images ait jamais été un problème :

  1. N'utilisez pas les images pour des contenus importants comme les commandes d'action, les titres et les liens vers votre site web.
  2. Demandez à vos destinataires d'ajouter votre adresse à leur carnet chaque fois que vous le pouvez. Cela garantira l'affichage par défaut de vos images dans un certain nombre d'environnements courants de gestion d'emails.
  3. Ajouter un lien en texte brut vers la version HTML de votre email qui sera alors révélé dans toute sa gloire dans un navigateur.
  4. Fournissez un texte alternatif pour toutes les images (qui sera visible dans certains environnements de gestion d'email, surtout Gmail).
  5. Assurez-vous de toujours inclure la largeur et la hauteur dans les balises img de toutes les images. Cela garantit que les images vides de calage ne seront pas étirées, détruisant votre mise en page.

Pour étayer ces recommandations, voici quelques échantillons d'emails qui ont été créés avec ces directives à l'esprit. Remarquez comme ils sont lisibles, même avec les images désactivées.

La Newsletter de Digital Web Magazine

Conçu par Mark Wyner, cet email utilise même une technique maligne de remplacement d'image pour afficher une alternative textuelle quand les images ne sont pas activées. C'est beau et facile à lire dans les deux cas.

La Newsletter Digital Web Magazine sans les images.

La Newsletter Digital Web Magazine sans les images.

Ta Da ! La même newsletter avec les images activées.

Ta Da ! La même newsletter avec les images activées.

La Newsletter de l'Eglise de River City

Conçu par Jon Livingston, cet email est superbe avec les images activées, mais le titre large et clair dans l'en-tête permet quand même de la reconnaître pour ceux ayant désactivé les images.

Newsletter de l'église de River City avec les images activées.

Newsletter de l'église de River City avec les images activées.

Newsletter de l'église de River City Church avec les images désactivées.

Newsletter de l'église de River City Church avec les images désactivées.

Rappelez-vous que presque la moitié de vos destinataires utilise peut-être un petit panneau de prévisualisation pour décider si votre email vaut le coup d'être consulté. Les panneaux de prévisualisation permettent à vos destinataires d'échantillonner un bout de votre email avant de décider de l'ouvrir et de le lire entièrement. Un certain nombre de vos destinataires liront même tous leurs emails dans ce panneau de prévisualisation et ne les ouvriront jamais complètement.

Historiquement, les panneaux de prévisualisation ont eu du succès auprès de clients emails comme Outlook et AOL. Tout cela va bientôt changer avec les deux versions beta les plus récentes des nouveaux Yahoo! Mail et Windows Live Mail (Hotmail), qui se basent toutes deux sur une organisation de l'écran en plusieurs parties, avec un espace de prévisualisation.

Alors comment cette perte soudaine de territoire d'affichage va-t-il impacter votre conception ? Nous avons tous des boîtes de réception pleines d'emails et si vous êtes comme moi vous avez la gâchette facile avec la touche suppression. Si votre design n'attire pas l'attention de votre destinataire avec un contenu pertinent et intéressant en une ou deux secondes, il n'a probablement aucune chance.

Chaque environnement de gestion d'email attribue des superficies différentes à leur panneau de prévisualisation, mais, quelle que soit la solution utilisée par votre destinataire, essayez de vous assurer des points suivants :

  1. Incluez quelque chose qui vous identifiera et attisera même l'intérêt tout en haut de votre email, et de préférence à gauche. Il pourrait s'agir d'un résumé du contenu de l'email ou au moins du nom de votre société/organisation.
  2. Vérifiez vos rapports après chaque envoi d'email pour voir ce qui intéresse le plus les gens et essayez de le rendre visible dans l'espace du panneau de prévisualisation dans le prochain email.
  3. Assurez-vous que ce contenu soit en texte brut afin qu'il soit visible par tous les destinataires par défaut.

Mise en page CSS ou tableaux ?

Ahhh... la question séculaire. Malheureusement, la réponse est toujours « ça dépend ». Contrairement à la croyance populaire, des emails en CSS et intégralement sémantiques sont non seulement possibles mais largement supportés dans la majorité des environnements de gestion de courriers électroniques. Mieux, si vous rédigez correctement vos CSS, votre email peut se rabattre sur une version texte riche de votre message tout à fait utilisable par ceux qui disposeraient d'un faible support CSS.

Aujourd'hui, décider si vous voulez jouer la carte des CSS ou vous replier sur les tableaux et les styles en ligne renvoie à l'époque où vous deviez décider si vous vouliez supporter Netscape ou non. Certains clients l'exigeront, tandis que d'autres réalisent qu'il est temps d'aller de l'avant.

Si vous êtes malchanceux et que le PDG utilise Lotus Notes mais veut que le design de l'email s'affiche partout de la même manière, tableaux et styles en ligne vous attendent. Si vous arrivez à expliquer à votre client à quel point certains clients emails sont défectueux, et que votre design sera accessible à tous tout en se dégradant en une mise en page plus simple pour certains, les CSS sont par contre envisageables.

Chez Campaign Monitor, nous avons testé le support des CSS dans tous les environnements courants de gestion d'email qui existent, donc si vous souhaitez savoir quels sélecteurs et propriétés CSS sont supportés, vous devriez y jeter un coup d'oeil. Abstraction faite des préférences de votre client, il vous est impossible de savoir quel environnement de gestion d'email vos destinataires utiliseront. En fin de compte, pour choisir entre les CSS et les tableaux, il vous faudra faire quelques suppositions.

Si vous envoyez des emails B2B (NdT : "Business to Business", c'est-à-dire d'entreprise à entreprise), il est sans danger de présumer que la plupart de vos destinataires utiliseront Outlook (environ 75%) ou Lotus Notes (9%). Le support des CSS par Outlook est excellent (NdT : du moins jusqu'à présent), mais celui de Lotus est juste déprimant. Là c'est à vous de voir.

Si vous vous occupez d'un envoi B2C (NdT : "Business to Consumer", de l'entreprise vers le consommateur), vous devriez vous attendre à Yahoo!, Hotmail et AOL. Si vous ciblez des utilisateurs friands de nouveautés, vous devriez aussi tenir compte de Gmail (bien que vous devriez être avertis que Gmail n'est pas aussi populaire que vous le pensez et oscille toujours à seulement moins de 5% du marché des emails Internet).

Pour vous rendre les choses plus faciles, voici un rapide résumé des clients emails courants qui supportent l'approche CSS, et de ceux qui se basent sur les tableaux et les styles en ligne pour afficher votre message comme désiré.

Client EmailÀ utiliser
Yahoo! MailCSS
HotmailCSS*
GMailTableaux + CSS en ligne
Outlook et Outlook ExpressCSS
Lotus NotesTableaux + CSS en ligne
AOL 9CSS
ThunderbirdCSS
Mac MailCSS
EntourageCSS
Eudora pour MacTableaux et pas de CSS

* Hotmail rechigne sur un seul gros point - faites attention à bien inclure votre élément <style> dans le <body> et non dans le <head> sans quoi il sera complètement supprimé.

Je réitère ce point parce qu'il me semble particulièrement important. Ne soyez pas honteux si vous êtes forcés à emprunter la voie des tableaux et des styles en ligne. Comme je le mentionnais plus haut, le support des CSS par les clients emails aujourd'hui va du parfait au quasi non-existant. Si votre client exige une homogénéité de votre design pour tous les destinataires, vous n'avez vraiment aucune autre option.

5 choses à éviter

Que vous utilisiez ou non les CSS pour la mise en page, il y a quelques autres gros interdits.

  1. Incluez l'élément <style> dans votre fichier HTML, n'y faites pas référence de l'extérieur. Certains fournisseurs le supprimeront complètement, tandis que d'autres ne l'utiliseront pas si les images sont désactivées. Si vous envoyez des emails vers des destinataires Hotmail, placez l'élément <style> dans le <body> et non dans le <head>.
  2. Évitez d'utiliser les CSS pour le positionnement. Le support est très limité et résultera sûrement en une mise en page cassée pour la plupart de vos destinataires.
  3. N'utilisez pas Flash ou JavaScript. Flash est médiocrement supporté par la plupart des environnements de gestion d'email et soit le JavaScript sera supprimé soit un message de sécurité sera affiché chez vos destinataires.
  4. Assurez-vous de formater correctement votre HTML et vos CSS. Laisser une balise ouverte ou un HTML désordonné pourrait avoir comme résultat que votre email soit filtré comme étant du spam.
  5. Si vous ciblez Gmail, assurez-vous que vous utilisez des CSS en ligne, l'élément <style> sera complètement supprimé.

N'oubliez pas de tester

Personne ne lance un nouveau site sans le vérifier dans quelques navigateurs d'abord, et la même chose s'applique à vos emails HTML. Si vous en envoyez beaucoup, vous devriez essayer de tester chaque nouveau design dans les environnements suivants avant de l'envoyer :

Le seul client pour lequel vous devrez payer est AOL mais ils ont des formules vraiment pas chères parfaites pour tester, pour à peu près $5.95 par mois. Vous pourriez aussi l'envoyer à un ami et lui demander de tester pour vous.

Et puis n'oubliez pas, une fois que votre email sera abouti, vous pourrez généralement réutiliser votre gabarit et seulement ajouter de nouveaux contenus, de sorte que vous n'aurez donc besoin de le retester qu'occasionnellement.

Les contenus essentiels

En plus d'avoir une conception et une intégration correctes, il y a un certain nombre d'items que vous devez inclure dans le contenu de votre email. Nous ne plaisantons pas, il s'agit de contenus protégés par la loi (au moins aux USA) et qui pourraient vous attirer tout un tas de problèmes en n'étant pas inclus.

Les incontournables

  1. Un mécanisme de désinscription qui fonctionne. Il doit être le plus simple possible pour votre destinataire de choisir de ne plus recevoir vos messages. Je recommande un lien de désinscription en un clic unique.
  2. Le nom de votre société et son adresse postale.

Les recommandés

  1. Un lien vers une version web afin que ceux ayant du mal à voir votre email puissent le consulter dans leur navigateur.
  2. Un rapide résumé de la méthode d'obtention de l'adresse email du destinataire (il s'est inscrit sur votre site, il vous a acheté un produit, etc.).
  3. L'adresse email de votre destinataire, afin qu'il puisse s'assurer que l'email lui a bien été envoyé spécifiquement à lui.
  4. Une demande d'être ajouté au carnet d'adresse de votre destinataire afin de garantir que les images soient activées par défaut.
  5. Une version texte brut de votre email. Certains de vos destinataires auront peut-être paramétré leur client email afin de n'afficher que la version texte de chaque email, alors assurez-vous d'envoyer votre email en format multi-part, qui comprend à la fois les versions texte brut et HTML dans un seul message email.

En suivant les directives listées ci-dessus, vous vous assurez un email de la meilleure qualité pour vos destinataires et, espérons-le, les meilleurs résultats pour vos clients.

Fiche technique

À propos de l'auteur

David Greiner est le co-fondateur du site Campaign Monitor basé à Sydney, un outil conçu pour les web designers qui souhaitent gérer des campagnes marketing pour tous leurs clients.

Article du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Tous niveaux

Web design

© 2001-2014 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site