Buenas prácticas de programación para plantillas de emails

 

Las buenas prácticas de programación son normas que, opcionalmente, podemos adoptar para asegurar la buena calidad y entendimiento del código.

Y sí; se lo que estas pensando: “HTML y CSS no son lenguajes de programación”. Esto es muy cierto: HTML es un lenguaje para estructurar el contenido web y CSS sirve para dar estilo o definir el aspecto de ese contenido.

Sin embargo, HTML y CSS si tienen algo en común con todos los demás lenguajes: Son código.  Se escriben en un editor de texto y si no se escribe bien, genera errores. Así de simple.

Al ser código es necesario que se usen las buenas prácticas de programación para garantizar que funcione, que se entienda y que sea bien interpretado en cualquier cliente de correo electrónico.

Como ya sabemos, programar un email no es igual a una pagina web, por eso te comparto algunos principios fundamentales para desarrollar tus plantillas de email con HTML y CSS.

 

Comenta solo lo necesario:

Comentar demasiado tu código puede activar las alertas de spam. Mi recomendación es comentar solo el inicio y final de cada sección para ubicarlas fácilmente.

Comenta solo lo necesario

 

 

Desarrolla la estructura solamente con <table>:

Olvídate de <div>, <section>, <header> u otras etiquetas HTML5, la mayoría de los clientes de correo no las soportan. La manera mas confiable de desarrollar un email es usando <table> para toda la estructura, ya que es 100% compatible con clientes web, desktop o mobile.

Desarrolla la estructura solamente con <table>

 

 

Usa CSS en línea en vez de estilos internos:

Muchos clientes de correo ignoran el CSS dentro del <head></head> y aplican solo los estilos en línea dentro de cada elemento. Para facilitarte el trabajo puedes usar un CSS inliner gratuito.

Usa CSS en línea en vez de estilos internos

 

 

Evita las abreviar el CSS:

Algunos clientes no reconocen el CSS abreviado. Por lo que siempre será mejor usar la sintaxis tradicional de CSS. Tal vez color: #000; puede funcionar en un cliente web, pero en un cliente mobile no, así que debes usar #000000.

Evita las abreviar el CSS

 

 

No incluyas JavaScript en tu código:

Aunque ver animaciones en los emails suena genial, JavaScript y Jquery son tecnologías incompatibles con los clientes de correo electrónico. Si quieres sumar animaciones puedes usar Gifs. Acá te explico las opciones para crear un email animado.

No incluyas JavaScript en tu código

 

 

SIEMPRE prioriza el responsive:

El porcentaje de usuarios que leen sus emails desde dispositivos móviles es grandísimo. Asegúrate de adaptar la estructura con Media Queries, y garantizar que el tamaño de fuente sea adaptable a tablets o smarphones.

SIEMPRE prioriza el responsive

 

 

Codifica los caracteres especiales:

Si tu ESP usa un formato de codificación diferente a UTF-8 es posible que sustituya los caracteres especiales por un signo cuadrado inentendible para todos. Para evitar esto usa el código HTML equivalente para cada carácter especial. Esta web te puede ayudar, es mi favorita <3.

Codifica los caracteres especiales

 

 

Define un texto descriptivo en las imágenes:

Muchos clientes de correo bloquean las imágenes, ya sea por seguridad o por estar detrás de una red con un firewall. En ambos casos, la imagen no se verá, pero el texto del atributo ALT si lo hará. Por eso es recomendable configurar un texto descriptivo o un CTA para asegurar que el usuario no se pierda el mensaje.

Define un texto descriptivo en las imágenes