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:
contenido
- 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.
- 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>:
Visa
- 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.