Límites Técnicos del Email: ¿Qué se puede (y qué no) hacer?

A todos los desarrolladores nos pasa. Llega un diseñador o el gerente de marketing con una idea brillante y “disruptiva”: “Quiero que el correo tenga un video autoplay de fondo, un carrusel interactivo táctil y un formulario de encuesta integrado”.

Y acá es donde tenés que tragar saliva y ser el portador de las malas noticias: un email no es una página web moderna.

Los clientes de correo masivos (como Outlook, Gmail o Apple Mail) están limitados por medidas de seguridad increíblemente estrictas y motores de renderizado que, en algunos casos vergonzosos pero reales, no han evolucionado de forma drástica desde 2007.

Lo que NO podés hacer en un Email

• JavaScript: Olvidate para siempre. Ningún cliente de correo importante permite la ejecución de scripts por obvias razones de seguridad (principalmente phishing e inyecciones de código malicioso). Nada de animaciones JS complejas, librerías modernas ni llamadas a APIs.
• Embeber Videos (Autoplay): Colocar un tag <video> o un <iframe> de YouTube simplemente no va a funcionar en Gmail ni en el temido Outlook. La solución estándar es poner una imagen estática .jpg con un ícono enorme de “Play” pegado encima, el cual sirve de ancla para redirigir al usuario hacia YouTube.
• Formularios integrados: Aunque algunos clientes experimentales que soportan AMP for Email lo permiten a medias, los formularios clásicos de HTML que envían datos (<form>, <input>) fallan catastróficamente o son marcados agresivamente como Spam en la gran mayoría de las bandejas de entrada empresariales. Si precisás que llenen datos, poné un botón grande que los lleve a una Landing Page externa y limpia.

Lo que SÍ podés (y debés) hacer

• GIFs Animados: Son la auténtica salvación visual del email marketing. Pesan poquísimo y simulan la energía de un video sin depender de scripts. Todos los clientes los soportan, pero tené en cuenta: el soporte de la “animación” varía. Algunos clientes reproducirán el GIF en bucle infinito (autorepeat forever), otros lo reproducirán una sola vez y lo frenarán, y versiones antiguas de Outlook Desktop no lo animarán en absoluto y mostrarán únicamente el primer frame estático como una imagen JPG normal. Asegurate SIEMPRE de que el fotograma 1 tenga sentido comunicacional por sí solo.
• Media Queries limitadas: Podés usar un código híbrido basado en tablas combinado con Media Queries clásicas para que Gmail en un Android o Apple Mail en un iPhone muestren el correo fluido en pantallas chicas.

Las Reglas de Oro Visuales (Do’s y Don’ts)

Incluso respetando los límites técnicos, un buen diseño debe priorizar la legibilidad y la jerarquía por encima de la “creatividad extrema”. Seguí estos principios:

✅ Lo que tenés que hacer (Do’s):

• Mantené layouts simples y limpios: Un máximo de dos columnas es ideal. Siempre pensá en Mobile-First primero, porque más del 60% de las aperturas suceden ahí.
• Jerarquía visual clara: Titular principal -> Imagen de apoyo -> Texto -> Botón (CTA). Esa es la ruta que guía el ojo del lector.
• Diseñá previendo el bloqueo de imágenes: Asegurate de sumar texto alternativo (ALT text) descriptivo a todas las imágenes y botones. Tu mensaje tiene que entenderse igual aunque tu cliente bloquee las fotos por defecto.
• Aprovechá la “Zona VIP” (The Fold): Mantené tu mensaje principal y CTA visibles sin que el usuario haga scroll (el tope de 300-400px es tu mejor terreno). Podés colocar los links clave de ventas justo acá arriba.
• Fondos sólidos y fuentes seguras: Usá bloques de colores simples, excelente contraste y fuentes “Web-safe” (Arial, Helvetica, Verdana).
• Espacios consistentes: Añadí whitespace para que el ojo descanse entre secciones y mantené márgenes iguales a lo largo de todo el correo.
• CTAs cortos y directos: “Comprar ahora”, “Leer más”, “Empezar”. Un botón no es un párrafo. Mantene también la consistencia de tu marca en el tono.

❌ Lo que debés evitar (Don’ts):

• Grillas complejas: Evitá layouts súper enroscados de muchas columnas; terminan rompiéndose o apilándose rarísimo en móviles y Outlook.
• Texto sobre imágenes de fondo: Los clientes viejos directamente no soportan fondos fotográficos.
• Sombras, gradientes o blends: Olvidate de CSS moderno avanzado. La mayoría de los clientes los ignorarán y se verán planos.
• Texto minúsculo: Evitá usar fuentes menores a 12px. Son súper difíciles de leer en el teléfono. Tampoco mezcles más de 2-3 tamaños/colores de fuente en todo el mail.
• Elementos interactivos puros: Efectos por hover en textos o elementos interactivos CSS pesados casi nunca funcionan. Tampoco confíes ciegamente en custom fonts (prepará siempre una fuente sans-serif de sistema porque la reemplazarán por defecto).

Aprender a maquetar sabiendo dónde están las fronteras te ahorra muchísimos dolores de cabeza. Si lográs acatar estos límites manteniendo la identidad visual de la marca, estarás listo para armar un embudo de ventas demoledor. Podes leer de esto en mi Guía Definitiva de Email Marketing.