Todo lo que los desarrolladores necesitan saber sobre el envío de emails transaccionales

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Imaginemos que estás desarrollando una nueva característica o aplicación. El final está a la vista. Toda la compleja infraestructura, las bases de datos, la API, las pruebas se ven bien. A continuación, te das cuenta de que hay puntos clave en el sistema en los que necesitas enviar correos electrónicos "transaccionales"; restablecimiento de contraseña, correos electrónicos de bienvenida, recibos, facturas.

Sabes que existen servicios y APIs que puedes usar para que gestionen esto por ti, pero a medida que empiezas a investigar sobre el envío de correo electrónico te das cuenta de que va a ser más difícil de lo que pensabas. Especialmente si deseas utilizar los diseños que tu diseñador, gerente de producto o gerente de marketing tenía en mente.

Este es un escenario habitual. Como desarrolladores rara vez pensamos en los correos electrónicos transaccionales hasta después de haber construido el producto. No pasa nada, hay un montón de soluciones por ahí que te cubrirán la espalda. Ha pasado mucho tiempo desde que tuviste que confiar en la configuración de tu propia infraestructura de correo electrónico para administrar su envío, su recepción, los rebotes, las cancelaciones de suscripción, etc.

Dicho esto, hay algunas cosas clave que debes saber sobre la creación de correos electrónicos HTML, el envío de correos electrónicos y el mantenimiento de una buena puntuación de reputación del remitente. Esta lista de comprobación te ayudará a prepararte para el próximo proyecto que cuente con correos electrónicos transaccionales. Cubriremos lo siguiente:

¿Qué son los correos electrónicos transaccionales?
Escoge tu proveedor de servicios de correo electrónico (ESP)
Una guía sobre la entrega y la reputación
Crear correos electrónicos HTML responsivos
Recursos de correo electrónico para desarrolladores

Nota: este tutorial forma parte de toda una semana de contenido sobre correo electrónico disponible en Tuts+ Web Design, ¡echa un vistazo a la guía de aprendizaje Dominar el correo electrónico HTML para saber más!

¿Qué son los correos electrónicos transaccionales?

https://cms-assets.tutsplus.com/uploads/users/30/posts/31759/image/demos.jpg

Puede categorizar los correos electrónicos que las empresas y las aplicaciones envían en:

Correos electrónicos transaccionales
Correos electrónicos de marketing

Podrías desglosarlos aún más en subcategorías, pero para el objetivo de lo que estamos hablando aquí, continuemos con estos dos.

Los correos electrónicos de marketing suelen ser de naturaleza promocional y son gestionados por equipos de marketing. Entre ellos se incluyen las newsletters mensuales, las promociones de temporada, las novedades de empresa y sobre productos, nuevos lanzamientos, etc. Hay una estrategia de contenido y ciclo de vida detrás de cuándo y con qué frecuencia enviarlos.

Los correos electrónicos transaccionales son aquellos desencadenados por el comportamiento del usuario y normalmente implementados por desarrolladores o equipos de producto. El usuario hace algo en la aplicación que hace que se envíe un correo electrónico. Estos incluyen:

Correos electrónicos de bienvenida
Correos electrónicos de confirmación
Restablecimientos de contraseña
Nuevas facturas/recibos
etcétera.

Probablemente seas tú mismo quien envíe la mayoría de estos correos electrónicos, pero también puedes enviarlos a través de servicios de terceros, por ejemplo Stripe para recibos, Shopify para el comercio electrónico.

Las reglas para los correos electrónicos transaccionales y de marketing difieren ligeramente. El RGPD (Reglamento General de Protección de Datos) entró en vigor el 25 de mayo de 2018, por lo que cualquier persona que envíe correo electrónico de marketing está obligada a reunir el permiso explícito de los suscriptores y mantener un registro de ese permiso. Tal como está, no necesitas permiso explícito para enviar correos electrónicos transaccionales, por ejemplo, un recibo a alguien que acaba de comprar algo en tu tienda. Sin embargo, existen ventajas en mantenerse alineado con las regulaciones del RGPD con independencia de qué tipos de correo electrónico estés enviando.

Elige tu proveedor de servicios de correo electrónico (ESP)

Es posible configurar tu propio servidor de correo y administrar el envío de correo electrónico tú mismo. Si estás en una gran empresa como Google o Facebook, es posible que incluso tengas tu propio equipo de infraestructura de correo electrónico dedicado a gestionar el correo transaccional.

A la mayoría de nosotros no le recomendaría configurar y mantener su propio servidor de correo. Hay una gran cantidad de sobrecarga involucrada en su gestión y mantenimiento. En lugar de eso, utiliza uno de los ESP que hay por ahí. Tienen excelentes APIs para desarrolladores y precios razonables, por lo general con generosos planes gratuitos.

Cada uno de estos ESP cuentan con abundantes características que te proporcionan todo lo que necesitas para administrar el correo transaccional:

Envío de correo electrónico a través de API o SMTP.
Recepción y análisis de correo electrónico entrante.
Métricas de correos electrónicos enviados, recibidos, rebotados, abiertos, en los que se ha hecho clic.
Administración de listas de cancelación de suscripción y de supresión.
Monitoreo de reputación.
Gestión del bucle de retroalimentación.
Cumplimiento del RGPD y mucho más.

Una vez haya elegido tu ESP es el momento de configurar las cosas.

Una guía sobre la entrega y la reputación

Los proveedores de buzones de correo (como Gmail y Outlook) tienen en consideración una pequeña cosa llamada reputación. Querrás tener una buena reputación para asegurarte de que tu correo electrónico entre en las bandejas de entrada de los destinatarios. Si tienes una mala reputación, tu correo electrónico irá a la bandeja de spam o el proveedor de correo electrónico podría rechazarlo y entonces rebotará.

Según Talos, en julio de 2018 la cantidad media diaria de spam enviado a nivel mundial fue de 305.95 mil millones. No quieres que tu correo caiga en este saco.

Average daily spam volume — Volumen medio de spam por día

Cosas que pueden contribuir a una mala reputación:

Que los destinatarios marquen tu correo electrónico como spam.
Que los destinatarios no abran ni interactúen con tu correo electrónico.
El envío de excesivos correos electrónicos.
El envío de correos electrónicos desde una dirección IP que tenga mala puntuación.
No haber configurado DKIM, SPF y DMARC.
Que el contenido que envíes parezca spam.

Los tres principales métodos de autenticación que debes tener en cuenta son SPF (Sender Policy Framework), DKIM (DomainKeys Identified Mail) y DMARC (Autenticación de mensajes basada en dominio, informes y conformidad).

SPF es una forma en la que los proveedores de buzones de correo autentican que el correo electrónico proviene realmente de tu dominio. Es un registro DNS TXT que tendrás que añadir tu mismo a través de tu administración de DNS.

1	domain.com. TXT "v=spf1 include:domain ~all"

DKIM utiliza pares de claves públicas y privadas para firmar cada mensaje con una firma criptográfica única, diseñada para detectar la suplantación de correo electrónico. Cuando pulses Enviar, tu ESP agregará una firma privada y, a continuación, en tu DNS se encuentra la firma pública, a la que llamará el proveedor de buzones del destinatario para asegurarse de que todo se ve bien.

1	_domainkey.domain.com. TXT "v=DKIM1; k=rsa; p=PUBLIC_KEY"

DMARC no es un protocolo de autenticación, pero te permite establecer una directiva que indica qué hacer con los mensajes que no pasen SPF o DKIM, si serán rechazados o quedarán en cuarentena.

1	_dmarc.domain.com. TXT "v=DMARC1; p=reject; pct=100; rua=postmaster@domain.com"

Aquí tienes un ejemplo de cómo funciona la autenticación de correo electrónico en su conjunto. Se trata de una simplificación excesiva, pero te dará una idea sobre su funcionamiento.

Email authentication — Autenticación por correo electrónico (fuente: htmlemail.io )

La reputación está vinculada tanto a tu dominio de envío como a la dirección IP que utilizas, por lo tanto desearás que esta sea estática. Comprobar tu dirección IP es el método más sencillo que tiene un proveedor de buzones (Gmail, Outlook, Hotmail, Yahoo, AOL, etc.) para comprobar tu reputación. Si envías más de 50.000 correos electrónicos por semana, debes valorar el uso de una IP dedicada de manera que no la compartas con otros, esto te proporcionará un poco más de aislamiento. Y ten en cuenta que debes "calentar" las IPs. No deberías empezar a enviar directamente millones de correos electrónicos desde una nueva IP dedicada de inmediato. La mayoría de los ESP ofrecen esta característica.

Otra cosa a tener en cuenta es el uso de direcciones IP y subdominios independientes para tu correo electrónico transaccional y de marketing. Por lo general, yo configuro algo como send.mydomain.com para marketing y notifications.mydomain.com para correos electrónicos transaccionales.

No envíes desde una dirección de correo electrónico "no-reply@". En primer lugar, da mala imagen a tus destinatarios, ya que parece que no te importan ni quieres saber de ellos. En segundo lugar, es estupendo cuando los destinatarios responden, interactúan y se comprometen. Esto es lo que a los proveedores de buzones de correo les gusta ver.

Usa herramientas como SenderScore y SenderBase para supervisar tu reputación.

Crear un correo electrónico responsivo con código HTML

MIME Multiparte

Cuando se envía un correo electrónico este está conformado por encabezados y otras distintas partes. Esto se conoce como Extensiones multipropósito de correo de internet (Multipurpose Internet Mail Extensions o MIME). Esto combina texto sin formato, HTML y/u otras partes y deja que el cliente destinatario decida qué y cómo mostrarlo.

Los encabezados ("headers") contienen pares de valores clave como quién era el remitente original, el asunto del mensaje, la dirección de correo de respuesta y un montón de otros interesantes datos. Dentro del cuerpo de tu mensaje tienes diferentes "partes".
text/plain es la forma más simple de enviar un correo electrónico con texto solamente y sin formato.
text/html habilita HTML. Aquí es donde va tu correo electrónico HTML.
text/watch-html es para relojes, como el Apple Watch, y tiene una compatibilidad HTML limitada.
text/x-amp-html es una nueva parte que trae contenido interactivo a Gmail con AMP para correo electrónico.

En la mayoría de los correos electrónicos, enviarás una parte de texto sin formato y una parte HTML. A los proveedores de buzones les gusta ver ambos. La buena noticia es que los ESP gestionan todo esto por ti. Probablemente no es algo en lo que necesites pensar a menos que estés tratando de hacer algo más avanzado con el correo electrónico.

Si tienes curiosidad por saber cómo se verá todo, en Gmail haz clic sobre Ver original (o Mostrar original) y te mostrará cómo se hace la salchicha. Reunir todas estas piezas juntas es bastante complicado, y es otra buena razón para utilizar un ESP que haga todo esto por ti.

Tablas y CSS en línea

Al codificar el correo electrónico HTML se recomienda (todavía) utilizar tablas (<table>), filas de tabla (<tr>) y celdas de tabla (<td>). Muchos clientes de correo electrónico están mejorando en el soporte de HTML y CSS modernos, pero si lo usas corres el riesgo de que se desmoronen en ciertos clientes de correo electrónico.

Hay un montón de clientes de correo electrónico por ahí. Litmus, una herramienta de pruebas de correo electrónico, actualmente es compatible con más de 90 clientes en equipos de sobremesa, web y móviles. Todos estos clientes de correo electrónico utilizan diferentes motores de representación para los mensajes de correo electrónico. Algunos usan Webkit, algunos Internet Explorer, algunos Microsoft Word. Y todos ellos añaden algo propio en lo que a los estilos y clases se refiere aparte de lo que tú mismo proporcionas.

^{Obtén más información sobre los motores de representación de correo electrónico.}

Con esto en mente, es recomendable jugar seguro y atenerse a algunas reglas al crear correos electrónicos con código.

Usa <table> en lugar de <div>
Usa colores hexadecimales completos, #ff6600 en lugar de abreviarlo como #f60
Utiliza padding en lugar de margin
Usa background-color para el color de fondo en lugar de background
Utiliza CSS en línea en el código en lugar de una hoja de estilo CSS incrustada
Usa exclusivamente fuentes seguras del sistema y de la web
Añade role="presentation" en cada tabla para que le quede claro a los lectores de pantalla que la tabla se está utilizando para construir el diseño
Utiliza etiquetas HTML semánticas, como <p> y <h1>, cuando proceda

Por ejemplo, así es cómo normalmente se codificarían botones en un correo electrónico HTML, usando una tabla externa para establecer la alineación y una tabla interna para la forma del botón.

Es una excelente solución a prueba de balas:

Escribir CSS en línea puede ser monótono, por no mencionar la dificultad de mantenimiento, y que no es escalable, especialmente para los equipos grandes. Aquí es donde desea utilizar una herramienta para incluir el CSS en línea (CSS inliner) o algún conjunto de herramientas de automatización que te ayuden a crear y aplicar estilos en línea en tus plantillas. Marcos de trabajo como MJML y Inky proporcionan a los desarrolladores un lenguaje de plantillas más amigable con el que trabajar.

Nota: puedes usar media queries e instrucciones condicionales para dirigirte a determinados clientes, con ellos puedes indicar diseños especiales para Outlook o hacer uso de fuentes web en clientes Webkit. Echa un vistazo a esta sencilla plantilla de correo electrónico responsivo de código abierto para empezar o leer más sobre estas técnicas para codificar plantillas de correo electrónico HTML más avanzadas.

¿Realmente necesito usar tablas y CSS en línea en 2018?

Depende. Si quieres jugar seguro y asegurarte de que tus correos electrónicos sean a prueba de balas, entonces sí.

Diseño de correo electrónico

Crear un correo electrónico HTML simple y responsivo

Nicole Merlin

Si tienes un buen conocimiento de tus destinatarios y sabes que utilizan clientes de correo electrónico que admiten CSS incrustado y el modelo de caja ("box model"), entonces quizá no. Definitivamente puedes asumir el riesgo y no tener problemas. Yo personalmente me quedo con los viejos hábitos, es decir, uso tablas y CSS en línea, pero mucha otra gente están empezando a experimentar con la opción del CSS "no en línea".

Imágenes, GIFs, video y medios

Algunos clientes (en particular Outlook) bloquearán la representación de imágenes de forma predeterminada, lo que obligará a los destinatarios a optar para poder ver las imágenes. Teniendo esto en cuenta, asigna siempre a tus imágenes un texto ALT descriptivo.

HTML

Consejo rápido: No olvides aplicar estilo al texto ALT

Nicole Merlin

Querrás proporcionar imágenes de alta calidad para pantallas retina (por ejemplo, para el iPhone) por lo tanto, las dimensiones de tus imágenes deben ser al menos el doble del tamaño al que las desees mostrar. Con esto en mente, asigna siempre a tu imagen un atributo width para evitar que se desborde en algunos clientes.

1	<img src="https://your-cdn.com/image.png" alt="Descriptive text" width="600px" height="300px" border="0" style="display:block; max-width: 100%;">

Los GIF animados son compatibles con la mayoría de los clientes. El vídeo es compatible con iOS, Apple Mail y Outlook.com. También puedes experimentar con emojis en las líneas de asunto para llamar la atención de los destinatarios 🤯

Comprime los recursos multimedia y cárgalos en una red de entrega de contenido (CDN), como Amazon Web Services, Cloudinary o imgix. Muchos ESP se encargarán de esto por ti.

tl;dr

¡Y ya hemos terminado! Vamos a recapitular:

Hay muchos más aspectos sobre el envío de correo electrónico de lo que se ve a simple vista.
Usa un servicio API amigable para desarrolladores para que administre el correo electrónico por ti.
Configura SPF, DKIM y DMARC para tu dominio de envío.
Si envías una gran cantidad de correos electrónicos contrata una IP dedicada en lugar de usar una IP compartida.
Envía mensajes de texto sin formato y correos electrónicos en HTML.
Use tablas y coloca tu CSS en línea para que no se desmorone la presentación al ser interpretados por los clientes de correo electrónico.
Recuerda comprobar tus correos electrónicos en clientes de correo electrónico y en dispositivos antes de enviarlos.