Newsletters con CSS
Crear un newsletter no es una tarea complicada de por sí. Lo verdaderamente complicado es hacer que todo usuario la vea completamente. En la actualidad la mayoría de newsletter que se envían por correo consisten en una imagen con unos pocos enlaces o en algunos casos una tabla.
Las newsletter al fin y al cabo no son más que documentos html y como sabemos, el diseño y maquetación de documentos web ha dejado de contar con tablas para respetar los estándares y usar XHTML y CSS. Tomando esta premisa como bandera, nuestras newsletters también deberían de seguir estándares.
Ok, vale, vamos a hacer las newsletter con estándares.
Pues podíamos empezar por plantearnos la estructura semántica del mail teniendo muy en cuenta que debe ofrecernos un resumen de los artículos que queremos mencionar, una imagen si lo deseamos y por supuesto un enlace con trayectoria absoluta a la dirección URL exacta del artículo. Esto, aunque parece bastante obvio, no debemos de olvidarlo; más de una vez he visto newsletters con trayectorias relativas tanto para las imágenes como para los enlaces.
En cuanto al diseño, éste debe seguir la misma línea que el portal del que proviene, pero con un diseño algo más reducido. No se trata de enviar nuestro portal por mail. Podríamos decir que es fácil conseguirlo, pero ahora es cuando no debemos olvidar la barrera de los diferentes gestores de correo (Outlook, Thunderbird,…) y/o servicios de mail gratuitos (Windows Live Mail, Yahoo Mail Beta, GMail,…) y es que cada uno tiene e interpreta las propiedades y elementos css como les da la gana.
Por eso, nos es de gran utilidad el último artículo de Campaign Monitor.
En esta entrada nos hacen un resumen de las propiedades y selectores CSS soportados por cada uno de los gestores de correo. GMail es el que peor parte se lleva, con su casi nulo soporte de CSS. Thunderbird, por el contrario, soporta todos los selectores y propiedades. Entremedias, Windows Live Mail y Yahoo Mail Beta.
Por eso es tan importante seguir estándares y mantener una estructura semántica, porque a pesar que hagamos todo lo posible por usar aquellos estilos que podrían representar sin problema todos los gestores y proveedores gratuitos de correo, teniendo un código bien formado nos evitaremos sorpresas desagradables como que a un usuario se le descojone toda la newsletter porque su gestor de correo no soporte algunos (o todos) los estilos.
Algunos enlaces de interés:
HTML Emails - Taming the Beast
Optimizing CSS presentation in HTML emails
How Windows Live Mail and Yahoo Mail Beta Shake Out with CSS
A Guide to CSS Support in Email: 2007 Edition
How to test HTML emails
Emails y CSS en del.icio.us
Hola, acabo de encontrar por casualidad tu blog y la verdad me ha sido de mucha ayuda por que llevo tiempo intentando crear un newsletter. Además del newsletter como tal, tengo una duda enorme, que igual tu me puedes solucionar, te cuento. Yo hago la “miniweb” con sus imágenes y enlaces y texto que será lo que reciban en el newsletter, pero cómo lo envío por correo? con las pruebas que he hecho, al final cuando abres el mensaje no se ve nada, mas que el código html del newsletter o el texto pero sin las imágenes. Me podrías ayudar a ver cómo hago para mandar el contenido del newsletter y que los que lo reciben lo lean correctamente?
Si puedes contestar, hazlo en mi correo o en tu blog, que pasaré por aquí de vez en cuando!!
Un saludo.
Hola iroise!
Hasta el momento la forma que he utilizado para enviar correos y/o newsletters ha sido con la clase mail() nativa de PHP. Esta clase te permite enviar correos en formato HTML.
http://es2.php.net/manual/es/function.mail.php
Sé que existen programas que se encargan de envíar mails masivos, pero lo cierto es que nunca los he usado.
Pero retomando lo que hablábamos de PHP, lo que debes de enviar es el código html que has maquetado enlazando con trayectoria absoluta la imagen y el css.
Un saludo y gracias por visitar el blog
Santi M
[…] Afortunadamente me encontré este escrito en el blog de martinpulico.com que me ayuda en este tema, de hecho recuerdo que el buen amigo Joshua ya me habia explicado eso pero pues necesito más que peras o manzanas para llegar a mi objetivo. […]
Yo tengo una duda, si envío un mail desde esos programas masivos a un correo de hotmail no me reconoce los estilos pero si lo envío primro a un correo de Outlook y después al de hotmail, se ve con los estilos css, ¿si no soporta los estilos por qué se ven en el segundo envío?
Hola Kabuxa,
El mail que envías primero a Outlook y luego a Hotmail, ¿es el mismo u otro distinto?.
Me refiero a si cuando lo recibe Outlook lo reenvías desde ahí a Hotmail, o es que con el programa de envio masivo, envias una vez a Outlook y la siguiente a Hotmail?.
Si es el primer caso, puede ser que al reenviar el correo, Outlook te escriba algunos estilos (o los adapte) y por eso se vea.
Es algo que nunca me había pasado, pero si pudieras ser un poco más explícito con la explicacion (que programa de envio masivo utilizas, cómo está maquetado el html del correo que envias,….) podríamos echarle un vistazo.
Un saludo,
Santi M.