Correos electrónicos HTML en 2013: ¿Cómo controlar el espaciado entre elementos como párrafos e imágenes?
Actualmente estoy rediseñando algunas plantillas de correo electrónico HTML, que es algo que no he hecho en un par de años en esta profundidad.
Hice mi plantilla en un archivo HTML que estoy probando localmente en el navegador, y todo se ve bien.
Estoy usando tablas para maquetarLas únicas otras etiquetas que estoy usando son<p> <a> y<img>El CSS está en un<style> etiqueta después de la apertura<body> etiqueta por ahora, pero la estoy convirtiendo a estilos en línea antes de enviar, usandoHerramienta CSS Inliner de MailChimp. Acabo de ponerlo en una etiqueta de estilo para que veas el CSS más fácilmente aquí. De todos modos, no hace ninguna diferencia en muchos clientes, para propósitos de prueba.Ahora que estoy enviando correos electrónicos de prueba desde mi aplicación PHP, estoy tratando de que lleguen a los clientes de correo electrónico que tienen el mismo aspecto que mi maqueta.
Lo principal que observo es que los estilos de margen / relleno parecen ignorados (por ejemplo, Outlook 2007) o se agrega relleno / margen adicional en cosas como<td> lo que hace que todo esté mucho más acolchado de lo que dije (por ejemplo, Hotmail).
Fuente de ejemplo
<!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>
Intente ver el HTML en su navegador y luego intente enviarlo como correo electrónico para ver a qué me refiero.
¿Qué estoy haciendo mal y cómo puedo hacer que el correo electrónico llegue con el CSS deseado?