Tips para maquetar emails

Estándar

Las tablas son el componente básico para maquetar emails:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="top"></td>
  </tr>
</table>

 

Para insertar espacios entre tablas, se usa un archivo .gif transparente y se redimensiona como queramos:

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
  <tr>
    <td align="center" valign="top"> 
      <img src="img/spacer.gif"width="50" class="w10"> 
    </td>
  </tr>
</table>

 

Muchas de estas propiedades en las etiquetas HTML evitan que los diferentes clientes de correos añadan efectos que no queremos en nuestra plantilla, como sucede con las imágenes y el body.

<img src="img/beach.png" width="600" height="280" style=”display:block border=”0”>
<body style="margin:0; padding:0;" topmargin="0" leftmargin="0"
 marginheight="0" marginwidth="0">

 

Los colores SIEMPRE en formatos hexadecimal y los seis dígitos:

<td style=”color:#000000; background-color:#ffffff”> ...

 

Los textos y fuentes deben tener todo el estilo especificado y la etiqueta más próxima al texto:

<td style="font-family:Arial, Helvetica, sans-serif; 
font-size: 17px; line-height:22px; color:#FFFFFF;">
Este es mi texto
</td>

 

Los links también suelen ser víctimas de estilo no deseado:

<a href=”” style="text-decoration:none; color:#ffffff; 
text-decoration:underline”>Enlace a no sé donde</a> 

En móviles,  una dirección, un teléfono o una fecha se resaltan como un link. La solución  pasa por una combinación de HTML y CSS:

<style>
  .ios_texta { color:#000000!important; text-decoration:none !important; } 
</style>

<td style="font-family:Arial, Helvetica, sans-serif; font-size: 17px;
 line-height:22px; color:#000000;"> 
   Estaremos en <span class=”ios_fecha”>diciembre 28, 2016.</span>
</td>

 

Esta información la podrás encontrar y poner en práctica en este curso.

 

Anuncios

Plantillas de emails

Estándar

how-to-use-identity-data-to-win-at-email-marketing-gigya-12

Si alguna vez ha programado una plantilla para emails te habrás topado con que no todas las etiquetas de HTML y CSS sirven, además de cada cliente de correo tiene sus particularidades.

En este enlace verás una tabla con las etiquetas que aceptan los clientes de correos más comunes (Outlook, Gmail, Apple Mail, …).

Litmus es un servicio de pago con el que podrás testear tus plantillas en los diferentes clientes de correo electrónico, aunque tiene versión de pruebas de unos 7 días.

Y en mi cuenta de Github podrás encontrar una plantilla genérica con las características básicas y hacks para empezar a construir una plantilla responsive para emails.