Esta guía describe los estándares de codificación y diseño para correos electrónicos HTML personalizados en Omnisend. Utiliza estas mejores prácticas para asegurarte de que tus correos electrónicos se muestren correctamente en Gmail, Outlook, Apple Mail y dispositivos móviles.
⚡ Recursos importantes:
Para agregar HTML personalizado a tus correos electrónicos: Consulta Agregar y configurar elemento HTML personalizado
Para importar una plantilla HTML completa: Ver Importar Plantillas de Correo Electrónico HTML Personalizadas
Si eres nuevo en HTML, revisa Lo básico de HTML en W3Schools primero.
Estándares de Codificación HTML de Correo Electrónico
Los clientes de correo electrónico (especialmente Outlook 2007–2010) utilizan motores de renderizado limitados. Sigue estas reglas para asegurar la compatibilidad.
Diseño y Tablas
Utiliza
<table>para todos los diseños.Anida tablas para crear estructuras complejas.Establece dimensiones con atributos de elementos (
cellpadding,align,width) en lugar de CSS. Esto fuerza una estructura de modelo de caja.Evita
<div>,<span>y posicionamiento CSS (float,position,clear). Los clientes de correo electrónico eliminan o ignoran estos.
CSS y Estilo
Utiliza CSS en línea solamente. Las plantillas de Omnisend incluyen CSS en línea automáticamente.
Mantén el CSS simple:
Evita abreviaturas (
#000→ usa#000000)Evita declaraciones compuestas (
font:#000 12px Arial→ separa en propiedades individuales)Evita selectores complejos (descendientes, hijos, pseudo-elementos)
Imágenes, Botones y Enlaces
Agrega texto alternativo a todas las imágenes. La mayoría de los clientes de correo electrónico bloquean imágenes por defecto. El texto alternativo ayuda a comunicar tu mensaje incluso cuando las imágenes no se cargan.
Usa botones a prueba de fallos (codificados con HTML/CSS) en lugar de botones de imagen. Los clientes de correo electrónico pueden bloquear imágenes, haciendo que los botones basados en imágenes sean invisibles.
Aloja imágenes en un servidor confiable con URLs absolutas (
https://yourserver.com/image.jpg). Evita rutas relativas.
Móvil e Interactividad
Haz que los correos electrónicos sean amigables para móviles. Utiliza consultas de medios para aumentar el tamaño del texto en pantallas pequeñas y asegúrate de que los objetivos táctiles tengan al menos 46x46px.
Evita Flash y JavaScript. Usa GIFs animados si necesitas movimiento.
Pruebas
Siempre prueba antes de enviar:
Utiliza la función de vista previa de Omnisend para verificar las vistas de escritorio y móvil.
Envía correos electrónicos de prueba a ti mismo a través de Gmail, Outlook y Apple Mail.
Considera servicios de prueba de correo electrónico como Litmus para validación entre clientes.
Nota: HTML de Correo Electrónico difiere de HTML web; muchas propiedades CSS modernas no son compatibles con clientes de correo electrónico como Outlook.
Mejores prácticas de diseño de correo electrónico
Sigue estas pautas de diseño para mejorar la entregabilidad y la experiencia del usuario.
Diseño y Ancho
Ancho máximo: 600–800px (600px recomendado). Esto asegura que los correos electrónicos se muestren correctamente en los paneles de vista previa.
Utiliza diseños simples basados en cuadrícula. Evita elementos complejos que requieran flotantes o posicionamiento absoluto.
Imágenes y Texto
Asume que las imágenes serán bloqueadas. Diseña correos electrónicos que comuniquen tu mensaje incluso si las imágenes no se cargan.
Evita los correos electrónicos solo con imágenes. Una baja relación texto-imagen activa los filtros de spam. Las imágenes recortadas también se muestran de manera inconsistente en los clientes de correo electrónico.
Fuentes
Usa fuentes seguras para correo electrónico (Arial, Helvetica, Georgia, Times New Roman) o fuentes personalizadas ampliamente adoptadas. Consulta elguía de fuentes seguras para correo electrónico
Diseño Móvil
Verifica la legibilidad en pantallas pequeñas. ¿Pueden los usuarios leer tu correo electrónico a la distancia del brazo en un teléfono?
Optimiza los tamaños de las imágenes para evitar tiempos de carga lentos.
Haz que los enlaces sean amigables para los pulgares. Asegúrate de que los botones y enlaces sean fáciles de tocar.
💡Consejo: Más del 50% de los correos electrónicos se abren en móviles. Antes de enviar, previsualiza tu correo electrónico en el móvil y envía una campaña de prueba a ti mismo en tu teléfono. Verifica el tamaño del texto, el tamaño del objetivo táctil (botones/enlaces) y los tiempos de carga de las imágenes.
Preguntas Frecuentes
¿Por qué mi correo electrónico se ve roto en Outlook pero bien en Gmail?
Outlook utiliza el motor de renderizado de Microsoft Word, que tiene un soporte HTML/CSS muy limitado en comparación con el motor basado en navegador de Gmail. Para asegurar la compatibilidad:
Mantén el ancho del correo electrónico en 600px (máx. 650px).
Utiliza diseños simples basados en tablas (una sola columna).
Evita imágenes de fondo, border-radius, box-shadow y flexbox.
Utiliza CSS en línea solamente (sin bloques
<style>).Siempre prueba en bandejas de entrada reales de Outlook antes de enviar.
¿Puedo controlar cómo se ve mi correo electrónico en modo oscuro?
No. El modo oscuro es controlado por el cliente de correo electrónico y la configuración del dispositivo de tus suscriptores (Gmail, Apple Mail, Outlook, etc.), no por el remitente. Los clientes de correo electrónico deciden cómo aplicar la inversión de color. Aprende cómo previsualizar y optimizar correos electrónicos para el modo oscuro.
⚡ Mejores prácticas:
Utiliza la Vista Previa del Modo Oscuro de Omnisend antes de enviar (Vista previa → alternar "Vista previa en modo oscuro").
Diseña para temas claros y oscuros – prueba en modos de inversión total y parcial.
Optimiza logotipos e imágenes: Agrega fondos de color o contornos claros para evitar elementos que desaparezcan.
Mantén el texto simple: Texto negro sobre fondos blancos se invierte limpiamente.
Para recibir más asistencia, por favor contacta a nuestro galardonado Equipo de Soporte a través del chat en la aplicación o enviando un correo electrónico a [email protected].