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