El diseño de emails sigue siendo una de las disciplinas más traicioneras del marketing digital. Un mensaje que se ve impecable en el cliente de correo donde lo creaste puede aparecer roto, con imágenes desaparecidas o con la tipografía cambiada en la bandeja de entrada de quien lo recibe. Eso ocurre porque el email no funciona como una página web normal: cada cliente de correo (Gmail, Outlook, Apple Mail, Yahoo) interpreta el código a su manera, y esas diferencias pueden arruinar semanas de trabajo en décimas de segundo.
Por qué el email es el canal más difícil de estandarizar
A diferencia de un navegador web, donde los estándares de HTML y CSS están bastante alineados, los clientes de correo llevan décadas sin ponerse de acuerdo. Outlook, por ejemplo, sigue usando el motor de renderizado de Microsoft Word para mostrar los mensajes, lo que significa que ciertas propiedades de CSS moderno simplemente no existen para él. Gmail, por su parte, aplica filtros agresivos sobre los estilos en línea y tiene un comportamiento diferente dependiendo de si accedes desde la app móvil, la versión web o un cliente externo.
A esto se añade que más del 40% de los emails se abren en dispositivos móviles, según datos recurrentes de Litmus y Mailchimp. Diseñar solo para escritorio ya no es una opción desde hace años. Pero diseñar para móvil sin pensar en escritorio tampoco funciona. El reto está en construir una plantilla que funcione en ambos contextos sin depender de trucos que luego se rompan en un entorno inesperado.
La estructura que aguanta en todos los clientes
La base de cualquier plantilla robusta sigue siendo la tabla HTML. Puede sonar anticuado, y lo es, pero es el único elemento que los clientes de correo interpretan de forma consistente. Usar div y propiedades como flexbox o grid en un email es buscar problemas: en Outlook se van a ignorar sin aviso.
El esquema más fiable parte de una tabla exterior que limita el ancho máximo del contenido (generalmente entre 580 y 600 píxeles), con una celda central que actúa como contenedor. Dentro de esa celda se encajan los módulos: cabecera, cuerpo, llamadas a la acción y pie. Cada módulo es independiente, lo que facilita reordenarlos o reutilizarlos en distintas campañas.
Los estilos van siempre en línea, dentro del atributo style de cada elemento. Las hojas de estilo externas y gran parte del CSS dentro de <head> se eliminan en muchos clientes. Lo que no está en el propio elemento, en muchos casos, no llega al destinatario.
Tipografía e imágenes en el diseño de emails
Las tipografías web que cargas con @font-face o desde Google Fonts funcionan en Apple Mail y en algunos clientes más, pero Outlook y Gmail las ignoran. La solución habitual es declarar siempre una fuente de sistema como alternativa: Georgia para serifas, Arial o Helvetica para san-serif. Así, si la fuente principal no carga, el email no se rompe visualmente, simplemente usa la alternativa. En el artículo sobre cómo elegir tipografías sin dañar la velocidad hay criterios útiles que también aplican al contexto del email.
Con las imágenes el problema más habitual es el bloqueo por defecto. Outlook y muchos clientes corporativos bloquean las imágenes hasta que el usuario las activa manualmente. Por eso el email tiene que poder leerse y entenderse sin imágenes: el texto alternativo (alt) debe describir la imagen con precisión, no limitarse a un guion o dejarse vacío. Y los botones de llamada a la acción nunca deben ser solo una imagen: si se bloquean, desaparece el punto de conversión del mensaje.
El peso de las imágenes también importa. Algunos servidores de correo rechazan o recortan mensajes que superan ciertos límites de tamaño. Gmail, en concreto, oculta el contenido de los emails que superan los 102 KB en su versión HTML. Mantener el código limpio y las imágenes optimizadas no es una opción estética, es una necesidad técnica.
Cómo adaptar el diseño a dispositivos móviles
El enfoque más extendido para hacer emails responsivos es el diseño de una sola columna, que funciona bien en pantallas pequeñas sin necesidad de transformaciones complejas. Cuando el diseño de escritorio tiene dos columnas, lo habitual es que en móvil pasen a apilarse verticalmente. Esto se consigue con media queries en los clientes que las soportan (Apple Mail, Gmail app en iOS, la mayoría de aplicaciones modernas) y con el truco del «fluid hybrid» o diseño fluido para los que no las soportan.
El método fluid hybrid consiste en usar celdas de tabla con anchos en porcentaje en lugar de píxeles fijos. En pantallas pequeñas, las columnas se estrechan de forma proporcional. No es tan preciso como las media queries, pero garantiza que el email no se rompa en clientes que las ignoran. Muchos equipos combinan ambas técnicas: fluid hybrid como base y media queries para ajustes específicos donde sí funcionan.
El tamaño mínimo de los textos en móvil debería ser de 14 píxeles para el cuerpo y 22 píxeles para los titulares. Los botones necesitan al menos 44 píxeles de alto para ser fáciles de pulsar con el pulgar. Son criterios de usabilidad que influyen directamente en los clics que genera el mensaje.
Herramientas para crear y probar plantillas
Construir una plantilla desde cero en HTML es posible, pero requiere mucho tiempo de prueba y error. La mayoría de equipos trabaja con editores visuales que generan el código optimizado automáticamente. Algunos de los más usados son Stripo, BeeFree y el editor nativo de plataformas como Mailchimp o ActiveCampaign. Estos editores tienen la ventaja de que ya resuelven muchos de los problemas de compatibilidad en su código de salida.
Aun así, el paso más importante es la prueba antes del envío. Litmus y Email on Acid son las dos herramientas de referencia para previsualizar un email en más de ochenta clientes y dispositivos distintos de forma simultánea. Detectan problemas de renderizado, texto cortado, imágenes rotas y errores de código antes de que lleguen a la bandeja de entrada de nadie. El coste tiene sentido cuando una campaña va a miles de contactos.
Para proyectos con menos presupuesto, Mailchimp incluye una vista previa básica en móvil y escritorio dentro de su propio editor. No cubre todos los clientes, pero filtra los problemas más habituales. También es posible enviar pruebas manuales a cuentas en Gmail, Outlook.com y Apple Mail para cubrir los tres motores más representativos del mercado.
Si trabajas con Canva o con herramientas visuales para otras piezas de comunicación, conviene saber que esos diseños necesitan adaptación antes de volcarlos en un email. Lo que funciona en una pieza para redes sociales o en una creatividad para anuncios no se traslada directamente al entorno del correo. Puedes ver las diferencias de enfoque en el artículo sobre diseño de creatividades para publicidad digital.
Coherencia visual con el resto de la marca
El email no debería verse como un elemento separado de la identidad visual de la empresa. Los colores, la tipografía y el tono tienen que ser coherentes con lo que el usuario ve en la web, en las redes y en cualquier otro punto de contacto. Cuando hay un manual de identidad visual definido, trasladar esas reglas a una plantilla de email es mucho más sencillo y evita inconsistencias entre campañas.
La cabecera del email es el primer elemento que el usuario ve. Lo habitual es incluir el logotipo de la marca con un enlace al sitio web, sobre un fondo que corresponda a los colores corporativos. El pie, por normativa legal en España y en la UE, debe incluir los datos de la empresa, el motivo por el que el destinatario recibe el correo y un enlace para darse de baja. Este último no es opcional: la normativa RGPD y la Ley de Servicios de la Sociedad de la Información lo exigen.
La elección del color en los botones de llamada a la acción tiene más impacto del que parece. Un botón que contraste claramente con el fondo genera más clics que uno que se mimetiza con el diseño general. No se trata de usar colores llamativos por defecto, sino de que el elemento más importante del email sea visualmente el más destacado.
Errores frecuentes que arruinan campañas enteras
El más habitual es no probar en Outlook antes de enviar. Outlook sigue concentrando una parte significativa del uso en entornos corporativos, especialmente en España y en Europa. Un diseño que en Gmail parece perfecto puede aparecer con tablas descuadradas, márgenes descontrolados o botones sin estilo en cualquier versión de Outlook de los últimos diez años.
Otro error recurrente es construir el email como una imagen única. Algunos diseñadores toman el camino corto de exportar toda la pieza como un JPG o PNG para evitar los problemas de HTML. El resultado es que los clientes que bloquean imágenes ven un email completamente en blanco, el texto no es indexable, los filtros de spam lo penalizan y el accesibilidad es nula para usuarios con lectores de pantalla.
El texto del preencabezado (preheader) también se suele ignorar. Es la línea de texto que aparece junto al asunto en la bandeja de entrada, antes de abrir el mensaje. Si no se define explícitamente, el cliente de correo toma el primer texto que encuentra en el código, que puede ser el texto de un enlace de desuscripción o cualquier otra cosa. Ese preheader es espacio publicitario gratuito que muchas campañas desperdician.
Plantillas que puedes reutilizar sin empezar desde cero
Construir una buena plantilla base lleva tiempo, pero se amortiza en todas las campañas siguientes. Lo más eficiente es tener dos o tres plantillas maestras: una para newsletters informativas, otra para promociones con oferta directa y otra para correos transaccionales (confirmaciones de pedido, recuperación de contraseña, bienvenida). Cada una responde a una estructura y un objetivo distintos.
GitHub tiene repositorios públicos con plantillas de email en HTML que ya están probadas en los principales clientes. Email Foundation de Zurb, Cerberus y la colección de Really Good Emails son puntos de partida habituales para equipos que prefieren trabajar directamente con código. Permiten modificar colores, tipografías y contenido sin tocar la estructura que garantiza la compatibilidad.
Para quienes trabajan con equipos sin perfil técnico, los editores de arrastrar y soltar de plataformas como Klaviyo o Sendinblue ofrecen plantillas predefinidas que ya resuelven la mayor parte de los problemas de renderizado. La limitación es la personalización, pero para la mayoría de las campañas habituales son suficientes. Si tu equipo ya usa herramientas de diseño visual como Canva, algunas plataformas permiten importar los elementos gráficos directamente.
El siguiente paso después de diseñar la plantilla
Una vez que tienes la plantilla funcionando en todos los clientes principales, el trabajo no termina ahí. La estructura visual puede ser perfecta, pero si la landing page a la que apunta el email no está bien construida, la conversión cae igual. Revisar que la página de destino sigue la misma lógica visual que el email, mantiene la coherencia del mensaje y está optimizada para convertir es el paso que muchas campañas se saltan, y que explica por qué el clic no se convierte en resultado.
Guarda siempre una versión documentada de cada plantilla que funciona: el código HTML limpio, las especificaciones de color en hexadecimal, los tamaños de imagen exactos y los clientes en los que se probó. Esa documentación es la que permite que otro miembro del equipo retome el trabajo meses después sin tener que volver a descubrir por qué cierto truco de CSS está ahí.
Preguntas frecuentes
¿Por qué mi email se ve bien en Gmail pero aparece roto en Outlook?
Outlook utiliza el motor de renderizado de Microsoft Word para mostrar los correos, lo que significa que ignora muchas propiedades de CSS moderno que Gmail sí interpreta. Elementos como flexbox, grid o ciertos márgenes sencillamente no existen para Outlook. La solución es construir la estructura del email con tablas HTML y aplicar todos los estilos en línea, dentro del atributo style de cada elemento, en lugar de usar hojas de estilo separadas.
¿Es seguro usar imágenes como base del diseño para evitar problemas de compatibilidad?
No, exportar el email completo como una imagen JPG o PNG es uno de los errores más habituales y más costosos. Los clientes de correo que bloquean imágenes por defecto, como Outlook en entornos corporativos, mostrarán un mensaje completamente en blanco. Además, los filtros de spam penalizan los emails con poco texto y mucha imagen, y los usuarios con lectores de pantalla no podrán acceder al contenido en absoluto.
¿Cómo hago para que mi email se vea bien tanto en móvil como en escritorio?
El enfoque más fiable es combinar el diseño fluid hybrid con media queries. El método fluid hybrid usa anchos en porcentaje en las celdas de tabla, lo que permite que las columnas se adapten de forma proporcional en pantallas pequeñas incluso en clientes que no soportan media queries. Para los clientes más modernos, las media queries permiten ajustes más precisos como apilar columnas verticalmente o aumentar el tamaño de los botones. Como referencia práctica, los textos del cuerpo deben tener al menos 14 píxeles en móvil y los botones al menos 44 píxeles de alto.
¿Qué es el preheader y por qué dicen que es tan importante configurarlo bien?
El preheader es la línea de texto que aparece junto al asunto del correo en la bandeja de entrada, antes de que el destinatario abra el mensaje. Si no se define de forma explícita en el código, el cliente de correo toma automáticamente el primer texto que encuentra, que puede ser el enlace de desuscripción o cualquier elemento técnico del pie. Configurarlo correctamente permite añadir un argumento adicional para que el destinatario abra el email, y es espacio de visibilidad gratuito que la mayoría de campañas desaprovecha.
¿Qué herramientas puedo usar para probar el email antes de enviarlo si no tengo mucho presupuesto?
La opción más completa son Litmus y Email on Acid, que permiten previsualizar el email en más de ochenta clientes distintos de forma simultánea, aunque tienen un coste mensual. Para proyectos con presupuesto limitado, Mailchimp incluye una vista previa básica en móvil y escritorio dentro de su editor sin coste adicional. Una alternativa práctica y gratuita es enviarse pruebas manuales a cuentas propias en Gmail, Outlook.com y Apple Mail, que cubren los tres motores de renderizado más representativos del mercado.
