Obtener una vista preliminar y optimizar cómo aparecerán tus diseños de correo en el modo oscuro

Muchos clientes de correo electrónico tienen una configuración de modo oscuro, que puede generar inconsistencias con la manera en que los correos electrónicos de marketing aparecen en clientes con una apariencia más clara activada.

Obtén una vista preliminar de la apariencia de tu correo electrónico en los métodos oscuros de clientes específicos

Para ver cómo lucirá tu correo electrónico cuando lo abre un contacto en un navegador o un cliente con modo oscuro activado:

• En tu cuenta de HubSpot, dirígete a Marketing > Correos de marketing.
• Haz clic en el nombre de un borrador de correo existente.
• En la parte superior derecha del editor de correo electrónico, haz clic en el menú desplegable Acciones y luego haz clic en Vista preliminar.
• En la parte superior de la pantalla de vista preliminar, haz clic en Clientes.
• En el Modo oscuro, selecciona la casilla de comprobación junto a cualquier cliente que desees obtener una vista preliminar.

• En la parte superior derecha, haz clic en Probar mi correo ahora.

Las mejores prácticas al diseñar correos electrónicos para el modo oscuro

Cuando observes la vista preliminar de tu correo electrónico con diferentes clientes de modo oscuro, ten en cuenta que es posible que cada cliente vea tu correo electrónico de forma diferente. Por ejemplo, si tus contactos abren tu correo electrónico usando Apple Mail, aparecerá exactamente igual ya sea que hayan habilitado el modo oscuro o no. Mientras que si un contacto habilita el modo oscuro en aplicaciones como Gmail o Outlook en Windows, es posible que notes discrepancias más drásticas en el estilo de tu correo electrónico, como los colores de fondo invertidos.

Para confirmar que tu estilo de correo electrónico sea consistente entre los clientes, revisa los siguientes consejos.

Usa imágenes que aparezcan claramente en fondo claro y oscuro

Convierte tus imágenes en archivos PNG antes de cargar y agregar imágenes a tus correos electrónicos, lo cual ayuda a asegurar que se muestren en clientes de correo electrónico que inviertan automáticamente el color de fondo de los correos electrónicos en el modo oscuro. Si tu imagen tiene texto, como un logotipo, también puedes agregar un esquema translúcido alrededor del texto para que destaquen.

Opta por colores accesibles en la web

Diseñar el contenido de tu correo electrónico para que sea accesible es importante, independientemente del cliente de correo electrónico que usa tu destinatario. Seguir los estándares de accesibilidad, como comprobar el contraste del color de tu texto, también ayudará a tus correos electrónicos a que aparezcan correctamente en el modo oscuro. Más información sobre los colores accesibles en la web en el blog de HubSpot.

Especificar una media query para el estilo de modo oscuro en iOS

Varios clientes de correo electrónico, incluidos Apple Mail y Outlook.com, ofrecen asistencia técnica limitada para detectar y agregar estilo personalizado a través de una media query. Si utilizas el editor de correo electrónico clásico actualizado y dispones de recursos de desarrollador para realizar cambios CSS en tus correos electrónicos, puedes añadir una consulta de medios con la función prefers-color-scheme media para configurar cómo se verán las imágenes y el texto en modo oscuro y en modo claro