Marketing par e-mail et automatisationVidéos marketing et ventes

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. Prise en charge des navigateurs Web modernes HTML, CSS, et JavaScript selon des normes Web strictes. Et ce ne sont là qu’une poignée de navigateurs dont les concepteurs doivent se soucier. Il existe bien sûr des exceptions… et quelques solutions de contournement simples ou fonctions spécifiques à ces navigateurs.

En raison des normes globales, il est simple de développer des générateurs 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 réactives aux appareils et cohérentes entre les navigateurs. Il y a vingt ans, pratiquement tous les concepteurs de sites Web utilisaient des logiciels de bureau pour développer des pages Web. Aujourd'hui, 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 plusieurs raisons :

  • Aucune norme – Il n’y a AUCUNE adhésion stricte aux normes Web par les clients de messagerie qui affichent les e-mails HTML. Pratiquement chaque client de messagerie et chaque version de chaque client de messagerie agit différemment. Certains honoreront le CSS, les polices externes et le HTML moderne. D'autres honorent certains styles en ligne, affichent uniquement une collection de polices et ignorent tout sauf les structures pilotées par des tables. C'est assez ridicule 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 s’avérer assez coûteuse.
  • Sécurité du client de messagerie – Récemment, Apple Mail a été mis à jour pour bloquer par défaut toutes les images des 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 (ESPs) introduisent réellement des problèmes plutôt que de les contraindre. Alors qu'ils font la promotion de leur éditeur sous la forme Ce 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 sa plateforme et le destinataire verra tous les problèmes de conception. Les entreprises optent souvent, sans le savoir, pour un éditeur riche en fonctionnalités au lieu d’un éditeur verrouillé, pensant qu’il dispose de plus de fonctionnalités. L’inverse est vrai… si vous souhaitez que les e-mails s’affichent de manière cohérente sur tous les clients de messagerie, plus c’est simple, mieux c’est, car moins de problèmes peuvent se produire.
  • Rendu du client de messagerie – Des centaines de clients de messagerie affichent le HTML différemment sur les ordinateurs de bureau, les applications, les appareils mobiles et les clients de messagerie Web. Bien que votre astucieux éditeur de texte sur votre fournisseur de services de messagerie puisse disposer d'un paramètre permettant de mettre un en-tête dans votre courrier électronique, le remplissage, les marges, la hauteur de ligne et la taille de la police peuvent différer pour 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 rendu cohérent d'un e-mail. Il n'y a pas de types de blocs simples, vous devez créer des mises en page basées sur des tableaux qui sont l'équivalent de la création 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 multi-clients et appareils de messagerie. 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 comme Courriel sur acide or Tournesol 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 Mail WebKit.
    • Utilisation d'Outlook 2000, 2002 et 2003 Internet Explorer.
    • Utilisation d'Outlook 2007, 2010 et 2013 Microsoft 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 Mailbakery 19 grandes différences entre le courrier électronique et le Web HTML:

Envoyer un e-mail HTML

Nous devons créer une série de tableaux intégrant tout le style en ligne nécessaire pour placer correctement le bouton et garantir qu'il s'affiche bien sur les clients de messagerie. Une balise de style d'accompagnement sera également en haut de cet e-mail pour intégrer les cours.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="left">
         <table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
            <tr>
               <td class="text-button"  style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
                  <a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

HTML Web

Nous pouvons utiliser une feuille de style externe avec des classes pour définir la casse, l'alignement, la couleur et la taille d'une balise d'ancrage qui apparaît sous la forme d'un bouton.

<div class="center">
   <a href="#" class="button">Find Out More</a>
</div>

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. Test de modèle – Comprendre les clients de messagerie utilisés par vos abonnés et s’assurer que votre courrier électronique HTML est entièrement testé sur mobile et 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 table est essentiel pour déployer des conceptions d'e-mails optimales et cohérentes.
  2. Test interne – 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.
  3. 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.
  4. 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 rendus cohérents entre clients et appareils, un certain nombre de grandes plates-formes sont arrivées sur le marché. L'un que nous avons largement utilisé est Stripe.

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, y compris Intuit MailChimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Outlooket Gmail. Mieux encore, les modèles Stripo sont livrés avec les tests de rendu des e-mails 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

Douglas Karr

Douglas Karr est le directeur marketing de OuvrirINSIGHTS et le fondateur de la Martech Zone. Douglas a aidé des dizaines de startups MarTech à succès, a contribué à la due diligence de plus de 5 milliards de dollars d'acquisitions et d'investissements MarTech, et continue d'aider les entreprises à mettre en œuvre et à automatiser leurs stratégies de vente et de marketing. Douglas est un expert et conférencier de renommée internationale en matière de transformation numérique et de MarTech. Douglas est également l'auteur d'un guide pour les nuls et d'un livre sur le leadership d'entreprise.

Articles Relatifs

Retour à bouton en haut
Fermer

Adblock détecté

Martech Zone est en mesure de vous fournir ce contenu gratuitement car nous monétisons notre site grâce aux revenus publicitaires, aux liens d'affiliation et aux parrainages. Nous vous serions reconnaissants de supprimer votre bloqueur de publicités lorsque vous consultez notre site.