Mejores prácticas de diseño de emails: la guía completa (2026)

Cuando los especialistas en email marketing hablan de campañas de email visualmente atractivas, no todos se refieren a lo mismo. Algunos se enfocan en la estructura del correo, mientras que otros priorizan el contenido visual y los GIF animados. También es común escuchar que el mejor diseño de email es aquel que se visualiza correctamente en todos los clientes de correo y dispositivos, además de generar conversiones. Debido a esta variedad de factores, quienes comienzan en email marketing suelen preguntarse qué es realmente importante en el diseño de emails.

En este artículo profundizaremos en las mejores prácticas de diseño de emails y compartiremos recomendaciones sobre asuntos, botones de call-to-action (CTA), adaptación móvil, fuentes web-safe y otras técnicas efectivas para hacer tus campañas más atractivas y aumentar las conversiones.

Puntos clave

1. El diseño de emails va mucho más allá de crear correos atractivos: impacta todo el proceso de comunicación, desde si el email llega al destinatario y se abre, hasta si genera la acción deseada.
2. El asunto y el preencabezado determinan si el destinatario abrirá el email y verá tu propuesta.
3. Utilizar un único call to action (CTA) principal dentro del email ayuda al destinatario a enfocarse en una sola acción de conversión.
4. Una plantilla maestra y una biblioteca modular de bloques son la base de la consistencia de marca, ya que reducen el tiempo de producción y evitan desviaciones del estilo visual.
5. El diseño de emails optimizado para móviles es esencial: garantiza mejores tasas de clic y una mejor experiencia para los suscriptores, especialmente ahora que más de la mitad de los emails se abren desde teléfonos móviles.
6. La personalización en email marketing debe ir más allá del nombre del usuario e incorporar segmentación basada en comportamiento y bloques de contenido dinámico.
7. Cumplir con estándares de accesibilidad como las pautas WCAG AA para contraste, textos alternativos descriptivos y estructuras lógicas de encabezados beneficia a todos los usuarios, no solo a quienes utilizan tecnologías de asistencia.

Qué es el diseño de emails y por qué importa

El diseño de emails es la práctica de organizar copy, elementos visuales e interacciones dentro de un correo para que los suscriptores puedan leerlo, escanearlo y actuar sobre él desde cualquier dispositivo y bandeja de entrada. Incluye aspectos como layout, tipografía, color, imágenes, ubicación de CTA, accesibilidad y renderizado entre distintos clientes de correo.

El impacto en cifras

El email sigue liderando las métricas de ROI en marketing. Según el benchmark de ROI 2026 de Omnisend, el email marketing genera entre $36 y $42 dólares por cada dólar invertido en distintas industrias, con los mayores retornos en retail y eCommerce. Por su parte, el informe State of Email 2025 de Litmus, publicado por Validity en junio de 2025, aporta otra perspectiva: las empresas que destinan más del 15% de su presupuesto de marketing al email tienen el doble de probabilidades de superar tasas de apertura del 40% en comparación con el promedio.

Algunos datos adicionales importantes para planificar el diseño de tus campañas de email:

• la tasa mediana global de apertura alcanzó el 43.46% en 2025, frente al 42.35% registrado en 2024. La tasa mediana de clics fue de 2.09%, mientras que la tasa click-to-open llegó a 6.81%. La función Mail Privacy Protection de Apple infla las aperturas, por lo que conviene analizarlas junto con clics y conversiones para medir el engagement real;
• en eCommerce, el 93% de las órdenes se atribuyen a campañas enviadas manualmente y no a flujos automatizados, aunque los emails automatizados alcanzan un promedio de 47.82% de apertura y 16.88% de clics, lo que convierte la automatización en un canal clave de nutrición junto con las campañas masivas;
• el diseño responsive puede generar hasta un 15% más de clics en comparación con plantillas no optimizadas. Con el 55% de los emails abiertos desde dispositivos móviles, el responsive design pasó de ser una ventaja competitiva a un requisito básico;
• el contenido dinámico en emails puede aumentar los ingresos hasta en un 22%, mientras que los emails segmentados para eCommerce registran tasas de clic un 267.21% más altas que las campañas no segmentadas;
• los emails personalizados generan tasas de transacción 6 veces superiores, y las marcas que destacan en personalización obtienen un 17% más de ingresos por email que el promedio de marketers.

Cómo el diseño de emails se diferencia del diseño web

Los diseñadores web trabajan con navegadores modernos, JavaScript y CSS Grid. Los diseñadores de emails trabajan con clientes de correo, muchos de los cuales todavía eliminan JavaScript, ignoran CSS moderno y muestran el mismo código de manera distinta en Gmail, Outlook y Apple Mail.

Quizás por eso el diseño de plantillas de email ha evolucionado más lentamente, apoyándose en una gran variedad de herramientas de producción y en pruebas constantes de nuevos elementos. Esta es también la principal razón por la que muchas innovaciones aplicadas al sitio web de una marca no pueden implementarse inmediatamente en emails.

Qué encontrarás en esta guía

En esta guía compartimos 17 secciones estructuradas para que puedas leerlas de principio a fin y construir una visión completa, o ir directamente al tema que necesites. Cada sección incluye mejores prácticas de diseño de emails, la razón detrás de ellas y ejemplos reales de cómo se aplican en producción.

Fundamentos del diseño de emails: Layout y jerarquía visual

Antes de elegir fuentes o colores, hay dos decisiones fundamentales: cómo estará organizado el layout del email y cómo se moverá la mirada del lector a través del contenido. Ambas determinan si el suscriptor seguirá leyendo después del primer scroll.

Los tres tipos de layout y cuándo utilizar cada uno

Según la forma en que se organiza el email, existen tres tipos principales:

1. El layout de una sola columna es el estándar para la mayoría de los emails de marketing. Funciona en dispositivos móviles sin necesidad de ajustes y mantiene un renderizado consistente entre clientes de correo. Es ideal para newsletters, secuencias de bienvenida, campañas promocionales y la mayoría de emails transaccionales.
2. El layout híbrido (una sola columna en móvil y múltiples columnas en desktop) se construye mediante media queries que colapsan las columnas en resoluciones pequeñas. Es útil para comparaciones lado a lado, como características de productos o planes, que deben seguir siendo legibles en pantallas reducidas.
3. El layout modular consiste en una pila de bloques de contenido independientes que pueden reorganizarse en cada envío. Es especialmente útil para newsletters donde diferentes segmentos reciben distintos tipos de contenido.

Diseñando el flujo de lectura: patrón F, patrón Z y triángulo invertido

Diseñar el flujo de lectura significa alinear el layout del email con los hábitos naturales de seguimiento visual para dirigir la atención del lector.

Las investigaciones de eye-tracking muestran de forma consistente tres patrones principales de lectura:

1. Patrón F: Recorrido horizontal en la parte superior, seguido de una segunda lectura horizontal más corta unas líneas más abajo y luego un desplazamiento vertical por el lado izquierdo. Se utiliza principalmente en newsletters con mucho texto, donde los lectores escanean rápidamente el contenido.
   
   

   
   (Fuente: Email Love)

2. Patrón Z: Recorrido diagonal desde la esquina superior izquierda hacia la superior derecha, luego hacia abajo a la izquierda y finalmente hasta la esquina inferior derecha. Funciona muy bien en emails promocionales breves con un hero principal, un bloque de apoyo y un único CTA.
   
   

   
   (Fuente: Email Love)

3. Triángulo invertido: Parte superior amplia y llamativa (headline + hero image), una sección media más estrecha enfocada en beneficios y un único punto focal al final (CTA). Es ideal cuando se busca dirigir toda la atención hacia un solo clic.
   
   

   
   (Fuente: Email Love)

Elige el patrón antes de definir los elementos visuales. Las decisiones de layout tomadas únicamente a partir de una idea visual rara vez funcionan bien en pruebas A/B.

White space como herramienta de diseño, no como espacio vacío

Los emails saturados suelen percibirse como baratos, mientras que un espaciado generoso transmite una sensación más premium. El white space cumple tres funciones al mismo tiempo: separar elementos para dar descanso visual, señalar jerarquías mediante proximidad y dejar suficiente espacio para la interacción táctil en dispositivos móviles.

Como punto de partida, se recomienda utilizar entre 20 y 30 px entre bloques de contenido, entre 12 y 16 px entre párrafos y al menos 24 px alrededor de los botones.

Carga cognitiva: Cómo reducirla en cada email

Cada elemento adicional consume una fracción de segundo de atención del lector. Estas tres tácticas ayudan a mantener baja la carga cognitiva:

• una sola tarea por email. Promociona una sola cosa. Recomienda una sola acción. Si necesitas promocionar cinco cosas distintas, envía cinco emails;
• estructura predecible. Utiliza siempre el mismo patrón de layout para el mismo tipo de email, de modo que los suscriptores no tengan que reaprender la estructura en cada envío;
• agrupación visual. Reúne la información relacionada usando fondos compartidos, bordes o espaciado consistente. No obligues al lector a organizar mentalmente la información por sí mismo.

Cómo construir el encabezado del email

Un buen encabezado cumple dos funciones: identificar al remitente y ofrecer una vía rápida para acceder al sitio web completo o a la versión web del email. Mantén un diseño limpio y minimalista para evitar que ocupe demasiado espacio antes del hero principal.

Tu encabezado debería incluir:

• nombre y logo de la empresa: ayudan a que el suscriptor identifique rápidamente al remitente y diferencie tus emails de los de la competencia;
• menú de navegación: enlaza las secciones principales del sitio, promociones actuales o localizador de tiendas. Lo ideal es limitarlo a 3-5 elementos para no saturar el layout;
• enlace “Abrir en Navegador”: no todos los clientes de correo renderizan correctamente elementos interactivos o GIFs, por lo que conviene ofrecer una versión web completa;
• enlace de Cancelar suscripción: normalmente se ubica en el pie de página, aunque algunas marcas también lo incluyen en el encabezado. Cualquiera de las dos opciones funciona siempre que sea visible y accesible con un solo clic.

(Fuente: Email de Pandora)

El pie de página del email: estructura y cumplimiento normative

El pie de página es el cierre del email, pero sigue siendo una oportunidad para reforzar la marca e interactuar con los suscriptores. Utilízalo para incluir iconos de redes sociales, enlaces importantes, datos de contacto y el enlace de cancelar suscripción.

Para cumplir con CAN-SPAM en Estados Unidos y GDPR en Europa, el pie de página debe incluir:

• un enlace o botón de Cancelar suscripción funcional en un solo clic;
• la razón por la que el destinatario recibió el email (por ejemplo: “Te registraste en example.com”);
• una dirección física de la empresa remitente.

(Fuente: Email de Stripo)

Asunto y preencabezado: la primera decisión de diseño

La mayoría de artículos tratan los asuntos como copywriting, pero también forman parte del diseño, porque determinan si el resto del diseño del email de marketing llegará siquiera a ser visto. Los estudios muestran que el 47% de los destinatarios decide abrir un email únicamente por el asunto. Además, el 69% envía ofertas directamente a spam cuando los asuntos parecen demasiado comerciales.

Límites de caracteres según el cliente de correo (Gmail, Apple Mail, Outlook)

Ten en cuenta que la longitud del subject line no es solo una cuestión estética: también influye directamente en que el usuario se interese por el email y decida abrirlo. La cantidad de caracteres visibles varía ligeramente entre clientes de correo.

 

Diseña pensando primero en la vista más corta (Gmail móvil, ~30-40 caracteres) y permite que los clientes con más espacio muestren contenido adicional. Los asuntos con mejor rendimiento tienen un promedio de 43.85 caracteres.

Fórmulas de asunto que aumentan aperturas

Existen innumerables fórmulas de copywriting para escribir asuntos y headlines. Sin embargo, solo las pruebas permitirán descubrir cuáles funcionan mejor para tu negocio y audiencia.

Estas son cinco de las fórmulas más utilizadas y que suelen superar consistentemente a los asuntos genéricos:

1. Curiosidad: "Lo que aprendimos al enviar 1.8M de emails en Q4”.
2. Beneficio específico: “Reduce el tiempo de producción de emails en 3.7×”.
3. Pregunta: “¿Tu renderizado en modo oscuro se rompe en Outlook?”.
4. Basado en números: “12 ejemplos de diseño de emails que vale la pena replicar”.
5. Personalizado: “{Nombre}, tu reporte mensual está listo”.

Cómo escribir el preencabezado como un segundo asunto

Un preencabezado atractivo es el último punto de decisión entre un email abierto y uno ignorado. Normalmente, los preencabezados funcionan como una continuación del asunto; es decir, una nueva oportunidad para despertar curiosidad o generar una emoción en tu audiencia. ¿Por qué importa? Porque los preencabezados personalizados elevan la tasa de apertura hasta 44.67%, frente al 39.28% de los emails que no los utilizan.

Algunas reglas básicas:

• no repitas el asunto; utiliza el preencabezado para añadir contexto o detalle, no para duplicar el mensaje;
  
  
• no permitas que el preencabezado tome automáticamente la primera línea del email (“Ver en el navegador…”);
• utiliza un Preencabezado oculto cuando quieras que los suscriptores vean un mensaje en la bandeja de entrada y otro diferente dentro del email abierto.
  
  

Asuntos dinámicos: Personalización a escala 

Los asuntos estáticos tratan a todos los suscriptores por igual. Los asuntos dinámicos, en cambio, reemplazan variables según datos de segmentación, comportamiento o ubicación. 

Tres ejemplos que funcionan bien: 

• geolocalización personalizada: “Entrega gratuita el mismo día en {ciudad}”; 
• comportamiento del usuario: “Dejaste {producto} en tu carrito”; 
• ciclo de vida: “{Nombre}, el primer año de {marca} corre por nuestra cuenta”.

Diseño de emails mobile-first (Móvil primero)

Actualmente, el 55% de los emails se abre desde dispositivos móviles, lo que convierte el diseño responsive en una expectativa básica y no en un simple valor agregado.

Por qué mobile-first y no solo optimizado para móviles

“Optimizado para móviles” significa que diseñaste primero para desktop y luego verificaste que el email no se rompiera en móvil. El enfoque mobile-first, en cambio, implica diseñar primero para la pantalla móvil y después adaptar la versión desktop a partir de ella.

La diferencia se nota especialmente en tres aspectos:

• jerarquía: los emails mobile-first colocan el bloque más importante en la parte superior, ya que no existe una barra lateral que ayude a distribuir la atención;
• áreas táctiles: los botones se diseñan desde el inicio para interacción táctil (mínimo 44 × 44 px), y no como versiones reducidas de botones pensados para hover en desktop;
• cantidad de texto: los emails mobile-first son más cortos, porque leer 500 palabras desde un teléfono resulta agotador.

(Fuente: Email de Gucci)

Incluso si eliges responsive design en lugar de mobile-first, estas buenas prácticas siguen siendo recomendables:

• utiliza un layout de una sola columna para mejorar la optimización. Los layouts multicolumna no suelen funcionar bien en móviles;
• usa tipografías más grandes. El texto debe poder leerse fácilmente sin hacer zoom;
• elimina algunos elementos visuales en la versión móvil para liberar espacio y evitar saturación visual.

Columna sencilla vs. Columna múltiple: reglas para cada breakpoint 

Diseñar emails responsive requiere ajustar el layout según distintos breakpoints para garantizar una lectura cómoda. La regla principal es que los layouts multicolumna funcionan bien en pantallas amplias, pero deben convertirse en una sola columna en dispositivos pequeños para evitar zoom innecesario y desplazamiento horizontal. 

Estos son los tres grupos principales de tamaños de layout:

• menos de 480 px (la mayoría de teléfonos): una sola columna, imágenes full-width y CTAs apilados. Los layouts de una sola columna suelen generar mejores resultados en móviles porque eliminan el desplazamiento horizontal y el pinch-to-zoom, dos factores que reducen conversiones;
• entre 481 y 768 px (teléfonos grandes y tablets pequeñas): la columna única sigue siendo la mejor opción. Aumenta el tamaño de fuente a un mínimo de 16 px;
• 769 px o más (tablets y desktop): los layouts de dos columnas funcionan bien para grids de productos, comparaciones de funcionalidades y módulos de contenido donde la lectura lado a lado aporta valor. 

Tamaño de áreas táctiles y CTAs fáciles de tocar 

Las guías HIG de Apple recomiendan un tamaño mínimo de 44 × 44 px para áreas táctiles. Las directrices Material de Google sugieren 48 × 48 dp. Lo recomendable es utilizar la medida más grande y añadir padding alrededor. Además, cualquier botón debería tener al menos entre 8 y 12 px de espacio alrededor para evitar clics accidentales.

Y una regla adicional para dispositivos móviles: extiende el botón de call-to-action a lo largo de todo el ancho de la pantalla móvil para facilitar la interacción.

Ahora comparemos el diseño del email en desktop:

(Fuente: Email de Ryanair)

Aquí vemos la misma plantilla visualizado en un dispositivo móvil:

(Fuente: Email de Ryanair)

Testeo entre dispositivos: herramientas y flujo de trabajo 

Un flujo básico de testeo debería cubrir Apple Mail iOS (claro + oscuro), Gmail Android (claro + oscuro), Gmail web (Chrome + Firefox), Outlook desktop (Windows) y Outlook web. Esa debería ser tu matriz mínima de validación.

Aquí puedes ver el resultado, donde es posible comprobar inmediatamente cómo se visualiza el email en distintos dispositivos, clientes de correo y en modo oscuro.

Diseño de CTA: cómo generar clics con intención 

Los botones de call-to-action (CTA) siguen siendo una de las mejores prácticas más efectivas en diseño de emails y continúan impulsando conversiones. Son los elementos que motivan a la audiencia a visitar tu sitio web o conocer más sobre tus servicios.

¿Cómo lograr que los botones destaquen dentro de tus campañas? 

Veamos algunas recomendaciones:

• utiliza colores contrastantes para diferenciar los botones CTA del resto del contenido visual y textual;
• añade enlaces que dirijan a los usuarios a páginas web específicas;
• ajusta el tamaño para asegurar que el botón sea fácilmente clickeable tanto en desktop como en dispositivos móviles.

(Fuente: Email de Baublebar)

Texto HTML vs. CTA basados en imágenes: Por qué importa

Los CTA compuestos únicamente por imágenes desaparecen cuando los suscriptores bloquean las imágenes. Outlook para Windows todavía bloquea imágenes por defecto, y muchos firewalls corporativos eliminan completamente las imágenes remotas. Si tu único CTA está dentro de un PNG, una parte importante de tu audiencia no verá ninguna acción disponible.

Los CTA con texto HTML (botones HTML con colores de fondo definidos en CSS) se renderizan correctamente en todo momento, se visualizan mejor en modo oscuro y siguen siendo clickeables incluso cuando las imágenes fallan. Por eso, deberían ser la opción predeterminada. Reserva los CTA basados en imágenes para campañas visuales puntuales donde el diseño sea el verdadero mensaje.

Jerarquía entre CTA primarios y secundarios

Cada email debería tener un solo objetivo y, por lo tanto, un único CTA principal. Si necesitas una acción secundaria (“Más información”, “Explorar la colección”), preséntala como un enlace de texto o un ghost button para que visualmente quede subordinada al CTA principal.

La lógica de jerarquía funciona así:

• CTA principal: fondo sólido, color de marca, texto entre 16-18 px y full-width en móvil;
• CTA secundario: outline o solo texto, tamaño más pequeño y ubicado debajo o al lado del principal;
• acciones terciarias: enlaces de texto integrados dentro del body copy.

Si el CTA principal y el secundario se ven iguales, entonces ninguno de los dos está funcionando realmente como principal.

(Fuente: Email de Stripo)

El copy del botón: la regla de las 6 palabras

Los mejores CTA tienen entre 1 y 4 palabras. Cualquier cosa que supere las 6 palabras deja de parecer un botón y empieza a sentirse como una oración.

Compáralo:

• ❌ “Haz clic aquí para reclamar tu prueba gratuita hoy” (9 palabras, demasiado genérico);
• ✅ “Comienza tu prueba gratis” (4 palabras, verbo claro y específico).

Los verbos al inicio funcionan mejor que los sustantivos. Lo específico supera a lo genérico. “Descargar el reporte” funciona mejor que “Haz clic aquí”. “Activa tu descuento” es más efectivo que “Enviar”.

Ubicación del CTA: Visible sin hacer scroll (above the fold) y profundidad de scroll

El CTA principal debe aparecer visible sin hacer scroll en móvil, es decir, dentro de los primeros 480 px verticales de la pantalla. También conviene repetirlo al final de emails largos para que quienes lean hasta el final no tengan que volver arriba para interactuar.

En dispositivos móviles, los CTA deberían ubicarse dentro de zonas cómodas para el pulgar, generalmente en la mitad o parte inferior de la pantalla.

(Fuente: Plantilla de Stripo)

Personalización y contenido dinámico en el diseño de emails

Las campañas genéricas están perdiendo efectividad cada trimestre. En 2025, el 97% de los marketers incorporó al menos un elemento interactivo en sus emails, y el 49% utilizó IA generativa para crear copy estático.

Niveles de personalización: del nombre a bloques basados en comportamiento

La personalización funciona como un espectro, no como un interruptor:

• basada en tokens: nombre del usuario en el asunto o saludo; ya es prácticamente un estándar básico;
• basada en segmentos: contenido diferente según listas o audiencias (nuevos vs. recurrentes, gratuitos vs. pagos, geolocalización, etc.);
• basada en comportamiento: contenido que responde a acciones recientes del suscriptor (o a la ausencia de ellas);
• predictiva: contenido impulsado por señales de machine learning (próximo mejor producto, riesgo de abandono, optimización del horario de envío).

La mayoría de los equipos implementa personalización únicamente en los dos primeros niveles, mientras que solo unos pocos logran aplicarla de manera integral.

Cómo diseñar bloques de contenido dinámico que se adapten por segmento

Un bloque de contenido dinámico tiene tres partes: una versión por defecto (para suscriptores sin datos de segmentación), variantes de contenido y una regla que define qué versión mostrar.

Asuntos personalizados, banners y recomendaciones de productos

Hay tres ubicaciones de personalización que consistentemente mejoran métricas:

• variables en el asunto: nombre, ciudad o último producto visto;
• hero banner: imágenes distintas según el segmento (hombre vs. mujer, principiante vs. avanzado);
• recomendaciones de productos: obtenidas desde motores de recomendación y actualizadas al momento de apertura mediante Smart elements.

Cómo crear una plantilla de email personalizada en Stripo

Aquí tienes un flujo rápido para una campaña segmentada:

1. Construye el layout maestro con dos o tres bloques de contenido marcados para segmentación.
2. Añade una tarjeta de producto mediante Smart element conectada a tu Fuente de datos.
3. Configura Display conditions en cada bloque (por ejemplo: “mostrar solo si segment = returning_customer”).
4. Asocia merge tags ({nombre}, {ciudad}, {último producto}) tanto en el asunto como en el cuerpo del email.
5. Realiza pruebas en modo vista previa utilizando perfiles de suscriptores de ejemplo antes del envío.

Este enfoque permite generar toda la plantilla dentro de un solo archivo, en lugar de crear cinco versiones distintas. Así, la personalización puede escalar mucho más fácilmente.

Consistencia de marca en campañas de email

Una identidad de marca consistente genera confianza. Actualmente, el 78% de los marketers ya puede medir el ROI de sus programas de email, y las marcas con mejores resultados son aquellas que mantienen campañas alineadas con la identidad visual y adaptadas a las necesidades individuales de cada cliente.

La plantilla maestra: La única fuente de verdad de tu marca

Una plantilla maestra es la versión controlada y centralizada de la identidad visual de tu marca dentro de un email: encabezado, pie de página, tokens de color, escalas tipográficas, estilos de botones y espaciados predeterminados. Todas las campañas deberían partir de una copia de esta plantilla.

La disciplina no consiste simplemente en “usar la plantilla maestra”, sino en nunca modificarla directamente dentro de una campaña. Si algo necesita cambiar, se actualiza primero en la plantilla maestra y luego se resincroniza.

Reglas de paleta de color, tipografía y logos para email

El email no funciona igual que la web: los colores se renderizan de forma diferente, las fuentes pueden cambiar a fallbacks y los logos pueden romperse en modo oscuro.

Por eso, conviene definir claramente:

• una paleta de marca con 2-3 colores principales y sus valores hexadecimales, además de variantes claro/oscuro para cada uno;
• una escala tipográfica con fallbacks web-safe (más adelante profundizaremos en tipografía);
• versiones del logo para fondos claros y oscuros: un único PNG con fondo transparente y outline de 1-2 px suele funcionar correctamente en ambos modos.

Uso del kit Brand Guidelines de Stripo

Stripo ofrece el Brand Guidelines kit, una herramienta que integra las reglas de marca directamente dentro de los flujos de trabajo de email para simplificar la creación y gestión de lineamientos visuales específicos para emails. Con este kit, puedes generar una guía de marca basada en plantillas de email creados directamente dentro del builder de Stripo. El sistema crea automáticamente una guía visual de marca que incluye todos los elementos esenciales y que puede exportarse en PDF o almacenarse dentro del editor. Esto permite que todo el equipo tenga acceso a ella en cualquier momento sin salir de la plataforma.

Consistencia entre canales: email, web y redes sociales

El diseño de emails no existe de manera aislada. Un suscriptor que hace clic hacia una landing page espera encontrar los mismos colores, tipografías y tono visual. Del mismo modo, alguien que ve una historia de Instagram debería poder reconocer inmediatamente tu marca también en la bandeja de entrada.

Una buena forma de auditar consistencia es comparar lado a lado tres elementos: un hero email, una landing page y una publicación en redes sociales. Si la identidad visual no coincide en menos de dos segundos, significa que existe una brecha dentro del sistema de marca.

Sistema de plantillas de email: Diseñando para escalar

Cuando envías más de 4-5 campañas al mes, el diseño improvisado deja de funcionar. Necesitas un sistema de diseño de emails que estandarice y acelere el proceso de producción.

Plantillas maestras vs. bibliotecas modulares de bloques

Para lograr esta estandarización, puedes trabajar con dos enfoques: plantillas maestras y bibliotecas de bloques modulares reutilizables.

Así puedes distribuir mejor las tareas:

• utiliza una plantilla maestra para emails transaccionales, newsletters y envíos de alto volumen con estructuras estables;
• utiliza una biblioteca de módulos para campañas promocionales donde la estructura cambia, pero los componentes (hero, product card, testimonial, pie de página) se reutilizan constantemente.

Cómo diseñar bloques de contenido reutilizables

Los bloques reutilizables deben ser responsive, tokenizados y capaces de utilizarse en cualquier posición dentro del email. Por ejemplo, los Modules de Stripo son bloques guardados, compartibles y organizados por nombre que cualquier miembro del equipo puede insertar dentro de cualquier plantilla.

Los módulos sincronizados solucionan uno de los mayores problemas de mantenimiento: actualizas el módulo una sola vez y todos las plantillas que lo contienen se actualizan automáticamente. En lugar de repetir la misma secuencia de cambios una y otra vez, haces una sola actualización. Así es como se reducen drásticamente los ciclos de revisión.

Convenciones de nombres para plantillas y gobernanza de equipos

Una convención de nombres que todo equipo debería utilizar:

{tipo de campaña}_{audiencia}_{variante}_{fecha}

Ejemplos:

• promo_clientes-recurrentes_oferta-verano-A_2026-05
• newsletter_todos-los-suscriptores_semanal_2026-05-12
• transaccional_todos_restablecimiento-de-contraseña_master

Combínalo con accesos basados en roles: los diseñadores editan Modules, los marketers ensamblan plantillas a partir de ellos y los aprobadores validan el resultado final. Los roles personalizados de Stripo permiten aplicar este flujo de trabajo de manera controlada.

Cómo el catálogo de plantillas de Stripo acelera la producción

Más de 1,650 plantillas prediseñadas cubren la mayoría de los tipos de envío: bienvenida, carrito abandonado, newsletters, campañas estacionales, lanzamientos de productos y reengagement. Comenzar desde una plantilla validada y adaptarla puede reducir el tiempo de producción aproximadamente 3.7× en comparación con crear emails desde cero.

Tipografía en email: fuentes, tamaños y legibilidad

Vale la pena experimentar con tipografías al diseñar emails. Sin embargo, algunas web fonts pueden ser problemáticas porque no todos los proveedores de correo las renderizan correctamente.

Web-safe fonts vs. fuentes personalizadas: Diferencias y alternativas de respaldo

Las web-safe fonts (Arial, Tahoma, Verdana, Trebuchet, Georgia, Times New Roman, Helvetica y Courier) se renderizan correctamente en prácticamente todos los clientes de correo. Puede que no sean las más llamativas, pero funcionan de forma consistente.

Las fuentes personalizadas (Inter, Roboto, Poppins, Open Sans o cualquier fuente de Google Fonts) se visualizan correctamente en Apple Mail, iOS Mail, Gmail web y algunas versiones de Outlook. Sin embargo, en Outlook desktop y otros clientes suelen reemplazarse automáticamente por fuentes predeterminadas.

Puedes utilizar una fuente personalizada para la tipografía hero si lo deseas, pero es importante construir correctamente la alternativa de respaldo tipográfico.

Si la fuente personalizada falla, la alternativa de respaldo debería verse lo más parecido posible a la original.

Jerarquía de tamaños tipográficos: encabezados, cuerpo y textos secundarios

Una escala tipográfica funcional para emails de marketing puede verse así:

• hero/H1: 28-36 px;
• sección/H2: 22-26 px;
• subsección/H3: 18-20 px;
• cuerpo: mínimo 16 px en móvil (14 px únicamente para legal/pie de página);
• texto secundario: 12-13 px.

Utilizar body copy por debajo de 14 px en móvil sigue siendo uno de los errores más comunes de legibilidad. Cualquier tamaño inferior obliga al usuario a hacer pinch-to-zoom, y la mayoría simplemente no lo hará.

Interlineado, espaciado entre letras y ancho de párrafo

Optimizar la tipografía en emails es clave para garantizar legibilidad.

Estas recomendaciones ayudan a evitar problemas de superposición de texto:

• interlineado: entre 1.4-1.6× el tamaño de fuente para body copy. Más cerrado genera fatiga visual; más amplio puede sentirse demasiado disperso;
• espaciado entre letras: deja el valor por defecto, excepto en headings en mayúsculas, donde un espaciado de +0.5 a +1 px mejora considerablemente la lectura;
• ancho de párrafo: entre 50-75 caracteres por línea es el rango más cómodo para lectura. En móvil esto ocurre naturalmente; en desktop conviene limitar las secciones de contenido a aproximadamente 600 px de ancho.

Tipografía y accesibilidad: Qué deberías evitar

Las mejores prácticas de tipografía y accesibilidad en emails incluyen:

• las cursivas pueden representar un problema de accesibilidad, ya que reducen legibilidad para personas con dislexia o baja visión;
• limita el uso a dos familias tipográficas por email; tres debería ser el máximo absoluto;
• el body copy completamente en mayúsculas es más difícil de leer que texto en formato mixto;
• evita justificar el texto del body; la alineación izquierda mejora legibilidad y evita espacios irregulares.

Accesibilidad en emails: Diseñando para todos los suscriptores

El diseño accesible en email marketing no se trata únicamente de cumplir requisitos legales. Sobre todo, demuestra que las marcas realmente piensan en las personas: quienes utilizan lectores de pantalla, tienen baja visión, visualizan contenido en condiciones de poca luz o navegan con imágenes desactivadas.

Checklist WCAG para diseñadores de email

La checklist WCAG para diseñadores divide la accesibilidad en acciones concretas que ayudan a que los emails HTML sean intuitivos y compatibles con los principales clientes de correo.

Versión resumida de WCAG 2.2 AA aplicada a email:

• contraste: Mínimo 4.5:1 para texto del cuerpo y 3:1 para texto grande (18 px+) y componentes UI;
• redimensionamiento del texto: el contenido debe seguir siendo legible cuando el usuario amplía hasta 200%;
• texto alternativo: toda imagen relevante debe incluir texto alternativo descriptivo; las imágenes decorativas deben utilizar alt vacío (alt="");
• estructura semántica: utiliza etiquetas reales de encabezado (H1, H2, H3) en el orden correcto y no solo texto estilizado visualmente;
• navegación por teclado: todos los elementos interactivos deben poder utilizarse sin mouse;
• independencia del color: nunca uses únicamente color para transmitir significado; añade iconos, labels o texto adicional.

Ratios de contraste de color: Herramientas y estándares mínimos

El nivel AA de WCAG exige una relación mínima de contraste de 4.5:1 para texto normal y 3:1 para texto grande.

Herramientas útiles para validarlo:

• WebAIM Contrast Checker (gratuito y basado en web);
• Stark (plugin para Figma);
• Adobe Color Contrast Analyzer (integrado en Adobe XD).

Antes de aprobar el diseño final, conviene validar todas las combinaciones de color de tu plantilla maestra con alguna de estas herramientas. El contraste de color sigue siendo una de las principales fallas de accesibilidad en la web y afecta al 79.1% de las home pages.

Compatibilidad con lectores de pantalla: Estructura semántica

Los lectores de pantalla interpretan la estructura HTML, no el diseño visual. Por eso:

• utiliza <h1>, <h2>, <h3> para encabezados reales y respeta el orden jerárquico;
• utiliza <table role="presentation"> para tablas de layout, de modo que los lectores de pantalla las ignoren como estructura;
• configura lang="es" (o el idioma de envío correspondiente) dentro de la etiqueta <html>;
• añade un <title> descriptivo para que los lectores de pantalla anuncien correctamente el propósito del email.

Mejores prácticas para textos alternativos en imágenes y GIFs

El texto alternativo existe para dos tipos de usuarios: quienes utilizan tecnologías de asistencia y quienes navegan con imágenes bloqueadas.

Así se recomienda escribir textos alternativos:

• imágenes decorativas: alt="" (vacío, no ausente);
• imágenes informativas: describe lo que transmite la imagen, no solamente lo que muestra (“Colección de primavera: impermeables ligeros y botas resistentes al agua”, en lugar de “Foto de un abrigo amarillo”);
• imágenes CTA: describe la acción (“Comprar colección de primavera”);
• GIFs: describe lo que ocurre en la animación; si el GIF falla, el primer frame junto con el texto alternativo debería seguir transmitiendo el mensaje principal.

Imágenes, GIFs y elementos visuales interactivos

El uso de imágenes, GIFs y elementos interactivos dentro de emails también requiere seguir ciertas buenas prácticas para asegurar que las campañas se visualicen correctamente en distintos clientes de correo y dispositivos.

Tamaños y optimización de imágenes según el dispositivo

Lo primero a considerar es el tamaño de las imágenes utilizadas.

Estas son algunas recomendaciones básicas:

• ancho: 600-640 px para el cuerpo principal del email y 1200-1280 px para pantallas retina (utilizando tanto el atributo width como CSS);
• formato de archivo: JPG para fotografías, PNG para logos y gráficos con transparencia, GIF para animaciones y WebP únicamente si confirmaste compatibilidad en los clientes de correo de tu audiencia;
• tamaño de archivo: mantén el peso total del email por debajo de 100 KB y cada imagen individual por debajo de 50 KB;
• compresión: herramientas como TinyPNG o Squoosh eliminan metadata y comprimen imágenes sin pérdida visible de calidad.

Banners o hero images: mejores prácticas para email 

Piensa en los banners como un complemento visual del email y evita saturar el diseño. Una buena estrategia de banners busca conectar con la audiencia mediante imágenes alineadas a la marca, enlaces o GIFs que refuercen el mensaje principal del email.

La clave está en contar una historia y no solo vender. Los banners excesivamente promocionales suelen generar desconfianza, por lo que normalmente funciona mejor un enfoque más narrativo. 

Algunas recomendaciones importantes:

• aunque muchas marcas utilizan imágenes de entre 600-700 px en desktop, puedes probar otras dimensiones. Solo asegúrate de mantener la compatibilidad responsive;
• prueba utilizar carruseles, videos y GIFs;
• añade imágenes transparentes o collages personalizados para refrescar la plantilla del email.

(Fuente: Email de Chanel)

Reglas para GIFs: tiempo de carga, límites de flashes y alternativa de respaldo del primer frame

Los GIFs pueden hacer que los emails se sientan más dinámicos y atractivos, pero deben utilizarse cuidadosamente. Para evitar problemas de carga lenta o renderizado, procura mantenerlos por debajo de 1 MB, ya que archivos más pesados pueden eliminarse o no cargarse correctamente en algunos clientes de correo. También es importante colocar primero el frame más relevante, porque algunas versiones de Outlook para Windows únicamente muestran el primer frame en lugar de reproducir la animación completa. Y si el GIF no carga, el texto alternativo debe seguir comunicando claramente el mensaje principal o el CTA.

Evita flashes excesivos y limita las animaciones a un máximo de dos destellos por segundo para reducir el riesgo de provocar episodios fotosensibles. Además, es recomendable no saturar el email con movimiento: utilizar más de un GIF por pantalla puede volverse rápidamente distractor y visualmente abrumador para los lectores.

(Fuente: Email de Tiffany)

Cuándo utilizar carruseles, video y módulos interactivos

Los módulos interactivos y el video ayudan a que los emails destaquen en bandejas de entrada saturadas de campañas promocionales. Además de hacerlos más memorables, aumentan el engagement y mejoran el rendimiento general del email marketing.

Estas son algunas recomendaciones clave para este tipo de contenido:

1. Utiliza carruseles (AMP) cuando necesites mostrar 4 o más productos y tu audiencia utilice principalmente Gmail. Para clientes que no admiten AMP, utiliza un grid estático como alternativa de respaldo.
2. Inserta el video como una imagen de vista previa con un botón de play superpuesto que enlace al video alojado externamente. La reproducción inline real funciona solo en algunos clientes y de forma inconsistente.
3. Utiliza módulos interactivos como encuestas e image hotspots para recopilar engagement sin enviar a los usuarios a una landing page.

(Fuente: Email de Stripo)

Manejo de imágenes en modo oscuro: PNG transparentes vs. fondos sólidos

Aproximadamente el 35% de las aperturas de emails ocurre en modo oscuro, y cerca del 82% de los usuarios de smartphones lo tiene activado.

La mayoría de los problemas de renderizado en modo oscuro proviene de las imágenes:

1. Un logo con texto oscuro sobre fondo blanco desaparece o se invierte en modo oscuro.
   Solución: exporta logos como PNG transparentes con un outline claro y delgado para asegurar visibilidad tanto en fondos claros como oscuros.
2. Las fotografías con bordes blancos generan un recuadro visible alrededor de la imagen.
   Solución: recorta las imágenes sin márgenes blancos o ajusta el color de fondo del email para que coincida con el de la imagen.

Tipos de emails y cuándo utilizar cada formato 

No todos los emails necesitan diseño visual. Algunos deben ser simples, rápidos y completamente directos. 

Email en texto plano: cuando la simplicidad supera al diseño 

El texto plano evita problemas de bloqueo de imágenes, se renderiza de forma idéntica en todos los clientes de correo y transmite una sensación menos comercial, algo que suele aumentar las tasas de respuesta en emails personales. 

Un email en texto plano (o diseñado para parecerlo) funciona especialmente bien en tres escenarios: 

1. De una persona real a otra persona real: Seguimientos comerciales, revisiones de cuenta o mensajes del fundador.
2. Problemas críticos de entregabilidad: Cuando necesitas reconstruir reputación del remitente después de incidentes de spam.
3. Narrativas auténticas: Newsletters que se leen como un email y no como un folleto promocional.

Emails HTML enriquecidos: El enfoque mini landing page

La mayoría de emails de marketing pertenece a esta categoría: hero, copy, CTA, bloques de apoyo y pie de página. Utiliza HTML enriquecido cuando necesites branding, jerarquía visual y storytelling, especialmente en promociones, newsletters y anuncios de producto.

Emails AMP/interactivos: Capacidades y limitaciones

AMP for Email permite a los destinatarios interactuar directamente dentro de la bandeja de entrada: completar formularios, navegar carruseles, confirmar asistencia a eventos y visualizar inventario en tiempo real. En una prueba A/B propia, Stripo descubrió que los formularios interactivos basados en AMP generaron un 520% más de respuestas que formularios externos.

Limitaciones importantes:

• soporte: Gmail y Yahoo ofrecen compatibilidad completa con AMP; Apple Mail y Outlook no lo admiten;
• alternativa de respaldo: siempre debes incluir una versión HTML para clientes incompatibles. AMP no reemplaza al HTML, sino que lo complementa;
• configuración: necesitas registrar tu remitente ante Google antes de que los emails AMP se rendericen correctamente en Gmail.

Emails transaccionales vs. emails de marketing: Reglas de diseño distintas

Los emails transaccionales y los de marketing tienen objetivos distintos, por lo que requieren enfoques diferentes.

 

No conviertas emails transaccionales en campañas promocionales. Los recibos que parecen promociones pierden confianza rápidamente.

Gamificación y elementos interactivos

Los elementos interactivos son los que separan un buen diseño de email de uno realmente excepcional. Las campañas gamificadas pueden generar hasta un 48% más de engagement, y la gamificación en email marketing puede aumentar las aperturas hasta un 30%.

Encuestas, formularios y cuestionarios embebidos en emails

Las encuestas de un solo toque (basadas en AMP) funcionan muy bien para recopilar feedback rápido (“¿Cómo fue tu experiencia? 👍/👎”). Los cuestionarios son ideales para recomendaciones de productos y segmentación de perfiles. En cambio, las encuestas con más de tres preguntas abiertas funcionan mejor en una landing page que dentro del email.

(Fuente: Plantilla de Stripo)

Juegos y tarjetas raspa y gana: Datos de conversión

Los emails gamificados aumentan las conversiones en promedio un 2.5%, y el contenido interactivo puede incrementar el valor promedio de compra en un 15%. Además, se proyecta que el mercado global de gamificación alcance los 30.7 mil millones de dólares para 2025. 

Mecánicas que consistentemente generan buenos resultados:

• ruletas para revelar descuentos (muy efectivas en primeras compras);
• tarjetas raspa y gana para recompensas sorpresa (funcionan bien en programas de fidelización);
• juegos de memoria y matching para aumentar engagement (ideales para campañas de re-engagement);
• cuestionarios personalizados para ayudar a encontrar el producto adecuado (muy útiles en lanzamientos de nuevos productos).

(Fuente: Plantilla de Stripo)

AMP vs. interactividad basada únicamente en CSS: Matriz de compatibilidad

AMP y la interactividad basada exclusivamente en CSS representan dos enfoques distintos para generar engagement dentro de la bandeja de entrada. AMP ofrece experiencias más similares a una app y acceso a datos en tiempo real, pero requiere compatibilidad estricta y procesos de validación. La interactividad basada en CSS funciona en más clientes de correo, aunque limitada a animaciones y cambios visuales estáticos.

 

Utiliza AMP cuando tu audiencia esté fuertemente concentrada en Gmail. Utiliza CSS cuando necesites compatibilidad con Apple Mail. Y siempre incluye una alternativa de respaldo en HTML.

Testeo A/B de decisiones de diseño en emails

La mayoría de las “mejores prácticas” son simplemente promedios. El mejor diseño para tu audiencia es el que realmente has probado.

Qué deberías testear: Lista priorizada de variables de diseño

Realiza pruebas en este orden, de mayor a menor impacto esperado:

1. Asunto (la variable con mayor impacto sobre aperturas).
2. Hero image/banner (define la primera impresión).
3. Copy del CTA (un solo cambio de verbo puede aumentar la tasa de clics entre 10-30%).
4. Color del CTA (solo cuando el resto ya esté optimizado; el impacto suele ser menor de lo esperado).
5. Nombre del remitente (influye más de lo que muchas personas creen).
6. Patrón de layout (Columna sencilla vs. híbrido).
7. Nivel de personalización (basada en tokens vs. basada en comportamiento).

Cómo estructurar un test válido: Tamaño de muestra, duración y variable única

Tres reglas ayudan a evitar la mayoría de errores en testeo:

• una sola variable por prueba: si cambias el asunto y el hero image al mismo tiempo, no sabrás cuál modificó realmente la métrica;
• el tamaño de muestra importa: para alcanzar un 95% de confianza estadística en mejoras pequeñas (5-10%), normalmente necesitas más de 1,000 destinatarios por variante. Los tests pequeños suelen generar conclusiones engañosas;
• la duración debe cubrir toda la ventana de aperturas: la mayoría de aperturas ocurre dentro de las primeras 24 horas, pero las audiencias B2B suelen abrir emails entre 48-72 horas después. Finalizar el test demasiado pronto implica medir la cohorte equivocada.

Cómo interpretar resultados: qué métricas realmente importan en diseño

No todas las métricas de email tienen el mismo nivel de confiabilidad, por lo que es importante entender qué mide realmente cada una.

La tasa de apertura sigue siendo útil para identificar tendencias generales, pero Apple Mail Privacy Protection ha reducido considerablemente su precisión, por lo que conviene interpretarla más como una señal orientativa que como una métrica absoluta. El click rate es mucho más útil para evaluar rendimiento de CTA y efectividad del layout, mientras que la tasa de click-to-open (CTOR) ayuda a medir qué tan bien funcionaron el contenido y el diseño independientemente del asunto.

En términos de impacto de negocio, la tasa de conversión sigue siendo la métrica más importante, porque conecta directamente el rendimiento del email con ingresos o acciones deseadas. Y en campañas promocionales, ingresos por email (RPE) suele ser uno de los indicadores más sólidos para medir rentabilidad a largo plazo.

Las tasas de apertura se han vuelto menos confiables debido a que Apple Mail Privacy Protection ya afecta aproximadamente entre el 50-60% de las aperturas registradas. Por eso, los marketers más avanzados priorizan click-through rates, conversiones e ingresos por email como KPIs principales.

Anotaciones de Gmail y estrategia de vista previa en bandeja de entrada

Muchos marketers quieren aparecer en la pestaña Principal de Gmail, pero la pestaña Promociones no es necesariamente un problema.

Cómo funcionan las anotaciones de Gmail en Promociones

Las anotaciones de Gmail son datos estructurados (JSON-LD o microdata) que se añaden dentro del <head> del email para que Gmail pueda mostrar una tarjeta visual sobre el asunto en móvil o un carrusel en la parte superior de la pestaña Promociones.

Existen tres tipos de anotaciones especialmente importantes:

• código promocional: muestra un código de descuento directamente en la vista previa;
• etiqueta de oferta: añade etiquetas promocionales (“Descuento de 20%”, “Envío gratis”);
• fecha de expiración: muestra cuándo finaliza la oferta y genera urgencia directamente desde la bandeja de entrada.

Cómo añadir etiquetas de oferta, fechas de expiración e imágenes promocionales

Una anotación básica de Gmail incluye una imagen promocional (580×400 px), una etiqueta de descuento, una fecha de expiración, un logo de marca. Lo ideal es construir este bloque una sola vez, guardarlo como módulo reutilizable y utilizarlo en futuras campañas promocionales.

Stripo incluye un builder para anotaciones promocionales de Gmail, por lo que no necesitas escribir manualmente el JSON.

Cómo medir el rendimiento de las anotaciones

Gmail no proporciona métricas específicas de clics para las anotaciones, por lo que la medición normalmente se realiza mediante UTMs:

• añade un UTM source/medium exclusivo para campañas con anotaciones (por ejemplo: utm_source=gmail&utm_medium=annotation);
• compara el CTR entre campañas con anotaciones y campañas sin ellas;
• monitorea incrementos en clics desde móvil, ya que las anotaciones aparecen primero allí.

Conclusión 

El email sigue siendo uno de los pocos canales donde un buen diseño impacta directamente las métricas de manera medible. Layouts mobile-first, una jerarquía sólida de CTA, accesibilidad, manejo correcto de modo oscuro y un verdadero sistema de diseño de emails son los elementos que diferencian campañas efectivas de emails que simplemente terminan eliminados.

Primero construye una base sólida y luego añade capas de interactividad y personalización. Testea las variables realmente importantes (asunto, hero y CTA), no detalles menores como el radio de las esquinas de un botón. Y convierte la producción en un sistema, para que cada nueva campaña parta desde una plantillas que ya entiende tu marca.

Preguntas frecuentes sobre diseño de emails 

1. ¿Cuál es el ancho ideal para un email? 

600 px sigue siendo el estándar para el cuerpo del email en desktop, mientras que entre 320-480 px es el rango habitual en móvil. La mayoría de plantillas utilizan un wrapper de 600 px con secciones internas que colapsan responsivamente en dispositivos móviles. Las plantillas de Stripo utilizan este ancho por defecto.

2. ¿Cuántas imágenes debería tener un email? 

No existe una regla fija, pero una proporción funcional suele ser 60/40 entre texto e imágenes. Demasiadas imágenes hacen que los filtros spam sospechen y generan problemas cuando las imágenes se bloquean. Muy pocas imágenes hacen que el email se sienta plano. Entre tres y cinco imágenes bien seleccionadas suele ser suficiente para la mayoría de campañas de marketing. 

3. ¿Debería usar un builder no-code o programar emails desde cero? 

Utiliza un builder no-code si envías más de dos emails al mes y necesitas renderizado confiable entre distintos clientes de correo. Programar desde cero funciona para campañas muy específicas o para desarrolladores que ya mantienen un código propio de emails. Para la mayoría de equipos, construir emails dentro de un editor no-code reduce el tiempo de producción aproximadamente 3.7× sin sacrificar calidad de renderizado. 

4. ¿Qué hace que un email esté optimizado para móviles? 

Un layout single-column por debajo de 480 px, texto del cuerpo mínimo de 16 px, áreas táctiles de al menos 44×44 px, CTA full-width, imágenes configuradas con porcentajes o max-width: 100%, y renderizado validado al menos en Gmail Android y Apple Mail iOS. Toda la explicación detallada aparece en la sección mobile-first de esta guía. 

5. ¿Cómo puedo testear renderizado de emails entre distintos clientes?

Existen tres opciones, de menor a mayor cobertura: enviar pruebas a cuentas propias (gratuito, pero limitado), utilizar herramientas gratuitas como PutsMail (vista previa básica) y utilizar plataformas de pago como Litmus, Email on Acid o el sistema integrado de testeo de clientes de correo de Stripo (más de 90 clientes dentro de un mismo flujo).

6. ¿Cuál es la diferencia entre diseño de emails y email marketing?

El email marketing es la estrategia: a quién envías, cuándo, por qué y qué métricas analizas. El diseño de emails es la forma en que el mensaje se construye para que esa estrategia realmente funcione dentro de la bandeja de entrada.

Puedes tener una gran estrategia con mal diseño (altas aperturas y pocos clics). O un gran diseño con mala estrategia (emails visualmente atractivos que nadie abre). Son habilidades distintas, y las mejores campañas invierten en ambas.