Mejores prácticas de diseño de correos electrónicos en modo oscuro

Objetivos del artículo

Conoce el modo oscuro, un ajuste del dispositivo que algunos usuarios activan para oscurecer sus pantallas. Esta configuración afecta cómo se muestran los correos electrónicos. El modo oscuro es un ajuste para usuarios finales que se selecciona a nivel de dispositivo, y Klaviyo no tiene control directo sobre cómo se implementa el modo oscuro en cada dispositivo.

¿Por qué la gente usa el modo oscuro?

El modo oscuro se ha vuelto popular porque se cree que tiene diversos beneficios. Los usuarios pueden elegir el modo oscuro para:

• Minimiza la fatiga visual.
• Promueve hábitos de sueño más saludables.
• Prolonga la duración de la batería de un dispositivo.
• Mejora la accesibilidad.

Según Litmus, el número de personas que vieron correos electrónicos en modo oscuro aumentó de 28 % en 2021 a 34 % en 2022.

Modo oscuro y tu marca

El modo oscuro afecta la identidad de marca de tus correos electrónicos al ajustar el HTML que se usa para renderizarlo en la bandeja de entrada. Estos ajustes pueden ser tan pequeños como invertir los colores en correos electrónicos de solo texto (mientras se dejan los correos electrónicos HTML sin cambios) o tan importantes como ajustar todos los colores de tu plantilla de correo electrónico completamente diseñada.

Si no consideras el modo oscuro al diseñar los correos electrónicos, puede dar lugar a texto difícil de leer, colores que no se alinean con los estilos de la marca y más.

Considera el logotipo de SWAK Cosmetics. Sobre un fondo blanco, se ve genial.

Pero, cuando se ve en un dispositivo en modo oscuro, es imposible leerlo.

Observa los cambios en este encabezado de correo electrónico entre el modo claro y el modo oscuro. El color de fondo del correo electrónico, el color del texto y el color de la barra de enlaces se invirtieron.

Dispositivos y sistemas operativos que ofrecen el modo oscuro

Los detalles de los cambios del modo oscuro varían según los dispositivos y los sistemas operativos. Litmus ofrece un recurso sobre los dispositivos que ofrecen el modo oscuro y cómo tratan los correos electrónicos HTML.

En general, las bandejas de entrada se dividen en 1 de 2 categorías: las que hacen cambios mínimos o no hacen cambios, y las que invierten los colores del correo electrónico.

Cambios mínimos

Algunas bandejas de entrada, como Apple Mail para computadora, no hacen cambios directamente en el contenido del correo electrónico (a menos que incluyas metatags del modo oscuro). En esta bandeja de entrada, el único cambio que verás entre un mensaje en modo oscuro o claro es el color detrás de la información del remitente.

Inversión de color

Otras bandejas de entrada, como Outlook en computadora, invierten parcialmente tus colores. Esto significa que algunos colores más claros se cambian por tonos más oscuros, y algunos colores más oscuros se cambian por tonos más claros (p. ej., texto oscuro que antes estaba sobre un fondo claro). El resultado final es un correo electrónico notablemente más oscuro que el original.

Estrategias de mitigación

Hay varias estrategias para mantener tu imagen de marca mientras optimizas para el modo claro y el modo oscuro. Elige la opción que mejor se alinee con la capacidad de tu equipo y las necesidades de tu marca.

Desarrolla diseños teniendo en cuenta el modo claro y el modo oscuro

Si usas el editor de arrastrar y soltar de Klaviyo para enviar correos electrónicos, esta estrategia es la mejor. Desarrolla las plantillas de correo electrónico tomando en cuenta los cambios por los que pasarán en dispositivos en modo oscuro:

• Usa logotipos e imágenes que se vean genial en fondos claros y oscuros, como este para los productos horneados de Bola.
  

• O bien, agrega una sombra de color claro a un logotipo oscuro con un fondo transparente para que destaque en el modo oscuro.
  

• Como alternativa, usa archivos de imagen que incluyan colores de fondo, en lugar de usar un fondo transparente. Si eliges esta opción, asegúrate de que la imagen llene por completo el espacio que ocupa (por ejemplo, 600 px de ancho para imágenes de ancho completo).
  

• Usa texto siempre que sea posible, en lugar de usar imágenes que contengan texto. Esto permite una inversión total del color (además, es mejor para la accesibilidad).

Código personalizado: versiones oscura y clara

Si tienes un equipo de desarrolladores que puede programar de forma personalizada tus correos electrónicos HTML desde cero, puedes proporcionar CSS que detecte si quien lo ve está usando modo oscuro o claro y ajustar el diseño según corresponda. Esto puede anular ciertos valores predeterminados del modo oscuro en algunas bandejas de entrada, para que tengas más control.

Puedes usar @media (prefers-color-scheme: dark) y [data-ogsc] para segmentar específicamente a los usuarios del modo oscuro en el código de tus correos electrónicos. Obtén más información sobre qué clientes de correo electrónico admiten estas etiquetas y qué código usar en tus propios diseños.

Usa correos electrónicos solo con imágenes

No recomendamos usar correos electrónicos que solo incluyan imágenes por diversos motivos:

• Sin texto alternativo, tu correo electrónico puede parecer sospechoso para las bandejas de entrada y terminar en la carpeta de spam.
• Los correos electrónicos solo con imágenes no son una práctica recomendada de accesibilidad, ya que muchas personas y los lectores de pantalla tienen dificultades para leerlos.
• Usar correos electrónicos solo con imágenes para forzar una apariencia en modo claro significa eludir las preferencias de los suscriptores.

Sin embargo, muchas marcas usan esta estrategia, por lo que vale la pena mencionarla aquí. Los correos electrónicos solo con imágenes no dependen del HTML para los colores, las fuentes, el espaciado y más. Esto significa que no se pueden invertir, por lo que las bandejas de entrada mostrarán un correo electrónico que, por lo general, se alinea con el diseño original.

Recursos adicionales