El diseño de correo electrónico en 2026 es una disciplina peculiar. Estás diseñando para un medio que se renderiza de manera diferente en docenas de clientes de correo, en pantallas que van desde smartwatches hasta monitores ultrapanorámicos, tanto en modo claro como oscuro, con restricciones tecnológicas que harían llorar a cualquier desarrollador web. Y sin embargo, los correos que mejor funcionan son a menudo los más simples.
Este capítulo cubre los fundamentos técnicos que hacen que tus correos se muestren correctamente, carguen rápido y conviertan de manera confiable.
Diseño Mobile-First
Más del 60% de los correos se abren ahora en dispositivos móviles. Ese número ha ido creciendo de forma constante durante años y no va a retroceder. Más críticamente, el 64% de los usuarios móviles eliminará un correo que no se vea bien en su teléfono. Eso no es "no se ve perfecto". Eso es "no funciona".
Mobile-first significa diseñar primero para la pantalla más pequeña y luego escalar hacia arriba.
Los diseños de una sola columna son el enfoque más seguro y efectivo. Los diseños de múltiples columnas que se ven geniales en escritorio colapsan de manera impredecible en móvil, a menudo apilándose en el orden incorrecto o creando pesadillas de desplazamiento lateral. Una sola columna con texto, imágenes y botones del tamaño adecuado funciona en todas partes.
Mantén el ancho de tu correo entre 600 y 640 píxeles. Este es el estándar que funciona en el rango más amplio de clientes de correo. Más de 640 px y arriesgas desplazamiento horizontal en pantallas más pequeñas y en clientes de correo que añaden paneles laterales.
Los botones táctiles deben tener al menos 44x44 píxeles. Esta es la guía de interfaz humana de Apple para los objetivos mínimos de toque, y yo sugeriría ir un poco más grande, hasta 46x46 píxeles, para compensar los toques menos precisos. Nada acaba con el engagement de correo móvil más rápido que un botón demasiado pequeño para tocar con precisión.
Los tamaños de fuente deben ser de mínimo 13 px en iPhone. Cualquier cosa menor que 13 px en iOS activa el zoom automático, lo que rompe tu diseño. Usa 14-16 px para el texto del cuerpo y 20-22 px para los titulares. Más grande es casi siempre mejor en móvil.
Las líneas de asunto deben tener menos de 30 caracteres para visibilidad móvil. La mayoría de los clientes de correo móvil truncan las líneas de asunto entre 30 y 40 caracteres según el dispositivo y si se muestra el texto de vista previa. Pon las palabras importantes al principio.
Usa media queries para imágenes optimizadas para móvil. Sirve archivos de imagen más pequeños a dispositivos móviles, tanto para velocidad de carga como para uso de datos. Una imagen que carga en 1 segundo en wifi puede tardar 5 segundos en una conexión móvil deficiente, y tu lector no esperará.
El tamaño del archivo de imagen importa más de lo que la mayoría de los marketers se dan cuenta. Mantén las imágenes individuales por debajo de 200 KB y el peso total del correo por debajo de 800 KB. Comprime todas las imágenes antes de subirlas. Usa TinyPNG o Squoosh para compresión sin pérdida. Muchos ESP redimensionarán las imágenes sobre la marcha, pero no siempre las comprimen lo suficientemente agresivo.
Usa fuentes web-safe como tu pila principal. Las fuentes personalizadas en correos tienen soporte inconsistente. Arial, Helvetica, Georgia y Verdana se renderizan de manera confiable en todas partes. Puedes especificar una fuente web personalizada como tu primera opción y recurrir a una fuente web-safe para los clientes que no la soportan, pero sabe que la mayoría de tus lectores verán la fuente de respaldo. Diseña con la fuente de respaldo en mente, no con la fuente personalizada.
Previsualiza tu correo en dispositivos reales, no solo en tu navegador. Las vistas previas en el navegador de escritorio son engañosas. El correo que se ve perfecto en tu vista previa de Chrome puede tener texto superpuesto en un iPhone SE o imágenes recortadas en la aplicación de Gmail en Android. Usa Litmus, Email on Acid, o como mínimo envíate una prueba y compruébalo en tu teléfono antes de enviar.
Las pantallas Retina y de alta DPI requieren imágenes 2x. Si tu columna de correo tiene 600 px de ancho y usas una imagen de 600 px de ancho, se verá borrosa en pantallas retina (que es la mayoría de los teléfonos y laptops modernos). Exporta imágenes al doble del tamaño de visualización (1200 px para una columna de 600 px) y establece el ancho en HTML al tamaño de visualización. El archivo será más grande, así que la compresión se vuelve aún más importante.
Compatibilidad con Clientes de Correo
Esta es la incómoda verdad sobre el desarrollo de correos: todavía estás construyendo con tablas. En 2026. Mientras la web ha avanzado hacia CSS Grid y Flexbox, el correo permanece anclado a tablas HTML para el diseño.
¿Por qué? Porque Microsoft Outlook usa el motor de renderizado de Word (sí, el procesador de texto) para mostrar correos HTML. Y Outlook tiene suficiente cuota de mercado, particularmente en B2B, que no puedes ignorarlo. Las tablas se renderizan de manera consistente en el motor de Word. El CSS moderno no.
Usa CSS en línea. La mayoría de los clientes de correo eliminan las hojas de estilo externas y muchos eliminan los estilos del <head>. La única manera confiable de asegurarte de que tus estilos se apliquen es insertarlos en línea directamente en cada elemento. Todas las herramientas de construcción de correo serias manejan esto automáticamente durante la exportación.
El diseño responsivo usando media queries funciona en la mayoría de los clientes de correo modernos: Apple Mail, iOS Mail, la aplicación de Gmail, Outlook móvil, Yahoo. El cliente web de escritorio de Gmail técnicamente soporta media queries, pero debido a que el correo se muestra en una ventana de vista previa más pequeña en lugar del viewport completo, las consultas a menudo no se activan. Esto es igual para la mayoría de los clientes de webmail, aunque algunos usan iframes para mostrar el correo, en cuyo caso las media queries sí se activarán. Construir mobile-first ayuda aquí, porque esas media queries se activarán. Para mayor compatibilidad, el diseño híbrido es tu red de seguridad.
El diseño híbrido (también llamado diseño esponjoso) es tu alternativa. Usa diseños fluidos, anchos basados en porcentajes y comentarios condicionales para crear correos que se adapten al tamaño de pantalla sin depender de media queries. Se puede hacer con o sin tablas. Mark Robbins generalmente recomienda usar un div con una tabla fantasma, lo que evita muchos problemas en cadena que causan las tablas. El correo se ve bien en cualquier ancho porque la estructura subyacente es flexible por defecto.
Mark Robbins (ahora Developer Advocate para Email Experience en Customer.io) ha sido pionero en técnicas solo de CSS para correo que amplían lo posible sin JavaScript (que está bloqueado en todos los clientes de correo). Su trabajo en componentes interactivos solo de CSS, mejoras de accesibilidad y mejora progresiva ha avanzado considerablemente el campo. Si estás construyendo correos a nivel técnico, estudia su trabajo.
Diferencias comunes de renderizado en clientes de correo para probar:
Outlook de escritorio (2019/2021/365) usa el motor de renderizado de Word, lo que significa que no hay soporte para imágenes de fondo CSS, control de relleno limitado y espaciado de tabla impredecible. VML (Vector Markup Language) se ha recomendado tradicionalmente para imágenes de fondo en Outlook, pero Mark Robbins ha destacado que VML causa graves problemas de accesibilidad y recomienda evitarlo. Considera usar un color de fondo sólido alternativo para Outlook en su lugar.
Gmail web elimina todos los estilos del <head> si superan un cierto umbral de tamaño (aproximadamente 16 KB, aumentado desde el límite anterior de ~8.192 caracteres). Si tu CSS es complejo, algunos estilos serán silenciosamente eliminados. Y aunque Gmail técnicamente soporta media queries, el tamaño de la ventana de vista previa significa que raramente se activan en el cliente web, razón por la cual el diseño híbrido importa.
Apple Mail es el cliente de correo más compatible con los estándares y soporta casi todo, incluidas media queries, animaciones CSS y @supports. Es el cliente ideal para desarrollar, pero no dejes que te engañe haciéndote pensar que otros clientes se comportarán igual.
Yahoo Mail y AOL han mejorado significativamente en los últimos años pero aún tienen peculiaridades en el soporte de media queries y el manejo de márgenes. Siempre prueba.
Herramientas de Diseño de Correo
El ecosistema de herramientas para diseño de correo ha madurado significativamente. Esto es lo que recomendaría en 2026, desglosado por caso de uso.
| Herramienta | Tipo | Mejor Para | Característica Clave |
|---|---|---|---|
| Beefree (BEE) | Constructor sin código | Equipos de marketing | Arrastrar y soltar, módulos guardados |
| Stripo | Sin código + código | Equipos que necesitan AMP | AMP for Email, 1.400+ plantillas |
| Chamaileon | Colaborativo | Equipos empresariales | Gobernanza de marca, flujos de aprobación |
| Litmus | Pruebas + construcción | Equipos enfocados en QA | 90+ vistas previas de clientes de correo |
| Email on Acid | Pruebas | Equipos con presupuesto ajustado | Renderizado de cliente + pruebas de spam |
| MJML | Framework de código | Desarrolladores | Lenguaje de marcado de correo responsivo |
| Maizzle | Framework de código | Devs de Tailwind CSS | Tailwind para correo, pipeline de build |
| React Email | Framework de código | Desarrolladores de React | Basado en componentes, ecosistema npm |
| Parcel | IDE de código | Desarrolladores de correo | Vista previa en tiempo real, sugerencias de soporte CSS |
| Figma to Email | Flujo de trabajo | Equipos de diseño | Diseña en Figma, exporta a HTML |
Déjame desglosar estos con más contexto.
Constructores sin código para equipos de marketing:
Beefree (anteriormente BEE) es mi principal recomendación para equipos que necesitan construir correos rápidamente sin programar. La interfaz de arrastrar y soltar es genuinamente buena, y la función de módulos guardados te permite construir una biblioteca de componentes reutilizables. Stripo es la mejor opción si necesitas soporte de AMP for Email o quieres acceder a una biblioteca masiva de plantillas (1.400+ plantillas). Chamaileon está construido para equipos empresariales que necesitan gobernanza de marca y flujos de aprobación integrados en el proceso de creación de correos.
Plataformas de prueba:
Litmus sigue siendo el estándar de oro, ofreciendo vistas previas en más de 90 combinaciones de clientes de correo y dispositivos. No es barato, pero si estás enviando a una audiencia diversa (y probablemente lo estás), ver cómo se renderiza tu correo en Outlook 2019 en Windows vs Apple Mail en macOS vs Gmail en Android es esencial. Email on Acid ofrece vistas previas de renderizado similares más pruebas de spam a un precio más bajo. Para equipos con presupuesto ajustado, es una alternativa sólida.
Frameworks de código para desarrolladores:
MJML es un lenguaje de marcado que se compila a correo HTML responsivo. Escribes marcado limpio y semántico y MJML maneja la salida fea basada en tablas. Es el framework de desarrolladores más popular para correo. Maizzle lleva Tailwind CSS al desarrollo de correo, con un pipeline de build que maneja la inserción en línea, la eliminación del CSS no utilizado y la generación de HTML listo para producción. React Email te permite construir plantillas de correo usando componentes React dentro del ecosistema npm. Si tu equipo ya piensa en componentes, este es un ajuste natural. Parcel (no el empaquetador web, sino el IDE de correo) proporciona vista previa en tiempo real y sugerencias de soporte CSS mientras codificas.
Flujos de trabajo de diseño a código:
Los flujos de trabajo de Figma to Email son cada vez más comunes. Los equipos de diseño crean plantillas de correo en Figma usando bibliotecas de componentes, luego exportan a HTML a través de plugins o entregando los diseños a desarrolladores que los implementan en MJML o Maizzle.
Diseño de Correo Impulsado por IA
El panorama de herramientas de diseño cambió significativamente a principios de 2026, y el diseño impulsado por IA ya no es teórico. Esto es lo que es realmente utilizable hoy.
Figma MCP + Claude Code ("Code to Canvas") es el desarrollo más significativo. Anunciado en febrero de 2026, la integración MCP de Figma crea una conexión bidireccional entre archivos de diseño y herramientas de codificación con IA. Claude inspecciona los diseños de Figma semánticamente — entendiendo sistemas de diseño, jerarquías de componentes, tokens de espaciado e intención, no solo píxeles. Para correo, describe lo que quieres ("crea una sección héroe de correo que coincida con nuestro kit de marca con una imagen de ancho completo, titular, subtítulo y botón CTA") y obtén un diseño que respeta tu sistema de diseño de Figma existente. Combinado con MJML o React Email, este flujo de trabajo va de la propuesta de diseño a la plantilla de correo lista para producción en minutos en lugar de horas.
Paper.design es un lienzo de diseño habilitado para MCP con 24 herramientas que es nativo de HTML y CSS. A diferencia de Figma, que genera vectores que necesitan conversión, Paper trabaja en el medio que los correos realmente usan. Bidireccional con Claude Code y Cursor — los agentes de IA pueden inspeccionar tableros, modificar diseños, escribir HTML y actualizar estilos. Los tokens de diseño se sincronizan desde Figma, los datos reales de API pueblan las UIs, y la salida se convierte a React o Tailwind. Nivel gratuito (100 llamadas MCP por semana) y Pro ($20 por mes, 1M de llamadas por semana). Para diseñadores de correo que quieren diseño asistido por IA sin salir de un entorno nativo de HTML, Paper elimina un paso completo de conversión del flujo de trabajo.
Cursor para desarrollo de correo merece mención porque se ha convertido en el entorno de codificación con IA de facto, y las plantillas de correo son código. Los diseñadores que usan MJML o React Email pueden iterar 10 veces más rápido en Cursor que en un editor tradicional. Describe el cambio que quieres en lenguaje natural, Cursor escribe el código, tú previsualizas el resultado. Para equipos que han movido el desarrollo de correo al código (que, según la sección de frameworks anterior, es hacia donde van las cosas), Cursor colapsa el ciclo de retroalimentación entre "quiero esto" y "aquí está".
El flujo de trabajo de diseño desde Claude de Nitrosend te permite diseñar plantillas de correo completamente a través del lenguaje natural, ya sea a través del servidor MCP en Claude o a través del chat de IA integrado de Nitrosend. "Crea un escaparate de producto de dos columnas con nuestro logo en el encabezado, tres tarjetas de producto con imágenes y precios, y un botón CTA verde" produce una plantilla renderizada que puedes iterar de manera conversacional. Para fundadores en solitario y equipos pequeños sin recursos de diseño, esto elimina por completo el cuello de botella del diseño. Actualmente en beta cerrada.
Otras herramientas de diseño con IA que vale la pena observar:
Mailmodo ofrece creación de correo con IA de extremo a extremo — describe el correo que quieres y genera un correo interactivo completo con soporte AMP. EmailCanvasAI genera plantillas de correo a partir de indicaciones de texto. El Generador de Plantillas con IA de Mailjet crea diseños de punto de partida a partir de descripciones breves. Estas son herramientas en etapas más tempranas, pero señalan la dirección: el diseño de correo está pasando de "construirlo visualmente" a "describirlo conversacionalmente".
La recomendación práctica: Si tu equipo ya usa Figma, explora el flujo de trabajo Figma MCP + Claude Code para tu sistema de diseño. Si eres developer-first, Cursor con MJML o React Email es el camino más rápido hacia el desarrollo de correo asistido por IA. Si eres un equipo pequeño sin recursos de diseño o desarrollo dedicados, el enfoque de diseño con IA de Nitrosend o Mailmodo elimina el cuello de botella por completo. Y si quieres el mayor control sobre el diseño nativo HTML con asistencia de IA, Paper.design vale la pena evaluar.
Plantillas Sin Código vs Codificadas
Esta no es una decisión de uno u otro. Se trata de hacer coincidir el enfoque con el caso de uso.
Las herramientas sin código son entre 3 y 5 veces más rápidas para campañas únicas. Cuando necesitas construir un único correo promocional, un constructor de arrastrar y soltar te lleva allí en 30 minutos en lugar de 3 horas. Usa Beefree, Stripo o el constructor incorporado de tu ESP.
Las plantillas codificadas son mejores para flujos recurrentes, control de versiones y sistemas de diseño. Cuando estás construyendo una serie de bienvenida que se enviará a miles de suscriptores durante meses o años, invertir en una plantilla correctamente codificada se paga sola. Las plantillas codificadas pueden vivir en control de versiones (Git), ser revisadas en pull requests y actualizarse sistemáticamente a través de todo un flujo.
La mayoría de los programas de correo maduros usan ambos. Plantillas codificadas para flujos automatizados (bienvenida, carrito abandonado, post-compra) y herramientas sin código para campañas únicas (lanzamientos de productos, promociones estacionales, anuncios). Este enfoque híbrido te da consistencia donde importa y velocidad donde la necesitas.
Sistemas de Diseño de Plantillas de Correo
Si estás enviando más de un puñado de tipos de correo, necesitas un sistema de diseño. No una plantilla. Un sistema.
Los tokens de marca definen las constantes: tus colores primarios y secundarios, pila de fuentes, unidades de espaciado estándar (8 px, 16 px, 24 px, 32 px), radio de borde para botones y cualquier otra constante visual. Documéntalos una vez y referenciarlos en todas partes.
Una biblioteca de componentes contiene los bloques de construcción: encabezado (logo, navegación), sección héroe (imagen, titular, CTA), bloque de texto (encabezado, cuerpo, enlace), tarjeta de producto (imagen, título, precio, botón), botón CTA (primario, secundario, enlace de texto) y pie de página (enlaces sociales, texto legal, cancelar suscripción). Cada componente tiene un comportamiento responsivo definido, tratamiento de modo oscuro y requisitos de accesibilidad.
Las plantillas de diseño combinan componentes en tipos de correo estándar: correo promocional, boletín, notificación transaccional, correo de bienvenida, carrito abandonado. Estos son tus puntos de partida, no tus restricciones.
Las pautas de uso le dicen a tu equipo cuándo usar qué, cuánto texto incluir, qué componentes son obligatorios (pie de página, cancelar suscripción) versus opcionales, y cualquier regla de marca en torno a imágenes, tono o colocación de CTA.
Construir un sistema de diseño lleva tiempo por adelantado. Para una marca de comercio electrónico típica, espera entre 40 y 60 horas de trabajo de desarrollo inicial. Pero esa inversión se amortiza rápidamente. Una vez que el sistema está en su lugar, construir un nuevo correo pasa de 3 a 4 horas a 30 a 60 minutos. Y cada correo que envías está automáticamente acorde con la marca y es accesible.
Si eres un equipo más pequeño sin los recursos para un sistema de diseño completo, comienza con una única plantilla maestra bien construida que cubra tu tipo de correo más común (generalmente un correo promocional). Constrúyela correctamente una vez, con soporte de modo oscuro, características de accesibilidad y optimización móvil. Luego adáptala para cada envío. Eso no es un sistema de diseño, pero resuelve el 80% del problema.
Accesibilidad
Paul Airy ha sido la voz líder en accesibilidad de correo durante años, y su mensaje central vale la pena repetir: los correos accesibles no solo son lo correcto, funcionan mejor para todos.
Se estima que entre el 15 y el 20% de las personas tienen alguna forma de discapacidad. Eso incluye discapacidades visuales, discapacidades motoras, diferencias cognitivas y discapacidades situacionales (como leer un correo con una mano mientras se sostiene a un bebé). Diseñar para la accesibilidad significa diseñar para todos ellos, y en el proceso, también haces que el correo sea mejor para el otro 80%.
Requisitos WCAG 2.1 para correo:
El contraste de color debe cumplir una proporción de 4.5:1 para texto normal y 3:1 para texto grande. Usa una herramienta de verificación de contraste. Lo que se ve bien en tu monitor de alta gama puede ser ilegible en una pantalla más barata bajo la luz solar brillante.
Todas las imágenes deben tener texto alternativo descriptivo. No "image1.jpg" o "banner". Describe lo que muestra la imagen y lo que el lector necesita saber. Si la imagen es puramente decorativa, usa un atributo alt vacío (alt="") para que los lectores de pantalla lo omitan.
Mantén un orden de lectura lógico. Los lectores de pantalla siguen el orden del código fuente HTML, no el diseño visual. Asegúrate de que tu contenido tenga sentido cuando se lee linealmente, de arriba a abajo.
Incluye un atributo de idioma (lang="en") y un atributo de dirección (dir="ltr") en tu elemento HTML para que los lectores de pantalla usen el modelo de pronunciación correcto y la dirección del texto.
Los enlaces deben tener un propósito claro solo a partir de su texto. "Haz clic aquí" no tiene significado fuera de contexto. "Descargar el Informe de Referencia de Correo 2026" le dice al lector exactamente a dónde va el enlace.
No confíes solo en el color para transmitir información. Si un precio se muestra en rojo para indicar una oferta, también incluye texto que diga "Precio de oferta" o usa un tachado en el precio original.
Usa texto escalable. Nunca establezcas tamaños de fuente en píxeles que no puedan ser anulados por las preferencias del usuario.
Asegura la navegabilidad por teclado. Todos los elementos interactivos deben ser accesibles y operables mediante teclado.
En tablas de diseño, agrega role="presentation" para decirle a los lectores de pantalla que la tabla se usa para diseño, no para datos. Sin este atributo, los lectores de pantalla intentarán analizar tu diseño como una tabla de datos, creando una experiencia confusa.
Los objetivos táctiles de mínimo 44x44 px no son solo una práctica recomendada para móvil. Son un requisito de accesibilidad. Los usuarios con discapacidades motoras necesitan un tamaño de objetivo adecuado.
La accesibilidad no es una lista de verificación que completas una vez. Es una práctica que mantienes en cada correo. Agrega la revisión de accesibilidad a tu proceso de QA de correo. Antes de cada envío, verifica: ¿cada imagen tiene texto alternativo? ¿El orden de lectura es lógico? ¿Todos los botones y enlaces tienen tamaño y contraste suficientes? ¿Puedes entender el correo si entrecierras los ojos y solo puedes leer los encabezados y el texto de los enlaces? Si la respuesta a alguna de estas preguntas es no, corrígelo antes de enviar.
Las pruebas con lector de pantalla son el estándar de oro. Si quieres entender verdaderamente qué tan accesibles son tus correos, pruébalos con un lector de pantalla real. VoiceOver en Mac e iOS, NVDA en Windows y TalkBack en Android son todos gratuitos. Escuchar tu correo leído en voz alta por un lector de pantalla revelará problemas que la inspección visual nunca descubrirá. Apunta a hacer esto al menos una vez por trimestre en tus plantillas más utilizadas.
Modo Oscuro
Al menos el 33% de los destinatarios de correo ven los correos en modo oscuro, y ese porcentaje está creciendo. El modo oscuro puede causar estragos en los diseños de correo que no fueron construidos para manejarlo.
Los clientes de correo manejan el modo oscuro de manera diferente. Algunos invierten colores. Algunos intercambian fondos. Algunos hacen ambas cosas. El resultado puede ser texto negro sobre fondo negro (invisible), enlaces azul oscuro sobre fondo gris oscuro (casi invisible) o logos con fondos blancos que ahora tienen un perturbador rectángulo blanco a su alrededor.
Prueba tus correos en modo oscuro en Apple Mail, Gmail y Outlook. Estos tres manejan el modo oscuro de manera diferente y juntos cubren la mayoría de los usuarios de modo oscuro.
Usa PNGs transparentes para los logos. Un logo con fondo blanco en un correo blanco se ve bien. Ese mismo logo en modo oscuro obtiene un rectángulo blanco a su alrededor. Los fondos transparentes resuelven esto.
Evita los fondos completamente blancos. Usa blanco apagado (#F5F5F5 o similar) para el fondo del cuerpo de tu correo. En modo oscuro, el blanco puro (#FFFFFF) puede crear un destello cegador. El blanco apagado se adapta más graciosamente y es más fácil para los ojos en ambos modos.
Usa la media query CSS @media (prefers-color-scheme: dark) donde sea compatible para proporcionar estilos explícitos de modo oscuro. Esto te da control sobre cómo aparece tu correo en modo oscuro en lugar de dejar que el cliente de correo adivine. El soporte es bueno en Apple Mail y Outlook. Gmail lo ignora y aplica sus propias transformaciones de modo oscuro.
Consejos prácticos de diseño para modo oscuro:
Usa un borde o sombra sutil alrededor de las imágenes con fondos blancos o claros para que no floten en modo oscuro. Agrega un borde delgado de 1 px en el color de tu marca alrededor de los logos como medida de seguridad.
Para los colores del texto, evita el texto negro puro (#000000) en modo claro. Usa gris oscuro (#333333 o #222222) en su lugar. En modo oscuro, los clientes de correo a menudo invierten el negro puro a blanco puro, lo que puede verse duro. El texto ligeramente no negro se invierte a ligeramente no blanco, que es más fácil de leer.
Prueba tus botones CTA en ambos modos. Un botón muy visible sobre un fondo blanco puede desaparecer sobre un fondo oscuro. Considera agregar un borde a tus botones para que permanezcan visibles independientemente del color de fondo.
Si estás usando colores de fondo en secciones de contenido (como un cuadro de consejo destacado o un banner de color), esos colores pueden ser cambiados o eliminados en modo oscuro. Siempre asegúrate de que tu contenido sea legible incluso si el color de fondo vuelve al fondo oscuro predeterminado del cliente de correo.
Correo Interactivo
Los elementos interactivos en el correo pueden aumentar significativamente el engagement. Las tasas de clic-apertura aumentan en un promedio del 31,7% cuando se incluyen elementos interactivos.
Pero la interactividad en el correo viene con una advertencia crítica: el soporte varía enormemente entre los clientes de correo. Siempre construye con la mejora progresiva en mente, un concepto que Jason Rodriguez ha defendido. Tu elemento interactivo es un bono para los clientes que lo soportan. El fallback para los clientes que no lo hacen aún debe ser un correo completamente funcional y de buen aspecto.
Los efectos hover de CSS tienen amplio soporte y ofrecen un incremento del 5 al 10% en engagement. Cosas simples como cambios de color del botón al hover, superposiciones de imagen o animaciones de subrayado. Son adiciones de bajo riesgo y alta recompensa.
Los acordeones con CSS tienen soporte moderado y pueden ofrecer un incremento del 10 al 15%. Funcionan bien para correos con mucho contenido como boletines o comparaciones de productos, permitiendo al lector expandir solo las secciones que le interesan. No funcionan en Gmail web ni en Outlook, así que tu fallback debe mostrar todo el contenido expandido.
Los GIFs animados tienen soporte universal y ofrecen entre 5 y 8% más de engagement. Cada cliente de correo soporta GIFs (con la excepción de algunas versiones de escritorio de Outlook, que muestran solo el primer fotograma). Son el elemento interactivo más seguro que puedes usar. Las demostraciones de productos, las animaciones sutiles y el interés visual funcionan bien.
AMP for Email ofrece la interactividad más poderosa con un incremento de engagement del 20 al 30%, permitiendo carruseles, formularios, menús acordeón e incluso contenido en vivo dentro del correo. Pero el soporte está limitado a Gmail y Yahoo, requiere registro de remitente de Google, y la adopción sigue siendo baja. Si tu audiencia está principalmente en Gmail y tienes recursos de desarrollo, AMP puede ser poderoso. Para la mayoría de los remitentes, no vale la inversión todavía.
Los temporizadores de cuenta regresiva son un elemento interactivo común para correos de oferta y ofertas por tiempo limitado. Se generan del lado del servidor como GIFs animados que muestran una cuenta regresiva en vivo. Servicios como Sendtric y Mailmodo ofrecen generadores de temporizadores de cuenta regresiva gratuitos y de pago. Funcionan en prácticamente todos los clientes de correo. La advertencia importante: solo usa temporizadores de cuenta regresiva reales para plazos reales. Un temporizador que cuenta regresiva hacia una oferta que luego se extiende silenciosamente entrena a los suscriptores a ignorar tu urgencia.
Las encuestas y votaciones integradas pueden aumentar el engagement significativamente porque convierten el correo de una difusión en una conversación. Herramientas como Typeform y SurveyMonkey generan encuestas de una pregunta que se pueden incrustar y funcionan en la mayoría de los clientes de correo. Para los clientes que no soportan la versión incrustada, el fallback es un enlace a la encuesta. Incluso una sola encuesta de pregunta en un boletín puede aumentar las tasas de clics entre un 15 y un 20%.
La regla de oro del correo interactivo: siempre construye el fallback primero. Diseña tu correo como si ningún elemento interactivo fuera a funcionar. Luego añade interactividad encima para los clientes que lo soportan. De esta manera, cada suscriptor recibe un correo funcional, y los que tienen clientes de correo modernos reciben algo extra.