Escribir un correo electrónico que funcione en todos los clientes de email, o casi todos, es importante si queremos realizar campañas de email marketing exitosas y además queremos que estos emails sean en HTML. Un email en HTML no es nada más que una página web, pero a pesar de que estemos en la era del HTML5 y el CSS3, hablar de correos electrónicos en HTML debe ser sinónimo de simplicidad y volver a lo básico. De hecho, lo más básico posible. Para algunos clientes de e-mail, si es texto plano mejor aún.

Pero, ¿qué pasa si realmente queremos dar algún estilo y diseño a los correos? ¿Qué hay que tener en cuenta?

WYSIWYG

Es importante escribir el código HTML sin la ayuda de editores WYSIWYG (What You See is What You Get). Estos pueden añadir código no válido para email HTML en la estructura de HTML. Utilizar un template existente compatible con Activecampaign o Mailchimp puede ser una buena idea.

"Multipart/Alternative MIME"

Para estar seguro que un mayor número de personas pueden recibir correctamente el email que estamos enviando, es buena práctica enviar también una versión en texto plano, alternativa a la versión HTML. Enviando en el formato "Multipart/Alternative MIME" y utilizando un proveedor de servicios de correo electrónico todo el proceso de envío se hace más sencillo y seguro.

Buenas prácticas

• Centrarse en el contenido, pues este es el más importante en la campaña.
• Las imágenes deberían ser las mínimas, o por lo menos no deberían ser un factor central. Pero si hay que utilizarlas, entonces deben de estar alojadas en un servidor de acceso público y hay que utilizarse enlaces absolutos para apuntar a estas imágenes.  Que sea rápido el servidor. Muchos clientes no enseñan la imagen por defecto y según un estudio hecho los últimos años, un 40% de las personas no habilita, ni clica en el ya clásico "mostrar imágenes".
• Manteniendo la simplicidad para estructurar el HTML, hay que olvidar los divs y  utilizar tablas. Estas funcionan no solo en el Internet Explorer o Chrome, pero también en el Outlook o incluso en el Microsoft Word.
• El e-mail no debe ser demasiado ancho. La mayoría de la gente lee el email desde su dispositivo móvil, entonces 600px de ancho puede ser buena idea.

Test y pruebas

Como siempre, testar es obligatorio, el listado de clientes  de e-mail es casi infinito y mucha gente los utiliza. Seguramente será posible testar con Outlook, Outlook 2007, Outlook 2003, Gmail, Hotmail, pero no mucho más. Por eso simplificar es lo mejor. Si no, siempre hay herramientas de test como por ejemplo el MailChimp Inbox Inspector.

Webmail, Etiquetas y CSS

Los servidores de Webmail, como  Gmail, o Outlook no están interesados en que tu código substituya el suyo, por eso limpiarán todo lo que esté dentro de las etiquetas HEAD, BODY y DOCTYPE; Javascript, colores de fondo y estilos de CSS. De hecho la mayoría del CSS no funcionará.

El truco está en utilizar estilos de CSS en línea.  Aplicando un estilo en línea le da prioridad en relación a otros estilos.  Puede ser buena idea aplicar los estilos en línea después de maquetar todo el e-mail y así ahorrar tiempo. Por otro lado existen herramientas que automáticamente crean los estilos de CSS en línea cogiendo los estilos que están dentro de la etiqueta HEAD. Campaign monitor tiene una herramienta interesante para hacerlo.  Premailer también es una herramienta a tener en cuenta.

Tipografía

"Mantenerlo simple" es la llave, por lo tanto es buena practica también utilizar una fuente que sea cross-platform y tener en cuenta que no es lo mismo que para un sitio web. En los correos electrónicos en HTML estas fuentes, como por ejemplo la Gotham, pueden no funcionar. Arial, Geneva, o Georgia son fuentes que suelen funcionar correctamente.

Web Fonts

Algunos clientes de e-mail, entre ellos iOS Mail, Apple Mail o Thunderbird aceptan la utilización de la regla de CSS @import, lo que permite utilizar fuentes desde Google Web Fonts o Fontdeck. Esta funcionalidad aún está en una fase  experimental y me parece importante invertir el tiempo en otros conceptos relacionados con el envío de correo electrónico en HTML y simplificar.

Fuentes:

How To Code HTML Emails
Coding your Emails
Premailer
Typography