Saltar al contenido
css

Newsletters y plantillas de correo con CSS

martes, 14 de octubre del 2008

Ultimamente he tenido que diseñar varias plantillas de correo para boletines enviados por correo electrónico. Pero al montarlas y al hacer pruebas de envío el correo no se ve igual en los programas de correo y el formato se pierde muchas veces. Luego de investigar un poco y de hacer muchas pruebas logré ajustar el código de las plantillas para que se viera igual en la gran mayoría de programas de correo o webmail.

Estas son las conclusiones o consejos que le ahorrarán tiempo a la hora de diseñar plantillas de correo:

  • 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, 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.
  • Imágenes de fondo solo funcionan en td’s. Esta vieja técnica, muy usada el siglo pasado, aun es útil cuando queremos aplicar una imagen de fondo a un elemento dentro de nuestra plantilla:
    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, o tendrían que ser enviadas como documentos adjuntos al correo.
    <img src="http://www.dominio.com/imagenes/lineahor.gif" alt="" width="600" height="3" />
  • 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.
  • No olvidar los 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 style="color: #ff9900; text-decoration: none;" href="http://www.visa.com.co">
    Visa </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.
  • 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.

Adicionalmente recomiendo revisar la Guía de CSS para email realizada por Campaign Monitor.

Me gustaría conocer consejos adicionales o experiencias que hayan tenido con los newsletters.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comentarios (10)

Hola q tal? me gustaria saber si podrias darme un ejemplo mas extenso sobre las imagenes de fondo pq no logro entender como iria, desde ya muchas gracias y ah sido de gran ayuda tu posteo.

Hola Lucas, si necesitas crear una imagen de fondo para un elemento no debes usar la regla background de css, porque no funciona en algunos programas de correo. Debes aplicarle dicho fondo a una celda de una tabla. Si normalmente haces algo como:
<div style=\"background:url(http://www.dominio.com/fondo.gif);\"> texto</div>
debes hacerlo así:
<table><tr><td background=”http://www.dominio.com/fondo.gif”> texto</td></tr></table>
Espero te sirva de ayuda.

muchas gracias por la respuesta, pero aver te paso parte de mi codigo para q veas pq no entiendo mucho de codigo html solo lo basico seri algo asi:

 
 
……..

Esta linea es la q no me toma ciertos programas de correo, q seria la imagen de fondo de una tabla, como deberia ir??
Desde mil gracias!!!!

muchas gracias por la respuesta, pero aver te paso parte de mi codigo para q veas pq no entiendo mucho de codigo html solo lo basico seri algo asi:

 

Esta linea es la q no me toma ciertos programas de correo, q seria la imagen de fondo de una tabla, como deberia ir??
Desde mil gracias!!!!

hola Luis!, muy buen artículo, la verdad que yo me vuelvo loco con los newsletters de las bandas, xq necesitan promocionar sus fechas y tocan bastante seguido, lo que no puedo hacer es poner un fondo de color negro #000 al body, y la verdad que solo lo pude hacer con la función mail() con formato html de php, si vos tenés alguna solución sobre esto contame, saludos Luis!

Que tal Esteban, el problema de aplicar un estilo sobre el body es que el programa de correo (hotmail, yahoo, gmail etc) también tiene una etiqueta body el cual tiene un estilo. Por eso habría que crear un contenedor que agrupe todo el newsletter, con ancho 100% (un div o una tabla) para simular el color de fondo del mensaje. Espero te funcione, la verdad yo trato de dejar el fondo blanco para evitar problemas.

No consigo quitar en hotmail, yahoo, gmail desde Firefox el dichoso recuadro azul de las imagenes con enlaces.
¿Sabes si es posible quitarlo?
He probado poniendo un style con outline none, pero nada sigue sin funcionar.
La cosa es que si la plantilla html la abro con Firefox no sale ese recuadro pero en cuentas hotmail, yahoo, gmail si.
Me estoy volviendo loca.
¿Alguna sugerencia?
Gracias

Hola Laura. Para eliminar el borde azul de las imágenes con enlaces debes agregarle a la imagen el atributo border=”0″ ó tambien style=”border:0″

Yo ya me encontré con ese problema para que no salgan bordes a las imágenes en los correos que envias, se tienen que definir el width y el height de la imagen, además de definir border=”0″, no basta con decirle que el borde sea cero.

Espero os sea de ayuda

hola gracias por la informacion