Formato nuevo
Maquetación HTML de email: que sea previsible
Un mock pulido en Figma no garantiza el mismo aspecto en Gmail, Yandex Mail, Apple Mail y Outlook. Los clientes recortan el CSS de formas distintas, así que la maquetación de email juega con sus propias reglas.
Abajo: qué cuesta un layout roto, la estructura básica del código, límites de contenido y cómo testear. Trata los tips de DOCTYPE de 2019 como históricos y contrastealos con las plantillas actuales de tu ESP.
Qué rompe un email
Aspectos distintos entre clientes, scroll horizontal en móvil, bloques que faltan, un render destrozado en Outlook, imágenes pesadas y carga lenta — el coste habitual de ignorar los límites del email.
La interactividad y la animación compleja a menudo no llegan. Primero deja bien un marco legible y el CTA; después decora.
Estructura y código
El marco son tablas con ancho fijo o fluido (a menudo ~600px para la columna desktop). Tablas anidadas para módulos ganan a floats complejos.
Escribe el CSS donde los clientes se enfadan (márgenes longhand en lugar de shorthand); pon estilos críticos inline. Imágenes de fondo y propiedades raras necesitan un chequeo aparte en Outlook.
Un markup válido y simple gana a CSS «bonito» moderno copiado de un sitio web.
Reglas básicas:
- marco de tablas
- inline para estilos clave
- fuentes web-safe o enlazadas con fallback
- tap targets grandes
- prueba en Outlook y en iOS
Contenido, imágenes, herramientas
El copy tiene que leerse con las imágenes apagadas. Comprime imágenes, fija width/height y no enterres toda la oferta en un JPG.
Los editores del ESP y las plantillas listas aceleran el trabajo; HTML a medida cuando necesitas control total. Los testers externos pillan sorpresas antes que los suscriptores.
FAQ
¿Por qué tablas en lugar de flex o grid?
Muchos clientes (sobre todo Outlook antiguo) se atragantan con layout de bloques moderno. Las tablas siguen siendo el marco más previsible.
¿Se puede usar HTML5 en email?
Con cuidado. Los equipos suelen quedarse con un DOCTYPE transitional simple y un set estrecho de tags. Prueba experimentos en clientes reales.
¿Hace falta CSS inline?
Sí para estilos críticos: muchos clientes recortan `<style>` o ignoran shorthand.
¿Un layout roto te manda a spam?
No automáticamente. El spam depende de reputación de dominio, quejas y contenido. Pero un email roto igual mata clics.
¿Hace falta un email responsive?
Sí: media queries donde se soportan, más un fallback de una columna y tap targets grandes.
¿Cómo testear emails?
Previews del ESP, herramientas tipo Litmus/Email on Acid y envíos manuales a Gmail, Yandex, Outlook e iOS.
¿Un email solo con imagen es mala idea?
Sí — algunos clientes bloquean imágenes. Refleja el sentido en el copy y en el alt.
¿Se ve perfecto en Chrome — y roto en Outlook y en móvil?
Rehacemos un marco de tablas, CSS crítico inline y pruebas en clientes para que el envío no sea una lotería de layout.
Hablar del proyecto
