Maison >interface Web >tutoriel HTML >Guide de rédaction de pages HTML d'e-mails HTML

Guide de rédaction de pages HTML d'e-mails HTML

高洛峰original: 2017-02-16 13:47:512953parcourir

Avant-propos

Ceux qui ont déjà écrit du HTML dans des e-mails doivent savoir que le HTML dans les e-mails est généralement présenté à l'aide de tableaux. Pourquoi ? La raison en est que la plupart des clients de messagerie (tels qu'Outlook et Gmail) filtrent les paramètres HTML, rendant les e-mails méconnaissables.

Après de nombreuses pratiques de rédaction d'e-mails et les conseils de Du Niang, j'ai découvert que l'astuce pour rédiger des e-mails HTML consiste à utiliser la méthode de création de pages Web d'il y a 15 ans.

Voici quelques règles pour rédiger des e-mails HTML

Règles de mise au point partielle

1 Doctype

Actuellement, le Doctype le plus compatible est XHTML 1.0 Strict , en fait Gmail et Hotmail supprimeront votre Doctype et le remplaceront par le Doctype suivant (la syntaxe HTML5 ne peut pas être utilisée)

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 <html xmlns="http://www.w3.org/1999/xhtml">3 　<head>4 　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />5 　　<title>HTML Email编写指南</title>6 　　<meta name="viewport" content="width=device-width, initial-scale=1.0"/>7 　</head>8 </html>

2. Mise en page

La mise en page des pages Web doit utiliser des tableaux. Tout d’abord, placez un grand tableau le plus à l’extérieur pour définir l’arrière-plan, puis imbriquez le tableau à l’intérieur pour le contenu spécifique (ne pensez pas à p, p, etc.).

1 <body style="margin: 0; padding: 0;">2 　<table border="1" cellpadding="0" cellspacing="0" width="100%">3 　　<tr> 4 　　　<td> Hello! </td>5 　　</tr>6 　</table>7 </body>

3. Photos

Les photos sont les seules ressources externes qui peuvent être citées. Les autres ressources externes, telles que les fichiers de feuilles de style, les fichiers de polices, les fichiers vidéo, etc., ne peuvent être citées.

Certains clients ajouteront des bordures aux liens d’images, et les bordures devront être supprimées.

Il est à noter que de nombreux clients n'affichent pas d'images par défaut (comme Gmail), alors assurez-vous que le contenu principal peut être lu même sans images.

1 >

4. Styles en ligne

Il est préférable d'utiliser des styles en ligne pour toutes les règles CSS. Car les styles placés en en-tête de la page web sont susceptibles d’être supprimés par le client. Pour le support client pour les règles CSS, veuillez consulter ici.

De plus, n'utilisez pas la forme abrégée de CSS, certains clients ne la supportent pas. Par exemple, ne l'écrivez pas comme ceci :

<p style="font: 8px/14px Arial, sans-serif;"></p>

Écrivez-le comme ceci

5. Outil de test de somme de contrôle du W3C

Pour garantir que le code final peut passer le W3C vérification, car certains clients supprimeront les attributs non qualifiés. Utilisez également les outils de test (1, 2, 3) pour vérifier les résultats d'affichage sur différents clients.

Lors de l'envoi d'un email HTML, n'oubliez pas que le type MIME ne peut pas être utilisé

1 Content-Type : text/plain

À utiliser

1 Contenu - Type : Multipart/Alternatif ;

6. Modèle

Utiliser des modèles que d'autres ont déjà créés est un bon choix (ici et ici), et vous pouvez en trouver davantage en ligne.

Si vous le développez vous-même, vous pouvez vous référer à HTML Email Boilerplate et Emailology.

Règles globales

1. Veuillez définir la largeur de la page entre 550 et 650 pixels.

2. Utilisez des tableaux pour la mise en page.

3. Si vous souhaitez que l'e-mail soit affiché au centre, veuillez définir align="center" dans le tableau.

4. N'écrivez pas la balise ou la classe