Cómo codificar una newsletter

08 October 2010

Es posible que te hayas sentido frustrado al ver que el diseño de tu newsletter se va al traste cuando la abres en ciertos gestores de correo.

Actualmente existen gestores de correo que admiten todo tipo de código HTML y CSS. Sin embargo, todavía son muchos los que echan abajo toda tu maquetación y consecuencia tu campaña de e-mail marketing.

A la hora de codificar tu newsletter existen una serie de factores que hay que tener en cuenta:

  • Los diseños simples funcionan mejor.
  • No presupongas que tus imágenes se verán.
  • Mchos lectores leen sus correos utilizando sólo la pantalla de previsualización.

Distribución de los elementos

Las “tablas” son el pilar de toda newsletter. El uso de divs y CSS para la maquetación puede hacer de tu correo un caos absoluto. Construye la estructura del e-mail con tablas anidadas: una primera tabla que englobe todo el contenido y defina la estructura principal (one-column o two-column layout) y una tabla por cada elemento del contenido tal y como se muestra en la imagen:

Tablas anidadas para la codificación de tu newsletter

A la hora de definir la tabla que engloba todo el contenido debes de tener en cuenta el atributo que define el ancho de la misma. Muchos usuarios leen sus correos desde la pantalla de previsualización. Para asegurarte de que tus clientes lean todo el contenido es recomendable no superar los 550px de anchura.

Si quieres utilizar etiquetas como “div”, hazlo con cautela. El atributo float no siempre funciona por lo que la distribución de elementos podría quedar desordenada dependiendo el gestor de correo.

Una vez la estructura está codificada, el siguiente paso es añadir los estilos CSS inline. Para asegurarnos la compatibilidad con todos los gestores de correo, lo más recomendable es definir los estilos dentro del atributo “style” de cada etiqueta. Evita declararlos en archivos externos o dentro de la etiqueta head.

Conjuntamente con la versión HTML de tu newsletter, es importante incluir una versión de “sólo texto” de tu newsletter. Hoy en día, cualquier gestor soporta código HTML. Sin embargo, algunos usuarios no desean HTML en sus e-mails o simplemente tienen un gestor de correo antiguo.

Antes de proceder con el envío, no olvides hacer pruebas tanto en navegadores como en diferentes gestores de correo (Gmail, Outlook, Thunderbird, etc.). Es aconsejable tener varios programas de correo instalados y varias cuentas POP3 y de webmail.

En resumen, codifica como si estuviéramos en 1999 y utiliza CSS inline.

Recibe nuestra novedades, case studies y articulos en tu correo

Nuevo llamado a la acción


AUDITORIA SEO