Les e-mails HTML en 2013: Comment contrôler l'espacement entre les éléments comme les paragraphes et les images?
Je suis actuellement en train de repenser certains modèles d'e-mail HTML, qui est quelque chose que je n'ai pas fait pour un couple d'années dans ce beaucoup de profondeur.
J'ai fait mon template dans un fichier HTML qui je suis en essais en local dans le navigateur, et il semble tout à fait bien.
- Je suis à l'aide de tableaux pour la mise en
- Les seuls autres balises que j'utilise sont
<p>
<a>
et<img>
- Le CSS est dans un
<style>
tag après l'ouverture<body>
tag pour le moment, mais je suis la conversion à des styles en ligne avant de l'envoyer, à l'aide de MailChimp CSS Inliner Outil. Je viens de le mettre dans une balise style pour vous de voir le CSS plus facile ici. Il ne fait aucune différence dans beaucoup de clients de toute façon, pour des fins de test.
Maintenant que je suis l'envoi d'e-mails de test à partir de mon application PHP, j'essaie de les faire venir par le biais de l'e-mail client(s) à la recherche est la même que ma maquette.
La principale chose que je remarque c'est que la marge/rembourrage styles semblent être ignorées (par exemple, Outlook 2007) ou de rembourrage supplémentaire/marge est ajoutée sur des choses comme <td>
qui rend tout de manière plus rembourré que j'ai dit (par exemple Hotmail).
Exemple De Source De
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<body>
<style type="text/css">
td {font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#444;}
a {color:#056DA5;}
p {margin:0; padding:6px 0 6px 0;}
.tel {font-weight:bold; color:#056DA5;}
#wrapper {padding:10px;}
#signoff {padding:18px 0;}
#signoff #questions {padding-bottom:18px;}
#signature {padding-top:20px; border-top:1px solid #EEE;}
#signature td {font-size:12px; color:#777;}
#signature #logo {padding-bottom:12px;}
#signature #contact p {padding:3px 0 3px 0;}
#signature #contact a {text-decoration:none; font-size:13px; font-weight:bold; color:#C00;}
#signature #contact .tel {padding-top:6px; color:#777;}
#signature #social {padding:20px 0 20px 0;}
#signature #social a {margin-right:8px;}
#signature #address {font-size:11px; color:#999;}
</style>
<table id="wrapper" width="100%" bgcolor="#FFFFFF">
<tr>
<td>
<table>
<!-- ROW 1 -->
<tr>
<td>[CONTENT]</td>
</tr>
<!-- ROW 2 -->
<tr>
<td id="signoff">
<p id="questions">If you have any questions, email us at <a href="mailto:[email protected]">[email protected]</a> or call <span class="tel">01234567890</span>.</p>
<p>Thanks,</p>
<p>Company</p>
</td>
</tr>
<!-- ROW 3 -->
<tr>
<td id="signature">
<table cellpadding="0" cellspacing="0">
<tr>
<td id="logo" colspan="3">
<img src="http://www.example.com/images/email/logo.gif" alt="Company" />
</td>
</tr>
<tr>
<td id="contact">
<p><a href="http://www.example.com">www.example.com</a></p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
<p class="tel">01234567890</p>
</td>
</tr>
<tr>
<td id="social">
<a href="https://www.facebook.com/"><img src="http://www.example.com/images/email/facebook.gif" alt="Facebook" /></a>
<a href="https://twitter.com/"><img src="http://www.example.com/images/email/twitter.gif" alt="Twitter" /></a>
</td>
</tr>
<tr>
<td id="address">Company, address, city, post code</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Essayez d'afficher le code HTML dans votre navigateur, puis essayez d'envoyer un e-mail pour voir ce que je veux dire.
Ce que je fais mal et comment puis-je faire de l'e-mail dans le but de CSS?
Au lieu d'utiliser un rembourrage et de la marge, je voudrais compter sur les colonnes et lignes vides.
OriginalL'auteur BadHorsie | 2013-07-26
Vous devez vous connecter pour publier un commentaire.
Utilisation du CSS styles chaque fois que possible (pas
<style>
tags sur la page, maisstyle=""
attributs). Utiliser les attributs HTML (bgcolor
,width
,height
, etc) chaque fois que possible au lieu de styles CSS car il est plus large et plus cohérente de soutien. Définir les styles individuellement sur chaque élément - ne pas compter sur l'héritage ou de la cascade.Par cela, je veux dire définir manuellement la largeur, la hauteur, le rembourrage, les marges, etc via l'attribut ou de style en ligne sur tous les
td
ettr
, etc.Vous sera malheureusement jamais rien réaliser de loin ressemble à une uniformité totale - habituellement je vise pour cela à l'air bien dans Gmail, Mail Mac et Outlook et c'est le meilleur que vous pouvez vraiment faire. Les e-mails HTML sont encore une décennie derrière en termes de prise en charge de CSS, et les variations extrêmes parmi les les moteurs de rendu HTML utilisé par les différents clients de messagerie-dire de développement de sites modernes compatible avec IE6 est littéralement moins de mal de tête que d'écrire un bon, très-conçu modèle d'e-mail.
Je me réfère toujours des gens pour Suivi de la campagne du fantastique client de messagerie CSS tableau de compatibilité lorsque l'on pose cette question. Ils ont aussi une grande guide de codage des e-mails HTML.
OriginalL'auteur Ennui
Vous êtes en cours d'exécution dans l'espacement des questions surtout parce que vous utilisez des étiquettes de paragraphe. Vous avez besoin de remettre à zéro les marges sur votre
<p>
balises. Se référer à cet article par E-mail à l'AcidePersonnellement, je n'utilise jamais
<p>
balises comme ils sont de moins en moins cohérent que le double<br>
-ing.Rembourrage travaille sur des tables raisonnablement uniforme, Il peut s'effondrer si quelqu'un transmet votre e-mail. Va de même avec les cellules de tableau vides si vous ne mettez pas un
. Je suggère toujours à l'aide de cellules vides nbsp du moins c'est quelque chose qui n'est pas structurellement important.Aussi, une autre remarque à propos de la déclaration de rembourrage, vous aurez besoin d'écrire du haut/du bas/de gauche/de droite séparément et ne peut pas les empiler dans une css
padding:;
déclaration malheureusement.Également votre couleur déclarations doivent être à 6 chiffres hex, ou en ligne, le tout avant de l'envoyer.
OriginalL'auteur John
Vous devez utiliser super précis CSS pour les e-mails que tous les clients de messagerie aiment faire leur propre chose quand il s'agit de rendre l'e-mail. Il peut être plus de douleur que, j'ose le dire, le développement de l'IE! Par super précis je veux dire, ne présumez pas rien! Tout mettre explicitement.
OriginalL'auteur hungerstar