Charles Nadeau

Apprenez à comprendre les schémas de design courants pour créer des dispositions d’e-mails cohérentes et efficaces qui reflètent votre marque.

La plupart des e-mails de notification ne contiennent que quelques composants.

Dans le modèle d’e-mail, seul le contenu est obligatoire.

Les recettes de ce guide expliquent comment créer et insérer des éléments de design dans le modèle d’e-mail. Vous pouvez utiliser les éléments de votre choix à votre guise pour créer votre propre design. Voici quelques schémas de design courants.

Logo de l’entreprise	Logo de l’entreprise avec pied de page

Bannière de l’entreprise avec pied de page	Bannière de l’entreprise avec pied de page et bannière d’appel à l’action

Si vous avez besoin d’inspiration, consultez le blog Lotus Themes.

Le design de l’aspect des e-mails n’est pas toujours simple, car le rendu des éléments HTML et CSS peut être différent selon les applications de messagerie. Certains types de formatage peuvent même être interprétés comme du spam.

Quand vous travaillez sur le design de vos e-mails, suivez ces directives générales :

Suivez ces directives pour les images :

• Utilisez les images avec parcimonie : si vous utilisez peu d’images, votre disposition reste propre et claire. En outre, s’il y a trop d’images, l’e-mail peut être détecté comme spam.
• Définissez la taille des images avec CSS : utilisez les styles intégrés pour définir la taille des images dans votre disposition. Les images dont la taille n’est pas définie altèrent souvent la disposition des e-mails. Pour une plus grande tranquillité d’esprit, redimensionnez physiquement les images à l’aide du rééchantillonnage.
• Utilisez des balises ALT pour toutes les images : les balises ALT permettent aux utilisateurs de voir une description des images avant leur affichage dans l’e-mail.
• Ne créez pas de liens vers des images dans un compte Zendesk fermé : si le destinataire n’est pas un utilisateur inscrit et connecté, les images ne fonctionneront pas.

Cette recette vous explique comment ajouter le logo de votre entreprise au modèle d’e-mail. Exemple :

Ingrédients

• URL de l’image du logo de votre entreprise

Recette

Cette recette vous explique comment ajouter une bannière d’entreprise au modèle d’e-mail. Une bannière d’entreprise se compose généralement du logo et du nom de l’entreprise sur un arrière-plan de couleur. Exemple :

Ingrédients

• URL de l’image du logo de votre entreprise
• Valeurs des couleurs de l’identité de votre marque

Recette

1. Collez le bloc de code suivant dans un éditeur HTML ou texte :

   <table style="background-color: #c0c7d8;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
     <tbody>
       <tr>
         <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px;">
           <img src="company_logo.png" alt="company logo" style="width: 100px; height: auto; margin-right: 10px;">
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 24px; font-weight: bold; color: #333; margin-top: 50px;">Company name</p>
         </td>
       </tr>
     </tbody>
   </table>

2. Apportez les modifications ci-dessous pour personnaliser la bannière de l’entreprise.

   Modification
   Image du logo	Élément : img > src Remplacez la valeur de la variable de l’attribut src par l’URL de l’image de votre logo. Exemple : img src="https://www.example.com/images/logo_acme.png"
   Taille du logo	Élément : img > style > width Modifiez la valeur width pour redimensionner votre logo. Exemple : img style="width: 120px; height: auto; ..."
   Espace autour du logo	S’il y a trop d’espace autour de votre logo, vous devrez peut-être rogner l’espace blanc autour de l’image avec un outil de modification d’image. S’il n’y a pas assez d’espace autour de l’image, vous pouvez accroître le remplissage de la cellule du tableau. Élément : td > style Ajoutez padding à l’attribut style et ajustez sa valeur. Exemple : td style="padding: 10px; ..."
   Format du nom de l’entreprise	Élément : p > style Modifiez un ou plusieurs styles de texte, ou ajoutez le vôtre. Exemple : p style="font-size: 30px; color: #553e3e; ..."
   Espace entre le logo et le nom de l’entreprise	Élément : img > style > margin-right Augmentez ou réduisez la valeur margin-right pour accroître ou réduire l’espace entre le logo et le nom. Exemple : img style="margin-right: 15px; ..."
   Alignement vertical du nom de l’entreprise par rapport au logo	Élément : p > style > margin-top Augmentez ou réduisez la valeur margin-top pour déplacer le nom de l’entreprise vers le haut ou le bas par rapport au logo. Exemple : p style="margin-top: 40px; ..."
   Couleur d’arrière-plan de la bannière	Élément : table > style > background-color Remplacez la valeur hexadécimale de #d3d3d3 du style background-color par votre propre valeur. Consultez les directives pour l’image de votre marque ou un sélecteur de couleur en ligne comme html-color.codes. Exemple : table style="background-color: #d8e3fb; ..."

3. Ajustez les autres valeurs en fonction de vos besoins.
4. Enregistrez le fichier avec l’extension .html et consultez fréquemment l’aperçu de vos modifications.
5. Consultez l’aperçu de la bannière dans un modèle d’e-mail test avant de l’ajouter au modèle d’e-mail de votre compte.
6. Quand vous êtes prêt, collez le bloc de code de la bannière à l’emplacement suivant dans le modèle d’e-mail HTML du Centre d’administration (Centre d’administration > Canaux > E-mail).

   

Cette recette vous explique comment ajouter une bannière d’appel à l’action au modèle d’e-mail. Une bannière d’appel à l’action se trouve généralement après le corps de l’e-mail. Elle invite généralement l’utilisateur à faire quelque chose : rejoindre votre communauté, utiliser votre centre d’aide, essayer un nouveau produit, etc. Elle se compose d’un graphique, d’un texte et d’un lien sur un arrière-plan de couleur. Exemple :

Ingrédients

• Texte de votre appel à l’action
• URL d’une image d’appel à l’action
• URL d’un lien pour aider les utilisateurs à accomplir à l’action
• Valeurs des couleurs de l’identité de votre marque

Recette

1. Collez le bloc de code suivant dans un éditeur HTML ou texte :

   <table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
   <tbody>
     <tr>
       <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px; padding-left: 50px; margin-top: 12px; margin-bottom: 8px;">
   
         <div id="cta-text" style="width: 300px;">
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #333; margin-top: 6px;">Take a hand, lend a hand</p>
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 14px;">Join our worldwide community to ask expert users for advice or share your own.</p>
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px;"><a href="#">Ask the community</a></p>
         </div>
   
         <div id="cta-image" style="padding-left: 20px;">
           <img src="cta_image.png" alt="cta_image" style="width: 140px; height: auto; border-radius: 50% 50% 0 0;">
         </div>
   
       </td>
     </tr>
   </tbody>
   </table>

2. Ajoutez votre appel à l’action dans les balises des trois paragraphes. Ajoutez ou supprimez des paragraphes en fonction de vos besoins.
3. Apportez les modifications ci-dessous pour personnaliser la bannière d’appel à l’action.

   Modification
   Image d’appel à l’action	Élément : img > src Remplacez la valeur de la variable de l’attribut src par l’URL de l’image de votre appel à l’action. Exemple : img src="https://www.example.com/images/cta_image.png"
   Taille de l’image	Élément : img > style > width Modifiez la valeur width pour redimensionner votre image. Exemple : img style="width: 120px; height: auto; ..."
   Format des messages d’appel à l’action	Élément : p > style Modifiez un ou plusieurs styles de texte, ou ajoutez le vôtre. Exemple : p style="font-size: 30px; color: #553e3e; ..."
   Espace entre les messages et l’image	Élément : div id="cta-image" > style > padding-left Augmentez ou réduisez la valeur padding-left pour accroître ou réduire l’espace entre les messages et l’image. Exemple : div id="cta-image" style="padding-left: 30px; ..."
   Couleur d’arrière-plan de la bannière	Élément : table > style > background-color Remplacez la valeur hexadécimale de #d8e3fb du style background-color par votre propre valeur. Consultez les directives pour l’image de votre marque ou un sélecteur de couleur en ligne comme html-color.codes. Exemple : table style="background-color: #d3d3d3; ..."

4. Ajustez les autres valeurs en fonction de vos besoins.
5. Enregistrez le fichier avec l’extension .html et consultez fréquemment l’aperçu de vos modifications.
6. Consultez l’aperçu de la bannière dans un modèle d’e-mail test avant de l’ajouter au modèle d’e-mail de votre compte.
7. Quand vous êtes prêt, collez le bloc de code de la bannière à l’emplacement suivant dans le modèle d’e-mail HTML du Centre d’administration (Centre d’administration > Canaux > E-mail).

   

Cette recette vous explique comment ajouter un pied de page au modèle d’e-mail. il peut contenir diverses informations, notamment les coordonnées, des liens vers les réseaux sociaux, etc. Pour les liens vers les réseaux sociaux, consultez la recette suivante, Recette : ajout de liens vers les réseaux sociaux dans le pied de page.

Le modèle d’e-mail standard fournit déjà les variables suivantes pour un pied de page :

Vous pouvez remplacer ces variables ou les compléter avec votre propre pied de page.

Dans cette recette, nous allons créer un pied de page qui fournit des coordonnées. Cela remplacera les variables {{footer}} et {{footer_link}}. Exemple :

Ingrédients

• Les coordonnées de votre entreprise
• Valeurs des couleurs de l’identité de votre marque

Recette

1. Collez le bloc de code suivant dans un éditeur HTML ou texte :

   <table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
     <tbody>
       <tr>
         <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;">
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p>    
         </td>
       </tr>
     </tbody>
   </table>

2. Changez les coordonnées dans les balises des trois paragraphes.
3. Apportez les modifications ci-dessous pour personnaliser le pied de page.

   Modification
   Couleur d’arrière-plan du pied de page	Élément : table > style > background-color Remplacez la valeur hexadécimale de #d8e3fb du style background-color par votre propre valeur. Consultez les directives pour l’image de votre marque ou un sélecteur de couleur en ligne comme html-color.codes. Exemple : table style="background-color: #d3d3d3; ..."
   Couleur du texte	Élément : p > style > color Modifiez la valeur color. Exemple : p style="color: #553e3e; ..."
   Formatage de texte	Élément : p > style Modifiez un ou plusieurs styles de texte, ou ajoutez le vôtre. Exemple : p style="font-family: Georgia, sans-serif; ..."
   Espace entre les bords supérieur et inférieur	Élément : td > style > padding-top Augmentez ou réduisez la valeur padding-top pour accroître ou réduire l’espace entre le bord supérieur et le texte. Exemple : td style="padding-top: 8px; ..." Élément : td > style > padding-bottom Augmentez ou réduisez la valeur padding-bottom pour accroître ou réduire l’espace entre le texte et le bord inférieur. Exemple : td style="padding-bottom: 8px; ..."

4. Ajustez les autres valeurs en fonction de vos besoins.
5. Enregistrez le fichier avec l’extension .html et consultez fréquemment l’aperçu de vos modifications.
6. Consultez l’aperçu du pied de page dans un modèle d’e-mail test avant de l’ajouter au modèle d’e-mail de votre compte.
7. Quand vous êtes prêt, collez le bloc de code à l’emplacement suivant dans le modèle d’e-mail HTML du Centre d’administration (Centre d’administration > Canaux > E-mail).

   

Cette recette vous explique comment ajouter des liens vers les réseaux sociaux à un pied de page personnalisé.

Exemple :

Ingrédients

• URL vers les images des réseaux sociaux à utiliser comme boutons
• Liens vers vos comptes de réseaux sociaux

Recette

1. Collez le bloc de code suivant dans un éditeur HTML ou texte :

   <table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
     <tbody>
       <tr>
         <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;">
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p>    
         </td>
       </tr>
     </tbody>
   </table>

   C’est la recette pour créer un pied de page avec des coordonnées (Recette : ajout d’un pied de page).

2. Ajoutez vos icônes de réseaux sociaux au code HTML avant la balise du premier paragraphe. Exemple :

   <div style="padding-top: 12px; padding-bottom: 0px;">
     <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_facebook.png"/></a>
     <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_x.png"/></a>
     <a href="#"><img style="width: 30px;" src="https://www.example.com/images/icon_instagram.png"/></a>  
   </div>

3. Pour chaque lien vers les réseaux sociaux, modifiez l’URL du lien (href="...") et l’image de l’icône (src="...") pour chaque lien.
4. Apportez les modifications ci-dessous pour personnaliser les icônes.

   Modification
   Taille des icônes	Élément : img > style > width Assurez-vous que toutes les icônes ont la même valeur de largeur (width). Exemple : img style="width: 24px; ..."
   Espacement entre les icônes	Élément : img > style > padding-right Modifiez la valeur du style padding-right pour tous les liens vers les réseaux sociaux, sauf le dernier. Exemple : img style="padding-right: 8px; ..."
   Espace au-dessus et en-dessous des icônes	Élément : div > style > padding-top Augmentez ou réduisez la valeur padding-top pour ajuster l’espace au-dessus des icônes. Exemple : div style="padding-top: 8px; ..." Élément : div > style > padding-bottom Augmentez ou réduisez la valeur padding-bottom pour ajuster l’espace sous les icônes. Exemple : div style="padding-bottom: 10px; ..."

5. Ajustez les autres valeurs en fonction de vos besoins.
6. Enregistrez le fichier avec l’extension .html et consultez fréquemment l’aperçu de vos modifications.
7. Consultez l’aperçu du pied de page dans un modèle d’e-mail test avant de l’ajouter au modèle d’e-mail de votre compte.
8. Quand vous êtes prêt, collez le bloc de code à l’emplacement suivant dans le modèle d’e-mail HTML du Centre d’administration (Centre d’administration > Canaux > E-mail).

   

Cette recette vous explique comment personnaliser le corps de l’e-mail. Vous allez changer la police et la taille du texte, ainsi que l’espace autour du corps de l’e-mail.

L’e-mail se compose du message de notification et de la conversation par e-mail. Dans le modèle d’e-mail, le corps de l’e-mail est représenté par la variable {{content}}. Zendesk remplace la variable avec les éléments HTML avant d’envoyer l’e-mail. Exemple :

Certains des éléments HTML insérés par Zendesk contiennent des styles qui ne peuvent pas être modifiés ou remplacés. Pour en savoir plus, consultez Personnalisation du corps des e-mails - Limites.

Recette

1. Collez la variable {{content}} et sa balise parente div dans un éditeur HTML ou texte. Exemple :

   <div style="padding: 10px; line-height: 1.5; font-family: 'Lucida Grande',Verdana,Arial,sans-serif; font-size: 12px; color:#444444;">
     {{content}}
   </div>

2. Apportez les modifications suivantes aux styles de la balise parente div pour personnaliser le corps de l’e-mail.

   Modification
   Taille du texte du message	Élément : div > style > font-size Modifiez la valeur font-size. Notez que cette modification ne modifiera pas la taille du texte du nom d’utilisateur ou de l’heure d’envoi de l’e-mail. Exemple : div style="font-size: 11px; ..."
   Police du texte	Élément : div > style > font-family Vous pouvez changer les polices dans certaines limites. Utilisez des polices Web sûres comme Trebuchet MS, Verdana ou Georgia. Les autres polices risquent de ne pas être prises en charge par toutes les applications de messagerie. Exemple : div style="font-family: 'Trebuchet MS', sans-serif; ..."
   Espace autour du corps de l’e-mail	Élément : div > style > padding Augmentez ou réduisez la valeur padding pour accroître ou réduire l’espace autour du corps de l’e-mail. Exemple : div style="padding: 15px; ..." Si vous voulez changer l’espace sur la gauche et sur la droite (p. ex, 25 pixels), spécifiez deux valeurs pour le style padding. La première valeur est le remplissage pour le haut et le bas, et la deuxième le remplissage pour la gauche et la droite. Exemple : div style="padding: 15px 25px; ..."

3. Ajoutez d’autres styles intégrés ou ajustez d’autres valeurs en fonction de vos besoins.

   Notez que certaines propriétés du corps de l’e-mail ne peuvent pas être modifiées. Consultez Personnalisation du corps des e-mails - Limites.

4. Enregistrez le fichier avec l’extension .html et consultez fréquemment l’aperçu de vos modifications.
5. Consultez l’aperçu des modifications dans un modèle d’e-mail test avant de l’ajouter au modèle d’e-mail de votre compte.
6. Quand vous êtes prêt, collez le bloc de code à l’emplacement suivant dans le modèle d’e-mail HTML du Centre d’administration (Centre d’administration > Canaux > E-mail).

   

Vous pouvez tester les modifications avec le modèle d’e-mail test joint à cette recette.

Les modifications apportées au modèle d’e-mail dans le Centre d’administration sont immédiatement publiées. Il est donc vivement conseillé de tester vos modifications dans le modèle test de façon approfondie pour vérifier qu’elles fonctionnent correctement avant de les ajouter au modèle d’e-mail de votre compte.

Pour tester vos modifications

1. Téléchargez le modèle d’e-mail test, test_email_template.html joint ci-dessous et ouvrez-le dans un éditeur HTML ou texte.
2. Collez le bloc de code pour votre composant à l’emplacement indiqué dans le modèle d’e-mail test. Exemple :

   <!-- Paste logo or company banner code block here -->

3. Ouvrez le modèle test dans un navigateur et rétrécissez la fenêtre de navigateur pour émuler une application de messagerie.
4. Modifiez le code dans le modèle test, puis actualisez la page de navigateur pour voir comment se présentent vos modifications.
5. Continuez à apporter des modifications itératives jusqu’à ce que vous soyez satisfait du design.
6. Quand vous êtes prêt, collez le bloc de code pour votre composant au même emplacement dans le modèle d’e-mail du Centre d’administration (Centre d’administration > Canaux > E-mail).