Diseño de plantillas de email HTML para emails transaccionales

abril 29, 2026

Dar estilo a las plantillas de email HTML transaccionales es un dolor de cabeza. Las tablas, el CSS en línea, el CSS no compatible, los clientes de escritorio, los clientes web, los clientes móviles y los distintos tamaños de dispositivo son factores que influyen en tu plantilla de email. Si algún proveedor de servicios de bandeja de entrada (ISP, como Gmail) o proveedor de servicios de correo electrónico (ESP, como Sinch Mailgun) tiene dificultades para recibir o enviar tus emails, tus campañas no lograrán generar interacción.

No es de extrañar que los desarrolladores no quieran lidiar con las plantillas de email transaccionales cuando hay una acumulación de prioridades más importantes.

Lo primero es lo primero: emails transaccionales son mensajes automatizados que se envían a los destinatarios en respuesta a una acción específica. Cuando alguien hace algo en tu página web, como solicitar un restablecimiento de la contraseña o comprar un producto, recibe un email transaccional.

Estos emails difieren de los emails promocionales o los emails de marketing de dos maneras. La primera trata sobre el contenido. Los emails transaccionales contienen información objetiva y directa, y, por lo general, no promueven un objetivo de marketing ni intentan realizar ventas adicionales. En segundo lugar, a diferencia de los mensajes de marketing, que requieren que alguien se suscriba o dé su consentimiento (opt in) para recibirlos, los emails transaccionales no necesitan el permiso del destinatario.

Los emails transaccionales se envían inmediatamente después de que el usuario realiza una acción y proporcionan información relacionada con dicha acción. Echemos un vistazo a algunos ejemplos de emails transaccionales para mayor claridad:

• Email de confirmación de pedido: si alguien hace una compra en un comercio electrónico, es posible que reciba un email confirmando su compra que también proporcione detalles como un número de pedido, el método de pago utilizado y la fecha de entrega estimada.
• Email de notificación: otro ejemplo podría alertar al destinatario de que algo sobre su pedido, transacción, solicitud de servicio o cualquier otra cosa ha cambiado recientemente.
• Email de confirmación de envío: este se puede activar cuando el operador recoge el pedido de un cliente.
• Email de carrito abandonado: este tipo de email se enviaría cuando un cliente añade algo a su carrito, pero no completa la compra. Puede contener un incentivo, como un código de descuento, para animarlos a continuar.
• Email de restablecimiento de contraseña: si alguien olvida su contraseña y solicita un restablecimiento de la contraseña, puede recibir un email con un enlace para restablecer su contraseña.

Hay más ejemplos, por supuesto, pero esto en general describe de lo que estamos hablando aquí. Los emails transaccionales son una parte importante de la estrategia de atención al cliente de cualquier organización. No solo proporcionan a las personas información importante sobre el producto o servicio que han comprado (así como mensajes del sistema y alertas), sino que también sirven de ayuda para generar confianza y brindar tranquilidad sobre las acciones realizadas.

La estructura básica de cualquier plantilla de email transaccional debe incluir:

• Nombre y dirección del remitente
• Nombre y dirección del destinatario
• Una línea de asunto clara
• Un espacio para la información principal sobre por qué el destinatario recibe este email
• Enlaces a herramientas relevantes o páginas web relacionadas con la transacción (una página para cancelar, atención al cliente, asistencia, etc.).
• Información de contacto

Por lo tanto, una plantilla de email transaccional es un diseño prediseñado que los desarrolladores de emails pueden utilizar para agilizar la creación de emails transaccionales personalizados para su empresa o cliente.

Al utilizar una plantilla de email transaccional, puedes asegurarte de que tus mensajes cumplen con todos los requisitos necesarios y comparten el mismo aspecto y estilo. Esto es importante para la confianza del cliente. Las plantillas de email transaccionales también facilitan la concentración en las personalizaciones sin perder tiempo desarrollando elementos fundamentales.

El diseño de emails para mensajes transaccionales debe elaborarse con cuidado para garantizar que sean eficaces. Estas son algunas buenas prácticas para el diseño de plantillas para tus emails automatizados:

Los emails transaccionales deben ir directamente al grano. No es el momento de asumir riesgos, probar cosas nuevas ni de intentar asombrar a los suscriptores. Asegúrate de crear tus emails transaccionales con un tamaño estándar y no superar los 800 píxeles de ancho. Si utilizas Plantillas para correos transaccionales de Mailgun, no deberías tener ningún problema con esto.

Dado el uso cada vez mayor de los dispositivos móviles para acceder al email, es fundamental garantizar que tus plantillas de email transaccionales se optimicen para diferentes tamaños de pantalla. Esto permite a los destinatarios leer e interactuar fácilmente con el mensaje. Una vez más, no es el momento de cruzar los dedos y esperar lo mejor. Asegúrate de utilizar una herramienta de pruebas de email para ver cómo se muestra tu email en diversas situaciones.

Emails transaccionales tienen un propósito específico y no son el lugar para promocionar tu marca o productos. Cíñete al propósito del email y tal vez a una simple CTA, y evita añadir mensajes de marketing adicionales que puedan distraer al destinatario del mensaje principal.

Para garantizar que tus emails transaccionales sean accesibles para todos, es importante contar con alternativas para todos los GIF, fuentes especiales y otros elementos de diseño que pueden no mostrarse correctamente en todos los clientes de email. Esto asegurará que todos los destinatarios puedan ver el contenido de tu email, independientemente del cliente de email que utilicen. Una herramienta de validación de imágenes para emails hace que sea sencillo garantizar que has cumplido con esta buena práctica.

Las imágenes pueden mejorar tu email, pero también introducen riesgos de entregabilidad y de visualización si no se manejan con cuidado. 

Mantén los tamaños de los archivos lo más pequeños posible (generalmente por debajo de 200 KB por imagen) para garantizar tiempos de carga rápidos, especialmente en dispositivos móviles y conexiones más lentas. 

Para los formatos, limítate a opciones ampliamente compatibles: 

• JPEG (JPG): es mejor para fotografías y elementos visuales complejos con mucho color. 

• PNG: ideal para gráficos, logotipos o imágenes que requieran transparencia. 

• GIF: útil para animaciones sencillas, pero trata de que sean cortas y ligeras. 

Ajusta el tamaño de las imágenes teniendo en cuenta su diseño adaptativo. Un enfoque habitual es crear el diseño a 2x el tamaño a mostrar (p. ej., un email de 600 px de ancho utiliza una imagen de 1200 px de ancho) para que los elementos visuales se mantengan nítidos en pantallas de alta densidad de píxeles (DPI). A continuación, restríngelas en tu HTML utilizando width: 100%; max-width: 600px; height: auto; para asegurar que se escalen correctamente en todos los dispositivos. 

Por último, incluye siempre alt-text descriptivo para la accesibilidad y para los casos en los que las imágenes se bloquean de forma predeterminada. Esto garantiza que tu mensaje siga comunicando valor incluso sin elementos visuales. 

Al diseñar plantillas de email transaccionales, es básico tener en cuenta la accesibilidad, especialmente con la Ley Europea de Accesibilidad a la vuelta de la esquina. Asegúrate de que tu email sea fácil de leer y navegar para las personas con discapacidades, incluidas las que utilizan lectores de pantalla u otras tecnologías de asistencia. Utiliza alt-text para las imágenes y asegúrate de que tus opciones de color proporcionen suficiente contraste para las personas con discapacidades visuales. Haz pruebas de accesibilidad para emails y haz correcciones hasta que sea perfecto para todo el mundo.

La accesibilidad no siempre es lo primero que se nos viene a la mente, pero es importante. Acabamos de lanzar Mailgun Inspect para que sirva de ayuda. Usar tus plantillas de email transaccionales con Inspect asegurará que tus mensajes llegan a las bandejas de entrada y son accesibles para todos tus suscriptores.

• Haz que el contenido sea más inclusivo con las comprobaciones de HTML semántico.
• Señala la falta de alt-text, la falta de contraste o los problemas estructurales.
• Llega a todos tus suscriptores, independientemente de sus capacidades o dispositivos.

Los emails transaccionales personalizados pueden ser más eficaces a la hora de captar a tu audiencia. Considera la posibilidad de incluir campos para la personalización, como el nombre del destinatario o los detalles del pedido. Esto será de ayuda para crear una conexión más personal entre el destinatario y tu marca. También puede ser de ayuda para asegurar a los destinatarios que están viendo información precisa.

Probablemente hayas captado el mensaje de todas estas buenas prácticas: haz pruebas, pruebas y más pruebas. No basta con asumir que tu email está listo para enviarse. Enviarlo a tu compañero del final del pasillo tampoco es una comprobación adecuada. Utiliza una herramienta de pruebas de email para comprobar si hay problemas a la hora de mostrar el email, errores tipográficos, problemas de accesibilidad e incluso de entregabilidad (los emails transaccionales nunca deberían ir a spam).

Asegúrate de que tu nombre de remitente esté claramente asociado a tu marca. Evita los nombres de remitente genéricos o las direcciones «no-reply» siempre que sea posible, ya que pueden reducir la confianza y desalentar la interacción. En su lugar, utiliza un nombre de marca reconocible (p. ej., «Asistencia Acme» o «Facturación Acme») y una bandeja de entrada supervisada para que los destinatarios puedan responder si es necesario.

Los emails transaccionales deben ser fáciles de entender a simple vista. Utiliza un lenguaje claro y directo, y evita la jerga del sector, la terminología técnica o los acrónimos internos. Los destinatarios deben comprender inmediatamente por qué reciben el email y qué acción (si la hay) deben llevar a cabo.

Si tu email requiere una acción, incluye una llamada a la acción (CTA) clara y destacada. Múltiples botones o enlaces en competencia pueden crear confusión y reducir las conversiones. Haz que la CTA principal sea visualmente distinta y esté orientada a la acción (p. ej., «Ver recibo», «Restablecer contraseña» o «Gestionar suscripción»).

Un diseño limpio de una sola columna mejora la legibilidad y funciona mejor en dispositivos móviles. Asegúrate de que haya suficiente espacio en blanco entre las secciones, los botones y los bloques de texto para evitar el desorden. Un espaciado adecuado hace que sea más fácil para los destinatarios echar un vistazo al email y actuar rápidamente.

A pesar de que los emails transaccionales son funcionales, aun así deben reflejar tu marca. Utiliza una voz y un tono coherentes, muestra tu logotipo de forma destacada y cíñete a la paleta de colores y las fuentes establecidas. Una imagen de marca coherente genera confianza y tranquiliza a los destinatarios de que el email es legítimo.

Si incluyes algún tipo de mensajería secundaria, haz que sea sutil y sepárala claramente del contenido transaccional principal. Evita los banners promocionales pesados o las ofertas que compitan entre sí y que puedan distraer del propósito del email.

El texto de preencabezado (el breve texto de previsualización que aparece junto o debajo de la línea de asunto en la bandeja de entrada) debe servir de asistencia y reforzar la línea de asunto. Utilízalo para proporcionar mayor claridad, como detalles clave (número de pedido, fecha de renovación, etc.) que animen al destinatario a abrir el email.

Incluye siempre información de asistencia clara y destacada. Puede ser un enlace a un centro de ayuda, una dirección de email de asistencia al cliente o un número de teléfono. Los emails transaccionales suelen estar relacionados con la actividad importante de la cuenta, por lo que los destinatarios deben saber exactamente a dónde ir si tienen dudas o preocupaciones.

Para salvaguardar tu entregabilidad y proteger a los suscriptores frente a la suplantación de identidad, implementa protocolos de autenticación de email adecuados:

• Marco de directivas de remitente (SPF)
• DomainKeys Identified Mail (DKIM)
• • Autenticación, informes y conformidad de mensajes basada en dominios (DMARC).

Estos protocolos son de ayuda para los proveedores de buzones de email para verificar que tus emails transaccionales sean legítimos y mejoran la llegada a la bandeja de entrada.

Muchos clientes de email ahora ofrecen asistencia para el modo oscuro. Al diseñar plantillas de email transaccionales:

• Evita los colores de fondo codificados en el código.
  Utiliza archivos de logotipos transparentes.
• Comprueba las relaciones de contraste.
• Verifica cómo se muestran los botones y las imágenes en entornos oscuros.

Incluso los emails transaccionales pueden beneficiarse de las pruebas. Considera la posibilidad de probar las líneas de asunto, el lenguaje de las CTA y el espaciado del diseño para mejorar la claridad y las tasas de finalización.

Para las plantillas de email transaccionales, supervisa lo siguiente:

• Tasas de finalización.
• Tasas de rebotes.
• Tasas de quejas por spam.
• Tasas de entrega fallida.
• Estado de la reputación del dominio.

Las plataformas de email modernas te permiten automatizar las plantillas de email transaccionales a través de API, webhooks y las integraciones de CRM. Esto garantiza campos de personalización precisos y una activación en tiempo real.

Muchos equipos analizan ejemplos reales antes de crear sus propias plantillas de email transaccionales. Revisar diseños efectivos te puede ser de ayuda para evaluar el diseño, la jerarquía, la ubicación de la CTA, la marca y la claridad.

Las plantillas de email transaccionales descargables de Mailgun proporcionan un HTML listo para producción que puedes personalizar e implementar de inmediato. En lugar de ofrecer solo previsualizaciones de diseño, estas plantillas se han creado para ofrecer un diseño adaptativo, accesibilidad y entregabilidad, de modo que puedas integrarlas directamente en tus flujos de trabajo.

Sinch Mailgun ofrece varias plantillas de email transaccionales personalizables para ayudarte a empezar gratis rápidamente.

Estas plantillas de email están creadas para casos de uso comunes, como:

• Notificaciones de facturación
• Confirmaciones de pedido
• Restablecimientos de contraseñas
• Alertas de la cuenta

Cada plantilla es ligera y fácil de personalizar, lo que hace que sea sencillo añadir tu marca y adaptar el contenido a tus necesidades. Los campos de personalización están integrados para que puedas configurar rápidamente mensajes activados por disparadores y mantener informados a los destinatarios.

Así es el aspecto de una plantilla de email de muestra típica:

Aquí tienes algunas funcionalidades destacadas que debes conocer:

Antes de enviar emails en HTML, debes poner tu CSS en línea. Te recomendamos utilizar algo como Premailer para conseguirlo. Existen bibliotecas que hacen esto para cada uno de los lenguajes populares (Ruby, Node, PHP, Python, Grunt), o puedes poner en línea tu CSS manualmente mediante Premailer. Nuestras plantillas de email adaptativo incluyen consultas de medios para un diseño adaptativo. Es importante que las consultas de medios no estén en línea (Premailer se encarga de esto por ti). 

Nuestro repositorio contiene tanto las plantillas originales con una hoja de estilos CSS separada, como plantillas con el CSS ya en línea (consulta la carpeta /inlined).

Estas plantillas de email son adaptativas para los dispositivos móviles y utilizan consultas de medios para optimizar el diseño para pantallas más pequeñas.

Según el informe de interacción por email de Mailjet, el 52,5 % de los encuestados utiliza la aplicación móvil de Gmail para consultar sus emails. Por lo tanto, es importante que tus emails se vean bien y se puedan utilizar en pantallas pequeñas. 

Ten en cuenta que, en el momento de escribir esto, solo un puñado de los principales clientes de email ofrecen asistencia para las consultas de medios. . Esto incluye las aplicaciones de email nativas iOS Mail, Android 4.X y Windows Phone 7.5. 

Recientemente, hemos añadido funcionalidad de modo oscuro a estas plantillas en consonancia con la tendencia creciente del sector a proteger los ojos de los usuarios, conservar la vida de la batería y mejorar el diseño para el contraste.

Como somos buena gente, hemos eliminado parte del dolor de cabeza publicando en código abierto y mejorando una colección de plantillas de email HTML comunes para mensajes transaccionales. Puedes descargar las plantillas en un archivo .zip o verlas en GitHub.

Estos ejemplos de emails son gratuitos y de código abierto, así que siéntete libre de usarlos como desees. Si las utilizas, nos encantaría saber sobre ello:   envíanos un enlace a tu producto o servicio en Twitter o habla de ello en Hacker News.

Estas plantillas no son para el marketing por email, ya que el contenido puede variar mucho dependiendo de lo que estés enviando. Por ejemplo, una newsletter por email puede cambiar con cada nueva edición, mientras que los emails de marketing deben diseñarse en función de los objetivos individuales de la campaña y los segmentos de suscriptores. Así que ten en cuenta que estas plantillas son más adecuadas únicamente para los emails transaccionales (no para tu próxima campaña de marketing). 

Nuestra biblioteca de emails transaccionales incluye:

• Emails de acción p. ej., activación de la cuenta, restablecimientos de la contraseña, emails de bienvenida  
• Alertas por email p. ej., alerta de límite, alerta de problema  
• Emails de facturación p. ej., recibos mensuales, facturas, confirmaciones de pedido    

Estas plantillas de email HTML adaptativo ahora funcionan en modo oscuro y se han probado en todos los clientes de email populares. El código HTML de estas plantillas está disponible para copiar o descargar a través de GitHub.

Las plantillas de email HTML transaccionales son básicas para mejorar la experiencia del cliente y agilizar el funcionamiento de la empresa mediante la automatización. Entre los tipos más populares se encuentran las plantillas de email para facturas, que proporcionan detalles de las tarifas para servir de ayuda a la hora de garantizar que los clientes entiendan sus cargos y la actividad de la cuenta. Estas plantillas suelen integrarse a la perfección con varios sistemas de facturación y CRM, lo que permite realizar actualizaciones en tiempo real y una comunicación personalizada. Los emails de factura automatizados no solo ahorran tiempo, sino que también reducen el riesgo de error humano, contribuyendo a un flujo de trabajo más eficiente.

Las plantillas de confirmación de pedido son otro tipo vital, ya que ofrecen a los clientes la seguridad instantánea de que su compra se ha procesado. Las plantillas de notificación de envío mantienen a los clientes informados sobre el estado de sus entregas, añadiendo una capa de transparencia que mejora la confianza y la satisfacción. Las plantillas de email de restablecimiento de contraseña garantizan un proceso fluido y seguro para que los clientes recuperen el acceso a sus cuentas, algo fundamental para mantener una experiencia de usuario positiva. Cada una de estas plantillas puede personalizarse para reflejar la identidad de la marca, fomentando una impresión coherente y profesional que mejora significativamente la experiencia del cliente en general.

Esto nos lleva a un gran punto, los emails transaccionales son los héroes anónimos de la experiencia del cliente, y optimizarlos y personalizarlos con HTML no solo los hace más manejables y accesibles, sino que tienen un mayor impacto a la hora de generar confianza en la marca y comunidad con tus clientes.

Otros tipos populares de plantillas de email transaccionales incluyen:

• Email de confirmación de pago, recibo o factura: si alguien completa una compra o un pago, puede recibir un email confirmando la transacción que también incluye detalles importantes como el importe del pago, el número de factura, la fecha de facturación, el método de pago utilizado y un desglose de los cargos para su registro.
• Email de confirmación de cancelación: si un cliente cancela un pedido, una cita, una reserva o una suscripción, puede recibir un email de confirmación de la cancelación que describe lo que se ha cancelado, la fecha de entrada en vigor, cualquier detalle sobre el reembolso y los próximos pasos si desea reactivarla o hacer cambios.
• Email de notificación de renovación o caducidad de la suscripción: si alguien tiene una suscripción activa, podría recibir un email recordándole una próxima renovación o alertándole de que su suscripción está a punto de caducar. Este mensaje puede incluir la fecha de renovación, el coste, la información de facturación y las instrucciones para gestionar o cancelar su suscripción.

Email de alerta de seguridad: si se detecta una actividad sospechosa o inusual en la cuenta de un usuario, podría recibir un email notificándole dicha actividad. Esto podría incluir detalles sobre un nuevo acceso, un cambio de contraseña o un intento de pago, junto con orientación para asegurar su cuenta si la acción no fue autorizada.

Ya sea que crees tus plantillas desde cero o que aproveches nuestra biblioteca, ten en cuenta que las plantillas cortas y optimizadas funcionan mejor para los mensajes transaccionales. Crear y gestionar múltiples plantillas para tus necesidades es fácil con una API sólida y un editor de emails sencillo.

Nos dedicamos a proporcionarte información útil, herramientas y plantillas, pero también ofrecemos un gran servicio para tus emails y para los humanos que los envían. Echa un vistazo a nuestros servicios de correo transaccional para obtener más información sobre lo que hacemos.