Mejores prácticas de diseño de correo electrónico en modo oscuro
Qué aprenderás
Conozca el modo oscuro, un ajuste del dispositivo que algunos usuarios activan para oscurecer sus pantallas. Este ajuste influye en la forma en que se muestran los correos electrónicos. El modo oscuro es un ajuste del usuario final que se selecciona a nivel del 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 diversos beneficios. Los usuarios pueden elegir el modo oscuro para:
- Minimice la fatiga visual.
- Apoye unos hábitos de sueño más saludables.
- Prolongue la duración de la batería de un dispositivo.
- Mejorar la accesibilidad.
Según Litmus, el número de personas que ven los correos electrónicos en modo oscuro aumentó del 28% en 2021 al 34% en 2022.
El modo oscuro y su marca
El modo oscuro afecta a la marca de su correo electrónico ajustando el HTML utilizado para mostrarlo en la bandeja de entrada. Estos ajustes pueden ser tan pequeños como invertir los colores en los correos electrónicos de sólo texto (dejando sin cambios los correos electrónicos HTML), o tan sustanciales como ajustar cada color en su plantilla de correo electrónico completamente diseñada.
Si no tiene en cuenta el modo oscuro a la hora de diseñar sus correos electrónicos, el resultado puede ser un texto difícil de leer, colores que no se alinean con los estilos de su marca y mucho más.
Piense 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.
Observe 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 vínculos se invirtieron.
Dispositivos y sistemas operativos que ofrecen el 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 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 realizan 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 su correo electrónico directamente (a menos que incluya metaetiquetas de modo oscuro). En esta bandeja de entrada, el único cambio que verá 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 sus 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 notablemente más oscuro que el original.
Estrategias de mitigación
Existen varias estrategias para mantener su marca al tiempo que se optimiza para los modos claro y oscuro. Elija el que mejor se adapte a la capacidad de su equipo y a sus necesidades de marca.
Desarrolle diseños teniendo en cuenta el modo claro y oscuro
Si utiliza el editor de arrastrar y soltar de Klaviyo para enviar sus correos electrónicos, esta estrategia es la mejor. Desarrolle sus plantillas de correo electrónico teniendo en cuenta los cambios que sufrirán en los dispositivos con modo oscuro:
- Utilice logotipos e imágenes que queden bien sobre fondos claros y oscuros, como éste para los productos horneados de Bola.
- O añada una sombra de color claro a un logotipo oscuro con fondo transparente, para que destaque en modo oscuro.
- Como alternativa, utilice archivos de imagen que incluyan colores de fondo, en lugar de utilizar un fondo transparente. Si elige esta opción, asegúrese de que su imagen llena completamente el espacio que ocupa (por ejemplo, 600px de ancho para imágenes de ancho completo).
- Utilice texto siempre que sea posible, en lugar de utilizar imágenes que contengan texto. Esto permite la inversión a todo color (además, es mejor para la accesibilidad).
Código personalizado versiones oscura y clara
Si dispone de un equipo de desarrolladores que pueda personalizar el código HTML de sus correos electrónicos desde cero, puede 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, por lo que tendrá más control.
Cada bandeja de entrada, dispositivo y sistema operativo es diferente, por lo que deberá tener en cuenta una amplia variedad de destinatarios de correo electrónico a la hora de diseñar las versiones en modo oscuro y claro de un mensaje.
Puede utilizar @media (prefers-color-scheme: dark) y [data-ogsc] para dirigirse específicamente a los usuarios del modo oscuro en el código de su correo electrónico. Obtenga más información sobre qué clientes de correo electrónico admiten estas etiquetas y qué código utilizar en sus propios diseños.
Utilice correos electrónicos sólo con imágenes
No recomendamos el uso de correos electrónicos con sólo imágenes por varias razones:
- Sin texto alternativo, su correo electrónico puede parecer sospechoso en las bandejas de entrada y acabar en la carpeta de spam.
- Los correos electrónicos con sólo 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 correos electrónicos con sólo imágenes para forzar una apariencia de modo luminoso es eludir las preferencias de sus suscriptores.
Sin embargo, muchas marcas utilizan esta estrategia, por lo que merece la pena mencionarla aquí. Los correos electrónicos sólo con imágenes no dependen del HTML para los colores, las fuentes, el espaciado, etc. Esto significa que no pueden invertirse, por lo que las bandejas de entrada mostrarán un correo electrónico que, en general, se ajusta a su 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.
- Accesibilidad en correos electrónicos y formularios referencia de buenas prácticas
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íciese en el diseño de correos electrónicos