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.
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
• Diagramar con tablas
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.
<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
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.
<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
• 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">
<td style="padding: 5px;">contenido</td>
• No poner contenido importante en <head>
• 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:
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%
<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>
• 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
• 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.
A continuación algunos links que seguramente te servirán para mejorar el diseño de tus newsletters:
Deja un comentario