Correo en HTML con CSS: lista de compatibilidad


Es posible que alguna vez se haya visto en esta situación: después de diseñar y enviar un email maquetado con las técnicas más avanzadas de HTML y CSS ha podido comprobar que el cliente de correo de su destinatario rompe completamente el diseño del email.


Bien es cierto que enviar correos en texto plano no daría ningún problema. Pero, a día de hoy, no tiene sentido prescindir de todo elemento HTML dentro de un email sólo porque algunos clientes de correo dan problemas a la hora de representar cierto código HTML o CSS. La clave es saber qué HTML y CSS funciona en los principales clientes de correo.


Esta lista de compatibilidad de email es un recurso muy útil, especialmente porque propociona ejemplos gráficos con capturas de pantalla de cómo se vería un email de ejemplo en los principales clientes de correo. Además, la página se mantiene actualizada, de manera que tendrá en cuenta las últimas actualizaciones y mejoras de compatibilidad de dichos clientes de correo.


A día de hoy pueden verse unas cuantas conclusiones interesantes en esta lista, como por ejemplo que el cliente de correo de Gmail sólo lee estilos CSS inline: Gmail ignora el CSS incluido dentro de la cabecera (head), y elimina las clases CSS, así como los identificadores (ID) del contenido HTML original del correo.


Por cierto, si busca un cliente de correo fiable y gratuito para descargar sus email, me decantaría por Mozilla Thunderbird.


¿Existe HTML o CSS que funcione en todo cliente de correo?


La pregunta es: ¿cómo crear emails vistosos que funcionen en cualquier cliente de correo? Lo cierto es que, actualmente, los principales programas de lectura de email representan sin ningún problema tablas HTML, que incluso pueden tener un color de fondo definido inline.


Hasta sería posible incluir imágenes de fondo en muchos clientes de correo. Las imágenes tienen un gran potencial para mejorar el diseño del cuerpo principal del email. Sin embargo, no se debe depender por completo de las imágenes: la idea es diseñar correos que, en caso de ser mostrados con algún error, fallen de forma controlada. De esta manera, el email HTML seguiría siendo legible en cualquier cliente de correo.


Sin duda, CSS es el futuro del diseño web por sus virtudes de fácil mantenimiento del código, y flexibilidad para posicionar elementos HTML. No obstante, a la hora de enviar emails con HTML, puede ser mejor limitarse a un diseño más sencillo (aunque efectivo) en que el contenido del email sean tablas HTML


Email basados en tablas HTML

Mi consejo es utilizar tablas HTML en emails: la mayoría de los clientes de correo mostrarán un contenido basado en tablas HTML sin problema. Y no hay que perder de vista esta lista de compatibilidad de CSS en clientes de correo: puede que el día de email totalmente basados en CSS esté cerca.

2 comments:

Ángel dijo...

El Outlook 2007 ha sido todo un paso atrás en los correos con HTML incrustado. Resulta que el intérprete de HTML que utiliza es el del Word (aunque sea aberrante, se puede hacer páginas web con Word) y ni lee colores de fondo ni muestra gifs animados.

Una de mis compañeras de trabajo está en una sección de mailing y ahora la pobre ya no sabe ni qué hacer para que todos los navegadores muestren bien su ... Llamémoslo spam :P

ESV dijo...

Probablemente, la mayor parte de los destinatarios de correo utilizarán además Outlook 2007, muy popular en entornos ofimáticos. A este paso, al final acabaremos volviendo a los e-mail de texto plano. :-S