Buenas prácticas de HTML para Email Marketing

De Wiki Locaweb

Contenido

1 Introducción
2 Buenas Prácticas para la construcción de código HTML
3 Links Utiles
4 Vea también

Introducción

Crear un mensaje HTML no es lo mismo que crear una página HTML, ya que muchas tags comunmente son eliminadas por los "clientes" de email como webmails y Outlook por ejemplo. Existen algunas prácticas que deben ser seguidas para que el mensaje no se vea alterado de acuerdo al destinatario.
Sin embargo no hay como garantizar que al seguir esas prácticas el mensaje llegará sin alteraciones para todos los proveedores de e-mail, debido a que estos personalizan sus reglas constantemente, principalmente por motivos de seguridad.

Buenas Prácticas para la construcción de código HTML

Imagenes

Siempre Use la url completa de la imagen cuando vaya a utilizar imagenes externas, por ejemplo:

<img src="http://emailmkt1.locaweb.com.br/admin/images/logo_locamail_marketing-1.jpg"

Nunca debe utilizar URLs relativas, por ejemplo:

<img src="images/logo_locamail_marketing-1.jpg"

Evite utilizar una única imagen grande como contenido de email ya que esto es considerado como práctica de spam.
Prefiera editar la imagen para obtenerla en pedazos más pequeños en caso de que su contenido solo sea ese.

Tablas

Prefiera utilizar layouts basados en tablas al contrario que suced con divs, como en el caso del padrón tableless, por más que esa práctica no sea recomendada en la construcción de sitios

Prefiera utilizar a propriedade width nas tags <td> ao invés de utilizar nas tags <table>, como no exemplo abaixo:

<table cellspacing="0" cellpadding="10" border="0">
 <tr>
  <td width="120"></td>
  <td width="480"></td>
 </tr>
</table>

Estilos (CSS)

Nunca utilice el tag <link> para referenciar un archivo de estilos (.css), debido a que la mayoría de los proveedores remueven esa tag.
Nunca use la forma reduzida para definir um estilo, por exemplo ao invés de:

style="font: 12px/16px Arial, Helvetica"

utilize:

style="font-size:12px;line-height:16px;font-family:Arial, Helvetica;"

Evite utilizar el tag <style> con la definición de las clases de estilo, pues algunos provedores eliminan esa tag. En caso de que insista en utilizarla, coloque esa tag dentro del area <body> y no dentro del area <head>
Prefiera utilizar CSS en su forma 'inline' o sea, directo en el código HTML, por ejemplo:

<p style="font-family:Arial; font-weight:bold;
font-size:11px; color:red;">texto</p>

Formulários

Evite utilizar formulários pues estos serán bloqueados en Outlook y por vários proveedores

Imagen de fondo

Siempre utilice la tag <div style> con la propriedad background-image, para delimitar la imagem de fondo, por ejemplo:

<div style="width: 100%; height: 100%;BACKGROUND-IMAGE: url(http://emailmkt1.locaweb.com.br/admin/images/logo_locamail_marketing-1.jpg)">
el texto irá aquí.
</div>

Color de fondo

Utilize la tag <div> con la propriedad background-color, por ejemplo:

<div style="background-color:red;width: 100%; height: 800px;">
calquier texto aqui
</div>

obs: En este caso, ajuste el parámetro height para definir el grado de color de fondo

otra manera es utilizar la tag <td> con la propriedad bgcolor, por ejemplo:

<table>
 <tr>
  <td bgcolor="red">texto<br />dsadasdas </td>
 </tr>
</table>

Encoding

Prefiera utilizar character encoding como UTF-8 o encoding más simple como ASCII o ISO-8859-1

Flash y Javascript

Nunca utilice Flash o Javascript en el cuerpo del Email pues estos son bloqueados por los anti-virus de los principales proveedores

Links Utiles

validador de CSS y HTML da Microsoft para Outlook: [1]
lista de propriedades de CSS que son aceptadas por los principales proveedores: [2]
estadísticas sobre tags aceptadas por los principales proveedores: [3]
plantillas grátis para descargar: [4]

Vea también