email Tutoriel
Démarrer avec l'email
Recherche…
Remarques
Le courrier électronique HTML consiste à utiliser un sous-ensemble de HTML et de CSS pour formater un message électronique comme une page Web en utilisant des couleurs, des graphiques, des colonnes de tableau et des liens.
Liens utiles:
HTML et texte brut
Le courrier électronique HTML consiste à utiliser un sous-ensemble de HTML et de CSS pour formater un message électronique comme une page Web en utilisant des couleurs, des graphiques, des colonnes de tableau et des liens.
Lorsque vous envoyez un e-mail, il est important d'envoyer du texte brut et du code HTML. Vous faites cela en envoyant votre courrier électronique en tant que MIME en plusieurs parties. La plupart des fournisseurs de services de messagerie ont des outils pour créer automatiquement le MIME pour vous. Certains généreront une version en texte brut basée sur votre version HTML, et il existe également des outils tiers .
Exemple de courriel uniquement textuel:
# EMAIL TITLE GOES HERE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.
Learn more: http://www.website.com/landing-page-1
---
## Subheader goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.
Learn more: http://www.website.com/landing-page-2
---
Footer and Sender information
Unsubscribe here: http://www.website.com/unsubscribe
Notez qu'avec le récent lancement d'Apple Watch, une nouvelle partie MIME est apparue: text/watch-html . Ce contenu ne sera affiché que dans Apple Watch (et tout autre client prenant en charge ce type MIME).
Clients de messagerie et moteurs de rendu
Les clients de messagerie utilisent différents moteurs de rendu pour générer des messages HTML:
- Apple Mail, Outlook pour Mac, Android Mail et iOS Mail utilisent WebKit
- Outlook 2000/02/03 utilise Internet Explorer 6
- Outlook 2007/10/13 utilise Microsoft Word
- Les clients Web utilisent le moteur respectif de leur navigateur (par exemple, Safari utilise WebKit, Chrome utilise Blink)
Certains clients ajouteront également leurs propres styles, par exemple Gmail définit toutes les polices <td> sur font-family: arial,sans-serif; , ce qui pourrait avoir une incidence sur le rendu d'un courrier électronique.
Avant 2016, tous les produits Gmail étaient dépourvus de balises <link> , de toutes les feuilles de <style> CSS contenues dans les balises <style> et de tout autre code CSS non intégré. À la fin de 2016, Gmail a commencé à prendre en charge la <style> et les requêtes de médias dans la plupart de ses produits. Voici une mise à jour du 23 novembre 2016 :
Les bases (tableaux et CSS en ligne)
Tables pour la mise en page
La structure d'un fichier de courrier électronique HTML est similaire à celle d'une page Web:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
Cependant, une disposition CSS basée sur <div> ne fonctionne pas dans le courrier électronique comme sur le Web. Les principaux clients de messagerie n'offrent aucun support pour des éléments tels que les flotteurs et les boîtes flexibles, ou les modifient de différentes manières. <div> ont également des problèmes de positionnement et de modèle de boîte dans différents clients, en particulier Outlook. Il existe quelques techniques pour coder un email en utilisant uniquement <div> , mais il est plus sûr de rester avec des tableaux pour la mise en page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation”>
<tr>
<td width="200">
<h1>Hello World!</h1>
</td>
<td width="400">
<p>This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
CSS en ligne
L'application d'un style en ligne lui donne la priorité sur les styles plus éloignés (tels que les styles de client de messagerie Web) et fonctionne également autour des clients de messagerie qui extraient les fichiers CSS de la tête ou des fichiers CSS externes. Le CSS en ligne est le meilleur moyen de garantir un affichage cohérent dans chaque client de messagerie.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body style="background: #000000;">
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation” style="margin: auto; background: #ffffff;">
<tr>
<td width="200" style="padding: 20px; background-color: #eeeeee;">
<h1 style="font-weight: bold; color: #444444; font-family: Georgia, serif;">Hello World!</h1>
</td>
<td width="400" style="padding: 20px;">
<p style="color: #444444; font-family: arial, sans-serif; margin: 0;">This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
Vous avez deux options pour insérer CSS:
- Écrivez CSS en ligne au fur et à mesure
- Utiliser des extraits locaux dans votre éditeur
- Utilisez un inliner CSS Web comme celui-ci
- Utiliser un inliner CSS programmatique comme celui-ci
- Utilisez un processus de construction comme celui-ci ou un langage de template
- Laissez votre fournisseur de services de messagerie gérer l'inline pour vous (s'il le prend en charge)
Codage des emails pour tous les clients de messagerie
Méthode de codage utilisée: hybride / spongieux
Cela a toujours été un mythe selon lequel les div ne peuvent pas être utilisés dans les emails. Il existe des clients de messagerie (contrairement à Outlook) capables de rendre correctement les div. L'exemple ci-dessous montre comment coder un courrier électronique qui fonctionnera sur l'application Gmail (avec les mises à jour non encore déployées), les appareils Samsung et les autres clients de messagerie qui ne lisent pas les requêtes multimédia.
Présentation des instructions conditionnelles d'Outlook
Les instructions conditionnelles d'Outlook sont très utiles lorsqu'il s'agit de rendre des e-mails ou de montrer des éléments spécifiques, tels que les solutions de rechange pour les perspectives.
<!--[if (gte mso 9)|(IE)]>
<![endif]-->
Le code ci-dessus lit si plus grand que Microsoft Outlook 9 ou IE
Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15
Versions des instructions conditionnelles répertoriées.
Lancer un modèle de courrier électronique hybride
Chaque étape a été expliquée de manière à ce que toute personne ayant des connaissances de base en HTML puisse facilement comprendre.
Tout d'abord, nous commençons avec une table wrapper qui s'étendra sur tout l'écran et avec une classe de conteneur.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
Après cela, nous ajoutons une requête multimédia pour les clients de messagerie qui ne lisent pas la largeur maximale mais lisent le CSS dans l'en-tête. La requête multimédia ciblera tous les écrans et affichera le conteneur avec une largeur de 700 pixels.
@media only screen and (max-width : 700px) {
.container{width:700px;}
}
Ensuite, nous ajoutons une instruction conditionnelle Outlook qui garde la table (avec le conteneur de classe) à une largeur de 700 pixels.
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="700">
<![endif]-->
<table class="container" width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 700px;">
<tbody>
<tr>
<td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
Le code ci-dessus devrait maintenant contenir votre modèle dans une perspective large de 700px.
Maintenant pour les colonnes. Le code ci-dessous créera deux colonnes égales sur le modèle, toutes deux à 350 pixels de largeur.
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="350">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[COLUMN CONTENT HERE]</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="300">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[COLUMN CONTENT HERE]</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
Après cela, la limite est seulement votre imagination ou le concepteur. Lorsque les conceptions sont réalisées, il est important de participer à la phase de cadrage afin d'éviter toute surprise lorsque la conception en est au stade du codage.
Remarque:
- Les images Retina auront besoin d'images définies au niveau de l'élément et non de leur style <img src = "" width = "" ...
- Vous pouvez toujours choisir de faire du CSS en ligne ou vous pouvez choisir de CSS en tête seulement si tous vos clients prennent en charge le CSS dans la tête.
