Comprendre les défis (et les frustrations) de la conception d'e-mails HTML

Si vous ouvrez un système de gestion de contenu pour créer des pages Web, le processus est assez simple. Les navigateurs Web modernes prennent en charge HTML, CSS et JavaScript pour unstrict ensemble de normes Web. Et, ce ne sont vraiment qu'une poignée de navigateurs dont les concepteurs doivent se soucier. Il y a bien sûr des exceptions… et quelques solutions de contournement simples ou des fonctions spécifiques à ces navigateurs.

En raison des normes générales, il est très facile de développer des constructeurs de pages dans les systèmes de gestion de contenu. Les navigateurs sont conformes à HTML5, CSS et JavaScript… et les développeurs peuvent créer des solutions incroyablement robustes pour créer des pages Web qui répondent aux appareils et qui sont cohérentes sur tous les navigateurs. Il y a vingt ans, pratiquement tous les concepteurs de sites Web utilisaient un logiciel de bureau pour développer des pages Web. Maintenant, il est assez rare qu'un concepteur de sites Web développe une page Web – le plus souvent, il développe des modèles et utilise des éditeurs dans des systèmes de contenu pour remplir le contenu. Les éditeurs de sites Web sont fantastiques.

Mais les éditeurs de messagerie sont terriblement en retard. Voici pourquoi…

Concevoir des e-mails HTML est beaucoup plus complexe que pour un site Web

Si votre entreprise souhaite concevoir un bel e-mail HTML, le processus est exponentiellement plus complexe que la création d'une page Web pour un certain nombre de raisons :

• Aucune norme– Il n'y a AUCUNE adhésion stricte à n'importe quel site Webnormes par des clients de messagerie qui affichent des e-mails HTML. En fait, pratiquementchaque client de messagerie et chaque version de chaque client de messagerie agit différemment. Certains honoreront CSS, les polices externes et le HTML moderne. D'autres respectent certains styles en ligne, n'affichent qu'une collection de polices et ignorent tout sauf les structures pilotées par des tables. C'est en fait assez ridicule à ce stade que personne ne travaille sur cette question. En conséquence, la conception de modèles qui s'affichent de manière cohérente sur les clients et les appareils est devenue une activité importante et peut être assez coûteuse.
• Sécurité du client de messagerie – Juste cette semaine, Apple Mail a été mis à jour pour bloquer par défaut toutes les images dans les e-mails HTML qui ne sont pas intégrées dans l'e-mail. Soit vous donnez la permission de leur charger un e-mail à la fois, soit vous devez activer les paramètres pour désactiver ce paramètre. Outre les paramètres de sécurité du client de messagerie, il existe également des paramètres d'entreprise.
• Sécurité informatique – Votre équipe informatique peut déployer des ensembles de règles strictes sur les objets qui peuvent réellement être rendus dans un e-mail. Si vos images, par exemple, proviennent d'un domaine spécifique qui n'est pas sur liste blanche dans un pare-feu d'entreprise, les images n'apparaîtront tout simplement pas dans votre e-mail. Parfois, nous avons dû développer des e-mails et héberger toutes les images sur le serveur de la société afin que leurs propres employés puissent voir les images.
• Fournisseurs de services de messagerie– Pour aggraver les choses, les constructeurs de messagerie que les fournisseurs de services de messagerie (ESP s) introduisent en fait des problèmes plutôt que de les contraindre. Alors qu'ils font la promotion de leur éditeur estCe que vous voyez est ce que vous obtenez(WYSIWYG ), l'inverse est souvent vrai avec la conception d'e-mails. Vous prévisualiserez l'e-mail sur leur plate-forme, puis le destinataire de l'e-mail verra toutes sortes de problèmes de conception. Les entreprises optent souvent à leur insu pour un éditeur riche en fonctionnalités au lieu d'un éditeur verrouillé en pensant que l'un a plus de fonctionnalités que l'autre. L'inverse est vrai… si vous voulez que les e-mails s'affichent de manière cohérente sur tous les clients de messagerie, le plus simple est le mieux, car moins de problèmes peuvent survenir.
• Rendu du client de messagerie – Il existe des centaines de clients de messagerie, chacun rendant le HTML différemment selon les clients de bureau, les applications, les mobiles et les clients de messagerie Web. Alors que votre éditeur de texte astucieux sur votre fournisseur de service de messagerie peut avoir un paramètre pour mettre un en-tête dans votre e-mail… le rembourrage, les marges, la hauteur de ligne et la taille de la police peuvent différer sur chaque client de messagerie. En conséquence, vous devez simplifier le code HTML et coder chaque élément différemment (voir l'exemple ci-dessous) – et souvent écrire des exceptions spécifiques au client de messagerie – pour obtenir un e-mail à afficher de manière cohérente. Il n'y a pas de types de blocs simples, vous devez faire des mises en page basées sur des tableaux qui sont l'équivalent de la construction pour le Web il y a trente ans. C'est pourquoi toute nouvelle mise en page nécessite à la fois un développement et des tests de clients et d'appareils cross-email. Ce que vous voyez dans votre boîte de réception peut être totalement différent de ce que je vois dans ma boîte de réception. C'est pourquoi des outils de rendu commeCourriel sur acideouTournesol sont indispensables pour garantir que vos nouvelles conceptions fonctionnent sur tous les clients de messagerie. Voici une courte liste de clients de messagerie populaires et de leurs moteurs de rendu :
  • Utilisation d'Apple Mail, d'Outlook pour Mac, d'Android Mail et d'iOS MailKit Web.
  • Utilisation d'Outlook 2000, 2002 et 2003Internet Explorer.
  • Utilisation d'Outlook 2007, 2010 et 2013Microsoft Word(oui, Parole !).
  • Les clients de messagerie Web utilisent le moteur respectif de leur navigateur (par exemple, Safari utilise WebKit et Chrome utilise Blink).

Un exemple de HTML pour Web Vs. E-mail

Si vous voulez un exemple qui illustre la complexité de la conception dans le courrier électronique par rapport au Web, voici un exemple parfait de l'article de Mailbakery19 grandes différences entre le courrier électronique et le Web HTML:

   

      

         

            

               

                  En savoir plus
               
            
         
      
   

   En savoir plus

Comment éviter les problèmes de conception des e-mails

Les problèmes de conception des e-mails peuvent être évités en suivant un processus décent :

1. Conception de modèle – Créez un modèle avec différentes mises en page et blocs de contenu qui englobent tous les styles que vous souhaitez produire dans vos conceptions d'e-mails. Lorsque nous implémentons un client, nous le poussons toujours àconcevoir un e-mail pour le futur – pas seulement la prochaine campagne d'e-mails envoyée. De cette façon, nous pouvons entièrement concevoir, développer, tester et mettre en œuvre les solutions de contournement nécessairesavant deils envoient jamais ce premier e-mail.
2. Test de modèle – Comprendre les clients de messagerie que vos abonnés utilisent et s'assurer que votre e-mail HTML est entièrement testé sur mobile et sur ordinateur est essentiel avant de déployer un modèle. Nous pouvons concevoir un e-mail littéralement à partir d'une mise en page photoshop… mais le découper et le découper en un client de messagerie croisé piloté par tableau est essentiel pour déployer des conceptions d'e-mail optimales et cohérentes.
3. Tests internes – Une fois votre modèle conçu et testé, il doit être envoyé à une liste de départ interne au sein de l'organisation pour examen et approbation. Vous pouvez même commencer avec un sous-ensemble très limité d'individus pour vous assurer d'abord qu'il n'y a pas de pare-feu ou de problèmes de sécurité associés au rendu de l'e-mail en interne. S'il s'agit de créer une instance sur un nouveau fournisseur de services de messagerie, vous pouvez même rencontrer des problèmes de filtrage ou de blocage associés à l'envoi de votre courrier électronique dans la boîte de réception.
4. Gestion des versions de modèle – Ne modifiez pas vos mises en page ou conceptions sans travailler sur une nouvelle version de votre modèle qui peut être conçue, correctement testée et déployée. De nombreuses entreprises aiment les conceptions uniques pour chaque campagne… mais cela nécessite que chaque e-mail soit conçu, développé et déployé pour chaque campagne. Cela ajoute une tonne de temps au processus de marketing par e-mail interne. Et, vous risquez de ne pas comprendre quels éléments de votre e-mail fonctionnent bien par rapport aux éléments qui ne le sont pas. La cohérence n'est pas seulement un moyen de faciliter le processus, elle est également importante pour le comportement de vos abonnés.
5. Exceptions du fournisseur de services de messagerie – Pratiquement tous les fournisseurs de services de messagerie disposent d'un moyen de contourner les problèmes introduits par leur créateur de messagerie. Nous pouvons souvent ajouter du CSS brut à un compte – ou même avoir un bloc de contenu qui doit être inclus dans chaque e-mail – afin que l'entreprise puisse utiliser l'éditeur d'e-mail intégré et ne pas casser la conception de votre e-mail. Bien sûr, cela peut nécessiter une formation et un contrôle des processus pour déployer ces étapes afin de s'assurer qu'elles sont respectées. Ou – vous pouvez littéralement simplement développer la conception de votre e-mail dans une solution qui a fait ses preuves sur tous les clients et appareils, puis la coller à nouveau dans votre fournisseur de services de messagerie.

Plateformes de conception d'e-mails

Étant donné que les plates-formes de services de messagerie n'ont pas réussi à créer et à maintenir des constructeurs inter-clients et multi-appareils rendus de manière cohérente, un certain nombre de grandes plates-formes sont arrivées sur le marché. L'un que nous avons largement utilisé estDéshabiller.

Stripo n'est pas seulement un créateur d'e-mails, il dispose également d'une bibliothèque de plus de 900 modèles qui peuvent être facilement importés. Une fois que vous avez conçu l'e-mail, vous pouvez l'envoyer à plus de 60 ESP et clients de messagerie, notamment Mailchimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Outlook et Gmail. Le meilleur de tous les modèles Stripo est livré avec les tests de rendu des e-mails inclus afin que vous puissiez vous assurer qu'ils ont été testés et fonctionnent de manière cohérente sur plus de 40 clients de messagerie.

Connectez-vous à la démo de Stripo Editor

Divulgation : je crée un lien vers moncabinet de conseil en marketing qui conçoit et déploie des e-mails inter-clients pour des marques leaders dans pratiquement tous les fournisseurs de services de messagerie. Je suis également affilié àDéshabilleret j'utilise mon lien dans cet article.