Blog > Tips de email marketing

10
Junio-2011

¿Cómo diseñar un newsletter y que se vea bien en todos los clientes de correo?

Uno de los problemas más comunes al diseñar una newsletter o una pieza de mail, es lograr que el mismo funcione bien en todos los clientes de correo electrónico.

Por cliente entendemos al Outlook en todas sus versiones, Thunderbird, Lotus Notes, Entourage y otros tantos, programas para leer correos electrónicos.

También existen múltiples clientes web (Webmail) siendo los destacados el Gamil, Hotmail y Yahoo por cantidad de usuarios.
Al hacer pruebas de envío solemos encontrar, que el correo no se ve igual en todos los clientes y el formato se pierde muchas veces.



Les recomendamos seguir estas indicaciones, que le ayudarán al lograr una pieza funcional y que se vea correcta en la mayoría de las veces.


Diagramar con tablas.

Si, leyeron bien. El uso de div’s y span’s para diagramar usando atributos como float, margin, padding, etc. en el software correo y webmail simplemente no funcionan. Así que hay que diseñar como hace varios años, con tablas, td’s y tablas anidadas.

Usar CSS inline.

Aunque parezca absurdo y bastante obsoleto, los estilos debe ir aplicados a cada elemento. No se debe incluir los estilos en un archivo css externo, ni embebidos (embebed) en el head del html, ni definidos en clases (class); deben ir definidos en el cuerpo del correo. El tag [[link]] no es soportado por Hotmail, Gmail ni Yahoo, y el tag [[style]] incluido dentro del head no es soportado por Hotmail ni Gmail. Así que es necesario usar el atributo

[[“style” muchas veces:[[div style=”color:#990000; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; font-size:13px;“]]contenido[[/div]]

Omitir la declaración DTD.

La mayoría de aplicaciones webmail muestran el correo html en modo “quirks“. No usar html estricto ni de transición (transitional).

Usar un ancho de 600 pixeles como máximo.

Esto es aconsejable, ya que las nuevas versiones de programas de correo despliegan en la columna de la derecha el cuerpo de cada correo.
Por otro lado las imágenes de mayor ancho, suman puntos a la hora de considerar spam un correo.

Imágenes de fondo

Solo funcionan en td’s. Esta vieja técnica, aun es útil cuando queremos aplicar una imagen de fondo a un elemento dentro de nuestra plantilla:
[[td background=”http://www.dominio.com/fondo.gif”]] El atributo de css ”background-image”
No funciona en Gmail.

Llamar a las imágenes usando una ruta absoluta.

Si no es así simplemente las imágenes no aparecerán en el correo.
[[img src=”http://www.dominio.com/imagenes/linea.gif” width=”600″ height=”3″ /]]

No usar caracteres especiales en el nombre de las imágenes.

Omitir el uso de espacios, Ñ, acentos, signos raros ($ @ # + ! { } [ ]), etc. en el nombre de las imágenes. Por ejemplo Gmail, directamente no las muestra.

Definir anchos en las tablas.

Es aconsejable definir anchos a las tablas y sus columnas para garantizar que la diagramación del correo se verá igual en cualquier programa de correo.

Colores de los vínculos.

Cada navegador o programa de correo tiene un estilo o color para los vínculos que vienen en los correos. Si queremos usar colores diferentes al azul que vienen por defecto, es necesario definir el estilo dentro del tag
[[a]]: [[a href=”http://www.powersite.com.com” style=”color:#FF9900; text-decoration:none;”]]Powersite [[/a]]


Usar gif’s animados

En lugar de flash o video. La única forma de incluir movimiento en el cuerpo del correo es usando gif’s animados. Los archivos de flash no son soportados.
Tenga en cuenta que los Gif animados no son soportados por Outlook 2007/2010

Hacer pruebas.

Seguir estos consejos no evitará que se necesiten realizar pruebas de funcionamiento. Es aconsejable definir con el cliente para que programas de correo (Outlook 2003 y 2007 funcionan diferente) y webmail (Hotmail, Live, Gmail, Yahoo etc.) se realizará la plantilla. Es imposible garantizar que funcione bien en todos los lectores de correo.

Incluir una versión web.

Siempre es útil incluir un vínculo por fuera del cuerpo del correo que diga “Si no puede ver este correo haga click aquí”. Algunos programas de correo, o las aplicaciones para celular no despliegan bien los correos con html. El link debe llevar a una versión online del mismo boletín.


Algunas veces las imágenes al llegar a ciertos clientes de correo se ven con pequeñas separaciones que no se ven reflejadas en la vista previa en el navegador.
Para resolver esto debe aplicar a las etiquetas de las imágenes lo detallado en verde.

[[img src=”mi_imagen.jpg” style=”display:block” border=”0″ /]]

 

La mayoría de las cosas que aquí se indican son automáticamente reparadas por el "Reparador de Html" que posee NewsMaker en el paso 2 del wizard de envío.

Descarga de Archivos Guía CSS para emails

Comentarios

Deja tus comentarios
Guía paso a paso para hacer su primer envío con NewsMaker, la herramienta de email marketing más fácil y poderosa.
Más Leídos