Mejores prácticas de diseño de correo electrónico en modo oscuro
Objetivos de aprendizaje
Infórmate sobre el modo oscuro, un ajuste del dispositivo que algunos usuarios activan para oscurecer sus pantallas. Este ajuste afecta a cómo se muestra el correo electrónico. El modo oscuro es un ajuste del usuario final 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 utiliza el modo oscuro?
El modo oscuro se ha hecho popular porque se cree que tiene diversas ventajas. Los usuarios pueden elegir el modo oscuro para:
- Minimiza la fatiga visual.
- equipo de asistencia hábitos de sueño más saludables.
- Alarga la duración de la batería de un dispositivo.
- Mejorar la accesibilidad.
Según Litmus, el número de personas que ven el correo electrónico en modo oscuro aumentó de 28% en 2021 a 34% en 2022.
El modo oscuro y tu construcción de marca
El modo oscuro afecta a la construcción de tu correo electrónico de marca ajustando el HTML utilizado para mostrarlo en la bandeja de entrada. Estos ajustes pueden ser tan pequeños como invertir los colores en el correo electrónico sólo de texto (dejando inalterado el correo electrónico HTML), o tan sustanciales como ajustar cada color en tus plantillas de correo electrónico totalmente diseñadas.
Si no tienes en cuenta el modo oscuro al diseñar tu correo electrónico, el resultado puede ser un texto difícil de leer, colores que no se alinean con los estilos de tu marca y mucho más.
Piensa en el logotipo de SWAK Cosmetics. Sobre un fondo blanco, queda muy bien.
Pero cuando se ve en un dispositivo en modo oscuro, es imposible de leer.
Observa los cambios en la cabecera de este correo electrónico entre el modo claro y el oscuro. El color de fondo del correo electrónico, el color del texto y el color de la barra de enlaces estaban invertidos.
Dispositivos y sistemas operativos que ofrecen modo oscuro
Los detalles de los cambios en el modo oscuro varían según el dispositivo y el sistema operativo. Litmus ofrece un recurso sobre los dispositivos que ofrecen modo oscuro y cómo tratan el correo electrónico HTML.
En general, las bandejas de entrada entran en 1 de 2 categorías: las que hacen cambios mínimos o ninguno, y las que invierten los colores del correo electrónico.
Cambios mínimos
Algunas bandejas de entrada, como Apple Mail para escritorio, no realizan cambios en el contenido de tu correo electrónico directamente (a menos que incluyas metaetiquetas de 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 del color
Otras bandejas de entrada, como Outlook en escritorio, 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 otros más claros (por ejemplo, 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 construcción de marca al tiempo que optimizas el modo claro y oscuro. Elige el que mejor se adapte a la capacidad de tu equipo y a las necesidades de construcción de marca.
Desarrolla diseños teniendo en cuenta el modo claro y oscuro
Si utilizas el editor de arrastrar y soltar de Klaviyopara enviar tu correo electrónico, esta estrategia es la mejor. Desarrolla tus plantillas de correo electrónico teniendo en cuenta los cambios que sufrirán en los dispositivos con modo oscuro:
- Utiliza logotipos e imágenes que queden bien sobre fondos claros y oscuros, como éste para los productos de panadería de Bola.
- O añade una sombra de color claro a un logotipo oscuro con fondo transparente, para que destaque en modo oscuro.
- Alternativamente, utiliza archivos de imagen que incluyan colores de fondo, en lugar de utilizar un fondo transparente. Si eliges esta opción, asegúrate de que tu imagen llena completamente el espacio que ocupa (por ejemplo, 600px de ancho para imágenes de ancho completo).
- Utiliza texto siempre que sea posible, en lugar de utilizar imágenes que contengan texto. Esto permite invertir todo el color (además, es mejor para la accesibilidad).
Código personalizado versiones oscura y clara
Si dispones de un equipo de desarrolladores que pueda personalizar el código HTML de tu correo electrónico desde cero, puedes proporcionar CSS que detecte si un espectador está utilizando el modo oscuro o claro y ajustar el diseño en consecuencia. Esto puede anular ciertos valores predeterminados del modo oscuro en algunas bandejas de entrada, para que tengas más control.
Cada bandeja de entrada, dispositivo y sistema operativo es diferente, por lo que tendrás que tener en cuenta una amplia variedad de destinatarios de correo electrónico al diseñar las versiones en modo oscuro y claro de un correo electrónico.
Puedes utilizar @media (prefers-color-scheme: dark) y [datos-ogsc] para dirigirte específicamente a los usuarios del modo oscuro en el código de tu correo electrónico. Obtén más información sobre qué clientes de correo electrónico equipo de asistencia estas etiqueta y qué código utilizar en tus propios diseños.
Utilizar correo electrónico sólo con imagen
No recomendamos utilizar correo electrónico sólo con imágenes por varias razones:
- Sin texto alternativo, tu correo electrónico puede parecer sospechoso en las bandejas de entrada y acabar en la carpeta de spam.
- Los correos electrónicos con imágenes no son una buena práctica de accesibilidad, ya que son difíciles de leer para muchas personas y lectores de pantalla.
- Utilizar correo electrónico con imagen para forzar una apariencia de modo luminoso es eludir las preferencias de tu suscriptor.
Sin embargo, muchas marcas utilizan esta estrategia, por lo que merece la pena mencionarla aquí. El correo electrónico con imagen no depende del HTML para los colores, fuentes, espaciado y demás. Esto significa que no pueden invertirse, por lo que las bandejas de entrada mostrarán un correo electrónico que generalmente se ajusta a tu diseño original.
Recursos adicionales
- Guía del editor de plantillas de correo electrónico
Descubre el editor de plantillas de correo electrónico de Klaviyo, que funciona arrastrando y soltando elementos. También aprenderás a usar diferentes estilos de plantilla y a configurar cada tipo de bloque.
- Prácticas recomendadas para la accesibilidad en correos electrónicos y formularios
Aprende a hacer más accesibles tu correo electrónico y tu formulario de registro. Al diseñar tu correo electrónico y formulario de registro, querrás asegurarte de que tus diseños sean accesibles para todos tus destinatarios.
- Iníciate en el diseño de correo electrónico