La base para crear un comunicado que se vea correctamente en cualquier navegador o cliente de correo es sin duda una correcta programación del HTML del comunicado.
A continuación algunas recomendaciones para que el código de tu newsletter ayude a evitar que sea catalogado como SPAM y asegurarte que la información se comunique tal y como requieres, independientemente de las variables con las que te puedes encontrar a la hora del envío, como el navegador, el cliente de correo, entre otros.
Al finalizar ésta guía podrás aplicar distintas técnicas para obtener un boletín mejor diseñado desde su base, que es la maquetación. Esta guía es para usuarios de nivel: intermedio y superior
• Lenguajes de programación
Si insertas por ejemplo código entre etiquetas <script> tu correo podrá ser altamente considerado como SPAM, lo mismo sucede con Flash (swf), por lo que te recomendamos no usarlos.
• Diagramar con tablas
Desafortunadamente, nada de <div> en el código.
El HTML que utilices debe ser lo más sencillo posible evitando scripts, estilos, efectos, formularios, etc.Los programas de email(Outlook, Lotus, Thunderbird, Apple Mail, Gmail, Hotmail, Yahoo, etc…) renderizan de manera óptima las etiquetas <table>, a diferencia de las etiquetas <div> con propiedades de alineación, que generalmente se utilizan para programar un sitio web, por lo tanto debemos crear diseños y programación en base a tablas.
Cuando creas una
estructura con tablas debes de asegurarte de definir anchos en cada una de las celdas donde lo requieras, así como el ancho general de tu tabla, además puedes obtener mejores resultados en cuanto a diseño al utilizar
tablas anidadas, así
el riesgo de que tu email se vea descuadrado o incorrecto en la mayoría de los programas de email, disminuirá considerablemente.
Un ejemplo básico de una estructura con tablas podría ser el siguiente:
<table>
<tr>
<td>Cabecera</td>
</tr>
<tr>
<td>Texto con contenido (el cual puede ser otra tabla)</td>
</tr>
<tr>
<td>Pie</td>
</tr>
</table>
• Estilos CSS inline
La utilización de estilos CSS te ayudarán a que tu comunicado se muestre de manera apropiada y además con un buen diseño. Para utilizarlos de manera correcta es muy importante no crear clases dentro del código o insertar hojas de estilo creando links a éstas.
Lo que se debe de hacer es utilizar el atributo “style” dentro de cada etiqueta de HTML y enlistar dentro los estilos para dar formato a tu texto u objeto, esto debido a que los servidores de correo (sobretodo los principales como Hotmail, Gmail y Yahoo) eliminan todo lo que exista entre la etiqueta <head> del html, de hecho Gmail elimina todo el código <style> de css que no sea inline, independientemente de donde se encuentre.
Ejemplo:
<p style="font-size: 13px; color= #333;>texto aquí</p>
Cabe mencionar que el uso del CSS está limitado, algunas propiedades como background-image, margin, float y padding no suelen funcionar correctamente por lo que debemos evitarlas.
TIPS
- Fijaremos el ancho en las celdas, no en las tablas.
- Siempre que se pueda, evitaremos jugar con márgenes y espacios interiores, sustituyéndolos por la anidación de tablas.
- A la hora de determinar el color, utilizar la propiedad de la tabla
<td bgcolor=”#ff3322″> en vez de usar el CSS
- Evita espacios en blanco en las celdas
- La propiedad font para CSS funciona correctamente en la mayoría de los casos así que podrás utilizarla pero siempre usando los métodos completos y no los abreviados.
Ej: p {font:bold 1em/1.2em georgia,times,serif;} / p {font-weight: bold;font-size: 1em;line-height: 1.2em;font-family: georgia,times,serif;}
• Siempre utilizar la unidad pixel
En los anchos de tablas, medidas de las imágenes, medidas de la tipografía, separación de renglones, etc. Para obligar a los servidores a renderizar del tamaño que queremos nuestros objetos.
Cuando deseas optimizar tu newsletter para que sea visto de manera correcta en móviles, deberás seguir otros estándares, que veremos en otra edición.
• No utilizar el cellpadding en <table>
Para crear un margen interior en las celdas de una tabla
es preferible utilizar el atributo «style» con la propiedad “padding”, ya que al utilizar bordes junto con el atributo cellpading, pueden crearse espacios de más, por lo tanto es importante que en
<table> el atributo cellpadding esté en ceros:
<table cellpadding="0">
Y que la propiedad padding esté dentro de style en la etiqueta de la celda:
<td style="padding: 5px;">contenido</td>
Además esto te permitirá tener un mejor control de las medidas en cada celda de tu comunicado.
• No poner contenido importante en <head>
Como estilos o etiquetas, ya que en Gmail y Hotmail se elimina todo el contenido entre <head> y </head>, sin embargo, en la versión en línea si es recomendable utilizarlo, por ejemplo, para que contenga el título de la página o palabras claves, por ello si vas a usar clases es necesario que dupliques el código CSS: debes insertarlo tanto en el <head> como en el <body>.
• No usar caracteres especiales en el nombre de las imágenes
Evitar el uso de ñ, espacios en blanco, acentos, :, ¨, etc…, incluso evitar los puntos en los nombres de archivo o carpetas, el único punto que debe haber es el que separa la extensión del nombre de archivo:
Por ejemplo:
Incorrecto: mi
.foto del
.men
ú.jpg
Correcto: mi_foto_del_menu.jpg
Los clientes de correo lo toman como un error y dividen las rutas a estos archivos, por lo tanto, no los encontrarán y no se mostrarán las imágenes en tu comunicado.
Recuerda agregar el atributo ALT en tus imágenes, si el programa de correo o webmail bloquea las imágenes (la mayoría lo hacen por defecto), se podrá leer una pequeña descripción de esa imagen.
• Tabla principal al 100%
Una buena práctica para centrar los newsletters y “expandir” el fondo del comunicado al 100% de la pantalla que lo contenga, es insertar una tabla principal que tenga como ancho el 100% y la propiedad de alineación en centrado, en el ejemplo a continuación, la tabla principal está en verde y el interior, o contenido, en rojo:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" width="100%" >contenido</td>
</tr>
<tr>
<td align="center” width="100%”>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300" >contenido</td>
<td width="300" >contenido</td>
</tr>
<tr>
<td width="300" >contenido</td>
<td width="300" >contenido</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" width="100%" >contenido</td>
</tr>
</table>
Con ese código obtendrás algo como ésto:
Donde el fondo azul se mostrará al 100% independientemente del tamaño de pantalla, mientras que la información (la tabla verde) se mantendrá siempre al centro y con un tamaño fijo.
• Usar máximo 600px como ancho del diseño
Muchos de los clientes de correo no despliegan tu email a pantalla completa, sino a través de un panel de pre-visualización que posee un ancho de 600px aproximadamente.
También debes tener en cuenta que, las imágenes que poseen un ancho mayor tienen más probabilidades de ser consideradas Spam. Es importante que respetes esa medida, para que tus newsletters puedan ser visualizados correctamente.
• Definir anchos en tablas
Utilizar siempre el atributo “width” con una medida en pixeles, el alto no siempre es necesario ya que puede variar con el contenido.
• Definir ancho y alto en imágenes
Nunca dejar vacíos los atributos “width” y “height” en una imagen, habrá algunos servidores de correos, los más antiguos, que no la muestren si se omiten (los toma como 0).
• Evita resultados inesperados con tus imágenes.
Cuando utilizas imágenes partidas o una imagen, al lado de otra, con una estructura de tabla, es necesario que cada imagen tenga el estilo “display:block”, clientes de correo como Gmail, generan automáticamente un espacio blanco, no deseado, entre las imágenes, desarmando el diseño de nuestro boletín.
• En los TD (celdas de la tabla) utilizar tanto los atributos de la etiqueta, como estilos en CSS
Aunque se repita la declaración, será más seguro que se vea en distintos clientes de correo electrónico.
Seguiremos actualizándote en esta lista de buenas prácticas para que tus campañas sean cada vez más efectivas.
A continuación algunos links que seguramente te servirán para mejorar el diseño de tus newsletters:
