Livraison de l'épisode 5 : Qu'est-ce que la conception d'e-mails ?

Publié: 2019-06-14

Dans cet épisode de Delivering, l'animateur Jason Rodriguez essaie de répondre à la question : « Qu'est-ce que la conception d'e-mails vraiment ? » S'agit-il de savoir comment utiliser HTML et CSS ? Ou va-t-il au-delà du simple code ?

Assurez-vous de vous abonner à Delivering sur iTunes ou Spotify pour écouter les futurs épisodes et rejoindre la conversation sur Twitter en utilisant le hashtag #DeliveringPodcast.

Transcription de l'épisode

À première vue, la conception d'e-mails semble facile. Il s'agit simplement d'écrire du HTML et du CSS et de l'envoyer aux abonnés, n'est-ce pas ? Mais nagez un peu plus profondément et vous ouvrez un monde de complexité qui va bien au-delà du simple code. Dans cet épisode de Delivering, j'essaie de répondre à la question « Qu'est-ce que la conception d'e-mails vraiment ? »

Bienvenue dans Delivering, un podcast sur le marketing par e-mail, la stratégie, l'industrie de l'e-mail et, oui, la conception et le développement d'e-mails. Delivering vous est proposé par Litmus, la plate-forme créative utilisée par plus de 600 000 professionnels de la messagerie pour concevoir, tester, analyser et collaborer sur de meilleures campagnes de messagerie pour des abonnés plus satisfaits. Apprenez-en plus et essayez Litmus gratuitement pendant sept jours sur litmus.com.

La conception d'e-mails est facile, n'est-ce pas ? En fin de compte, le courrier électronique n'est que HTML et CSS, un peu comme écrire une page Web. Il y a la structure globale du document - l'en-tête et le corps d'un fichier HTML - puis tout le contenu à l'intérieur de ce document. Vous utilisez du HTML assez standard pour baliser le contenu, puis du CSS pour styliser ce contenu. Toute personne ayant un peu d'expérience dans la création de pages Web peut, en théorie, coder un e-mail rapide, le télécharger sur un ESP et l'envoyer aux abonnés.

Du moins, c'est ce que beaucoup de gens pensent.

En réalité, HTML et CSS ne sont que le début de la conception d'e-mails. Bien sûr, les concepteurs d'e-mails, les développeurs et les spécialistes du marketing doivent connaître leur code HTML et CSS. Sans cela, vous êtes laissé aux caprices d'un éditeur WYSIWYG et du code spaghetti qu'il produit. Mais qu'est-ce que la conception d'e-mails réellement ?

Au cours de près d'une décennie de conception et de codage des e-mails, j'ai résumé la conception des e-mails en trois éléments clés : atténuer les risques, repousser les limites et créer de meilleures expériences pour tous les abonnés.

Comme beaucoup de gens, j'ai d'abord appris le HTML et le CSS pour créer mes propres sites Web. J'ai grandi avec le mouvement des standards du Web et j'ai suivi religieusement des gens comme Jeffrey Zeldman et Eric Meyer. Chaque fois que j'ai le temps, je le passe à dévorer les écrits et les discours de personnes comme Rachel Andrew et Jen Simmons.

Cependant, lorsque j'ai été chargé de créer mon premier e-mail, j'ai rapidement compris que connaître le HTML et le CSS basés sur des normes ne suffisait pas. Le courrier électronique est sa propre bête, grâce aux dizaines de clients de messagerie populaires qui traitent tous le HTML et le CSS différemment. Tous les clients de messagerie utilisent leurs propres moteurs de rendu pour interpréter et afficher le balisage sous-jacent à nos campagnes par e-mail. Dans certains cas, différentes versions du même client de messagerie utilisent des moteurs de rendu très différents.

Microsoft Outlook est passé de l'utilisation d'Internet Explorer, un moteur de rendu relativement bon pour les e-mails, à l'utilisation de Microsoft Word sur le backend pour afficher les e-mails. Il y a beaucoup de raisons pour lesquelles Microsoft a fait le changement, mais depuis, cela a été une épine dans le pied des spécialistes du marketing par e-mail.

Les clients de messagerie vont du rendu incroyable comme dans Apple Mail au pire des pires. Pensez aux anciennes versions de Lotus Notes, qui ne prenaient pas en charge beaucoup de balisage.

C'est pourquoi une grande partie de la conception des e-mails consiste à atténuer les risques. Il s'agit de comprendre chacun de ces clients de messagerie et les bizarreries associées, et de coder les e-mails de manière défensive. En tant que concepteurs d'e-mails, nous voulons limiter le nombre de problèmes dans nos campagnes. Ce faisant, nous avons développé des techniques et des astuces incroyablement créatives pour aider les e-mails à bien fonctionner sur tous les clients de messagerie.

Les commentaires conditionnels et les tableaux fantômes de Microsoft, le codage hybride et les méthodes Fab Four, même quelque chose d'aussi basique que l'utilisation de CSS en ligne et la limitation du nombre d'éléments HTML et de propriétés CSS utilisés dans un e-mail, visent à réduire les risques.

Beaucoup de concepteurs d'e-mails s'arrêtent là, cependant. Ils utilisent par défaut des techniques de codage défensif sans se demander ce qui peut être accompli d'autre dans le courrier électronique. Heureusement, cependant, il existe des concepteurs d'e-mails qui ne se contentent pas du statu quo. Ce sont eux qui repoussent les limites de la conception des e-mails.

Pour être juste, beaucoup de ces techniques de codage défensives sont créatives et repoussent les limites à leur manière. Mais ils ne devraient se sentir limités que de la meilleure façon possible. Ils devraient inspirer les concepteurs d'e-mails à aller au-delà de ce que l'on considère comme la conception d'e-mails traditionnelle.

C'est pourquoi la deuxième partie d'une conception de courrier électronique efficace repousse ces limites. Comprendre les limites du courrier électronique, mais s'inspirer d'autres domaines comme la conception et le développement Web, ou du point de vue de la conception visuelle, des choses comme la conception d'impression créative, c'est là où il faut.

L'exemple le plus populaire de ce type de conception est la création d'e-mails interactifs. Mark Robbins et l'équipe de Rebelmail ont créé des expériences de paiement entièrement interactives dans la boîte de réception pour des marques comme Burberry. Chez Litmus, nous avons reçu d'énormes réponses après avoir envoyé des flux Twitter, des vidéos d'arrière-plan et des chasses au trésor dans des campagnes par e-mail.

Mais ne pensez pas que les e-mails doivent être interactifs pour repousser les limites et faire évoluer le média. La rédaction, la stratégie, les graphiques et la conception visuelle peuvent également faire bouger les choses. Really Good Emails a développé une audience massive et dévouée non pas en rendant tous leurs e-mails interactifs, mais en adoptant leur voix unique, leur marque d'humour et une personnalisation impressionnante.

L'une de mes newsletters préférées de tous les temps, la défunte newsletter UX de Mailchimp, n'a rien fait d'extraordinaire avec le code. Mais leurs e-mails artistiques - dont mon préféré était un e-mail HTML qui ressemblait à l'époque des années 90, de l'art ASCII en texte brut - a inspiré d'autres designers à intégrer la direction artistique dans leurs propres campagnes d'e-mails et à élargir le concept de ce que les abonnés pensent qu'un bulletin d'information par e-mail peut être.

Bien que certains de ces e-mails qui définissent le genre soient des campagnes ponctuelles juste pour le plaisir, une grande partie de ce travail concerne le dernier aspect d'une bonne conception d'e-mails : créer de meilleures expériences pour les abonnés.

Sans le travail de pionnier de personnes comme Fabio Carneiro et Nicole Merlin, Stig Morten Myre et Remi Parmentier, nous n'aurions pas les techniques que nous tenons tous pour acquises pour offrir de meilleures expériences aux abonnés. Fabio, Nicole et Remi ont tous contribué à la conversation autour de la création d'e-mails réactifs et adaptés aux mobiles que des millions d'abonnés lisent chaque jour, dans le monde entier. Et le dévouement de Stig à percer les secrets de VML, et le monde des boutons et des arrière-plans à l'épreuve des balles, a permis aux abonnés du monde entier de s'engager dans des campagnes par e-mail malgré toute la merde étrange que les clients de messagerie font à notre code.

Plus récemment, nous avons assisté à une énorme poussée pour créer des campagnes par e-mail plus accessibles. Des gens comme Mark Robbins et Paul Airy ont fait un tas de recherches pour nous aider tous à comprendre comment créer des campagnes par e-mail qui peuvent être utilisées par n'importe qui, quelles que soient ses capacités. Et l'accent mis sur l'utilisation de la typographie, du contraste, du texte alternatif pour les images et d'une rédaction plus claire a ouvert le marketing par e-mail à plus de personnes que jamais.

Cela nous ramène donc à la question « Qu'est-ce que la conception d'e-mails ? »

La conception d'e-mails est plus que du code. C'est tellement plus.

La conception d'e-mails consiste à comprendre un support unique. Un média lié à la conception et au développement de sites Web, mais qui se distingue de ceux-ci. Celui qui est construit sur des technologies familières mais qui nécessite les connaissances d'un spécialiste pour bien faire.

Bien sûr, le courrier électronique vise à atténuer le risque posé par tant de clients de messagerie et de moteurs de rendu, chacun avec son propre ensemble de bogues frustrants. Mais il s'agit de dépasser ces risques et limitations et de trouver des moyens créatifs de créer des expériences incroyables et accessibles pour tous nos abonnés.

Alors, la prochaine fois que quelqu'un vous demandera si vous êtes un concepteur d'e-mails, n'hésitez pas à répondre. Ne dites pas : « Oui, mais je travaille aussi sur le Web frontal. » Dites-leur la vérité : dites-leur que vous résolvez des problèmes intéressants et difficiles, et offrez de meilleures expériences en utilisant le canal de communication le plus précieux et le plus populaire au monde, le courrier électronique.

Vous aimez cet épisode de Delivering? Donnez-nous un avis sur iTunes et partagez le podcast avec vos amis. Et assurez-vous de rejoindre la conversation en utilisant le hashtag #DeliveringPodcast sur votre réseau social préféré.