Marketing par e-mail et automatisationMarketing mobile et tablette

16 meilleures pratiques pour les e-mails HTML adaptés aux mobiles qui optimisent le placement et l'engagement de la boîte de réception

En 2023, il est probable que le mobile dépassera le bureau en tant que principal appareil pour ouvrir les e-mails. En fait, HubSpot a constaté que 46 pour cent de toutes les ouvertures d'e-mails se produisent désormais sur mobile. Si vous ne concevez pas d'e-mails pour mobile, vous laissez beaucoup d'engagement et d'argent sur la table.

  1. Authentification par courriel: Assurer votre les e-mails sont authentifiés au domaine d'envoi et IP L'adresse est essentielle pour accéder à la boîte de réception et non acheminée vers un dossier de courrier indésirable ou de spam. Il est également essentiel, bien sûr, que vous fournissiez un moyen de vous désinscrire de l'e-mail en utilisant une plateforme qui intègre un lien de désabonnement.
  2. Conception réactive: La HTML le courrier électronique devrait être conçu pour être réactif, ce qui signifie qu'il peut s'adapter à la taille de l'écran de l'appareil sur lequel il est visualisé. Cela garantit que l'e-mail s'affiche bien sur les ordinateurs de bureau et les appareils mobiles.
  3. Objet clair et concis : Une ligne d'objet claire et concise est importante pour les utilisateurs mobiles, car ils ne verront peut-être que les premiers mots de la ligne d'objet dans le volet de prévisualisation des e-mails. Il doit être bref et refléter fidèlement le contenu de l'e-mail. La longueur optimale des caractères d'une ligne d'objet d'e-mail peut varier en fonction d'un certain nombre de facteurs, tels que le contenu de l'e-mail, l'audience et le client de messagerie utilisé. Cependant, la plupart des experts recommandent de garder les lignes d'objet des e-mails courtes et précises, généralement entre 41 et 50 caractères ou 6 à 8 mots. Sur les appareils mobiles, les lignes d'objet de plus de 50 caractères peuvent être coupées et, dans certains cas, n'afficher que les premiers mots de la ligne d'objet. Cela peut rendre difficile pour le destinataire de comprendre le message principal de l'e-mail et peut réduire la probabilité que l'e-mail soit ouvert.
  4. Pré-en-tête : Un pré-en-tête d'e-mail est un bref résumé du contenu d'un e-mail qui apparaît à côté ou en dessous de la ligne d'objet dans la boîte de réception d'un client de messagerie. C'est un élément important qui peut impacter le taux d'ouverture de vos emails lorsqu'il est optimisé. La plupart des clients intègrent HTML et CSS pour s'assurer que le texte du pré-en-tête est correctement configuré.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        /* desktop styles here */
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        /* mobile styles here */
      }
    </style>
  </head>
  <body>
    <!-- Intro text for preview -->
    <div style="display:none; max-height:0px; overflow:hidden;">
      This is the intro text that will appear in the email preview, but won't be visible in the email itself.
    </div>
    
    <!-- Main email content -->
    <div style="max-width:600px; margin:0 auto;">
      <!-- Content goes here -->
    </div>
  </body>
</html>
  1. Mise en page à une colonne : Les e-mails conçus avec une mise en page à une seule colonne sont plus faciles à lire sur les appareils mobiles. Le contenu doit être organisé selon une séquence logique et présenté dans un format simple et facile à lire. Si vous avez plusieurs colonnes, l'utilisation de CSS peut organiser gracieusement les colonnes dans une disposition à une seule colonne.

Voici un Mise en page HTML des e-mails c'est-à-dire 2 colonnes sur le bureau et se réduit à une seule colonne sur les écrans mobiles :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.right {
          order: 2;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col left">
        <!-- Content for left column -->
      </div>
      <div class="col right">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>

Voici un Mise en page HTML des e-mails c'est-à-dire 3 colonnes sur le bureau et se réduit à une seule colonne sur les écrans mobiles :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.middle {
          order: 2;
        }
        .col.right {
          order: 3;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col left">
        <!-- Content for left column -->
      </div>
      <div class="col middle">
        <!-- Content for middle column -->
      </div>
      <div class="col right">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>
  1. Mode clair et sombre : pont les clients de messagerie prennent en charge les modes clair et sombre CSS prefers-color-scheme pour répondre aux préférences de l'utilisateur. Assurez-vous d'utiliser des types d'images où vous avez un arrière-plan transparent. Voici un exemple de code.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Light mode styles */
      body {
        background-color: #ffffff;
        color: #333333;
      }
      .container {
        background-color: #f9f9f9;
      }
      .text {
        border: 1px solid #cccccc;
      }
      /* Dark mode styles */
      @media (prefers-color-scheme: dark) {
        body {
          background-color: #333333;
          color: #f9f9f9;
        }
        .container {
          background-color: #333333;
        }
        .text {
          border: 1px solid #f9f9f9;
        }
      }
      /* Common styles for both modes */
      .container {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
      }
      .col {
        flex: 1;
        margin: 10px;
      }
      img {
        max-width: 100%;
        height: auto;
      }
      h2 {
        font-size: 24px;
        margin-bottom: 10px;
      }
      p {
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col">
        <img src="image1.jpg" alt="Image 1">
        <div class="text">
          <h2>Heading 1</h2>
          <p>Text for column 1 goes here.</p>
        </div>
      </div>
      <div class="col">
        <img src="image2.jpg" alt="Image 2">
        <div class="text">
          <h2>Heading 2</h2>
          <p>Text for column 2 goes here.</p>
        </div>
      </div>
      <div class="col">
        <img src="image3.jpg" alt="Image 3">
        <div class="text">
          <h2>Heading 3</h2>
          <p>Text for column 3 goes here.</p>
        </div>
      </div>
    </div>
  </body>
</html>
  1. Grandes polices lisibles : La taille et le style de la police doivent être choisis pour rendre le texte facile à lire sur un petit écran. Utilisez au moins une taille de police de 14 points et évitez d'utiliser des polices difficiles à lire sur de petits écrans. Les polices couramment utilisées ont une forte probabilité de s'afficher de manière cohérente sur différents clients de messagerie. Par conséquent, l'utilisation d'Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma et Trebuchet MS sont généralement des polices sûres. Si vous utilisez une police personnalisée, assurez-vous d'avoir une police de secours identifiée dans votre CSS :
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Custom font */
      @font-face {
        font-family: 'My Custom Font';
        src: url('my-custom-font.woff2') format('woff2'),
             url('my-custom-font.woff') format('woff');
        font-weight: normal;
        font-style: normal;
      }
      /* Fallback font */
      body {
        font-family: 'My Custom Font', Arial, sans-serif;
      }
      /* Other styles */
      h1 {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      p {
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <h1>My Custom Font Example</h1>
    <p>This text uses the custom font 'My Custom Font'. If the font is not supported, the fallback font 'Arial' will be used instead.</p>
  </body>
</html>
  1. Utilisation optimale des images : Les images peuvent ralentir les temps de chargement et peuvent ne pas s'afficher correctement sur tous les appareils mobiles. Utilisez les images avec parcimonie et assurez-vous qu'elles sont dimensionnées et comprimé pour une visualisation mobile. Assurez-vous de remplir le texte alternatif de vos images au cas où le client de messagerie les bloquerait. Toutes les images doivent être stockées et référencées à partir d'un site Web sécurisé (SSL). Voici un exemple de code d'images réactives dans un e-mail HTML.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.middle {
          order: 2;
        }
        .col.right {
          order: 3;
        }
        .single-pane {
          width: 100%;
        }
        img {
          max-width: 100%;
          height: auto;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <!-- 3-column section with images -->
    <div class="container">
      <div class="col left">
        <img src="image1.jpg" alt="Image 1">
        <!-- Content for left column -->
      </div>
      <div class="col middle">
        <img src="image2.jpg" alt="Image 2">
        <!-- Content for middle column -->
      </div>
      <div class="col right">
        <img src="image3.jpg" alt="Image 3">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>
  1. Appel à l'action clair (CTA): Un CTA clair et visible est important dans tout e-mail, mais il est particulièrement important dans un e-mail adapté aux mobiles. Assurez-vous que le CTA est facile à trouver et qu'il est suffisamment grand pour être cliqué sur un appareil mobile. Si vous incorporez des boutons, vous pouvez vous assurer qu'ils sont également écrits en CSS avec des balises de style en ligne :
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Desktop styles */
      .button {
        display: inline-block;
        background-color: #4CAF50;
        color: #ffffff;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        border-radius: 5px;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      /* Mobile styles */
      @media only screen and (max-width: 600px) {
        .button {
          display: block;
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h1>Sample Responsive Email</h1>
    <p>This is an example of a responsive email with a button.</p>
    <a href="#" class="button" style="background-color: #4CAF50; color: #ffffff; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-size: 16px; font-weight: bold;">Click Here</a>
  </body>
</html>
  1. Contenu court et concis : Gardez le contenu de l'e-mail court et précis. La limite de caractères pour un e-mail HTML peut varier en fonction du client de messagerie utilisé. Cependant, la plupart des clients de messagerie imposent une limite de taille maximale pour les e-mails, généralement entre 1024 et 2048 kilo-octets (KB), qui inclut à la fois le code HTML et toutes les images ou pièces jointes. Utilisez des sous-titres, des puces et d'autres techniques de mise en forme pour rendre le contenu facilement scannable lors du défilement et de la lecture sur un petit écran.
  2. Éléments interactifs : Incorporer éléments interactifs qui captent l'attention de votre abonné augmenteront les taux d'engagement, de compréhension et de conversion de votre e-mail. GIF animés, les comptes à rebours, les vidéos et d'autres éléments sont pris en charge par la majorité des clients de messagerie pour smartphone.
  3. Personnalisation: Personnaliser la salutation et le contenu d'un abonné spécifique peut stimuler considérablement l'engagement, assurez-vous simplement de bien faire les choses ! Par exemple. Il est important d'avoir des solutions de secours s'il n'y a pas de données dans un champ de prénom.
  4. Contenu dynamique : La segmentation et la personnalisation du contenu peuvent réduire vos taux de désabonnement et maintenir l'engagement de vos abonnés.
  5. Intégration de campagne : La plupart des fournisseurs de services de messagerie modernes ont la possibilité d'ajouter automatiquement Chaînes de requête de campagne UTM pour chaque lien afin que vous puissiez voir les e-mails comme un canal dans les analyses.
  6. Centre de préférences : Le marketing par e-mail est trop important pour une simple approche opt-in ou opt-out des e-mails. L'intégration d'un centre de préférences où vos abonnés peuvent modifier la fréquence à laquelle ils reçoivent des e-mails et le contenu qui est important pour eux est un moyen fantastique de maintenir un programme de messagerie solide avec des abonnés engagés !
  7. Tester, tester, tester : Assurez-vous de tester votre messagerie sur plusieurs appareils ou utilisez une application pour prévisualisez vos e-mails sur les clients de messagerie pour vous assurer qu'il est beau et fonctionne correctement sur différentes tailles d'écran et systèmes d'exploitation AVANT de l'envoyer. Tournesol rapporte que les 3 environnements ouverts mobiles les plus populaires restent les mêmes : Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Intégrez également des variantes de test de vos lignes d'objet et de votre contenu pour améliorer vos taux d'ouverture et de clics. De nombreuses plateformes de messagerie intègrent désormais des tests automatisés qui échantillonneront la liste, identifieront une variante gagnante et enverront le meilleur e-mail aux abonnés restants.

Si votre entreprise a du mal à concevoir, tester et mettre en œuvre des e-mails mobiles réactifs qui stimulent l'engagement, n'hésitez pas à contacter mon entreprise. DK New Media a de l'expérience dans la mise en œuvre de pratiquement tous les fournisseurs de services de messagerie (ESP).

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.