Prácticas recomendadas para el diseño de email en modo oscuro
Qué aprenderás
Conoce el modo oscuro, una configuración que los usuarios pueden activar en el dispositivo o en la aplicación de email para oscurecer la pantalla. Esta configuración influye en cómo se muestran los emails. Klaviyo no tiene control directo sobre cómo aplica el modo oscuro cada bandeja de entrada.
¿Por qué la gente usa el modo oscuro?
El modo oscuro se ha popularizado porque se cree que tiene una variedad de beneficios. Los usuarios pueden elegir el modo oscuro para:
- Minimiza la tensión en los ojos.
- Promueve hábitos de sueño más saludables.
- Prolongar la duración de la batería de un dispositivo.
- Mejorar la accesibilidad.
Según Litmus, el número de personas que visualizan emails en modo oscuro aumentó del 28 % en 2021 al 34 % en 2022.
Modo oscuro y tu marca
El modo oscuro afecta a la imagen de marca de tu email 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 emails solo de texto (mientras se dejan los emails HTML sin cambios) o tan importantes como ajustar todos los colores de tu plantilla de email totalmente diseñada.
Si no tienes en cuenta el modo oscuro al diseñar tus emails, puede dar lugar a texto difícil de leer, colores que no se ajustan a los estilos de tu marca y más.
Piensa en el logotipo de SWAK Cosmetics. Sobre un fondo blanco, queda genial.
Pero, al verlo en un dispositivo en modo oscuro, es imposible leerlo.
Fíjate en los cambios de este encabezado de email entre el modo claro y el modo oscuro. Se invirtieron el color de fondo del email, el color del texto y el color de la barra de enlaces.
Aplicaciones y dispositivos de Email que ofrecen modo oscuro
Los detalles de los cambios del modo oscuro varían según las aplicaciones de email, los dispositivos y los sistemas operativos. Litmus ofrece un recurso sobre los clientes de email que ofrecen modo oscuro y cómo tratan los emails 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 email.
Cambios mínimos
Algunas bandejas de entrada, como Apple Mail para escritorio, dejan los colores de los emails HTML con un diseño completo sin cambios, a menos que incluyas metatags de modo oscuro. Los emails de solo texto aún pueden cambiar en modo oscuro. Cuando el contenido del email se mantiene igual, solo la bandeja de entrada que lo rodea cambia de color.
Inversión de color
Otras bandejas de entrada, como Outlook.com, invierten parcialmente los colores. Esto significa que algunos colores más claros se sustituyen por tonos más oscuros, y algunos colores más oscuros se sustituyen por tonos más claros (p. ej., texto oscuro que antes estaba sobre un fondo claro). El resultado final es un email notablemente más oscuro que el original.
Algunas bandejas de entrada aplican una inversión completa de colores, cambiando tanto los fondos claros como los oscuros. Por ejemplo, Outlook 2021 para Windows puede convertir un fondo oscuro en claro.
Estrategias de mitigación
Hay varias estrategias para mantener tu marca mientras optimizas para el modo claro y el modo oscuro. Elige la que mejor se ajuste a la capacidad de tu equipo y a las necesidades de marca.
Desarrollar diseños teniendo en cuenta el modo claro y el modo oscuro
Si usas el editor de arrastrar y soltar de Klaviyo para enviar tus emails, esta estrategia es la mejor. Desarrolla tus plantillas de email teniendo en cuenta qué cambios experimentarán en los dispositivos con modo oscuro:
- Utiliza logotipos e imágenes que se vean bien en fondos claros y oscuros, como este para los productos horneados de Bola.
- O añade 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 (p. ej., 600px 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 tus emails HTML personalizados desde cero, puedes proporcionar CSS que detecte si un usuario está usando el modo oscuro o claro y ajuste el diseño en consecuencia. Esto puede anular algunos valores predeterminados del modo oscuro en algunas bandejas de entrada, por lo que tienes más control.
Cada bandeja de entrada, dispositivo y sistema operativo es diferente, por lo que tendrás que considerar una gran variedad de destinatarios de email al diseñar versiones en modo oscuro y modo claro de un email.
Puedes usar @media (prefers-color-scheme: dark) y [data-ogsc] para orientar específicamente a los usuarios del modo oscuro en el código de tu email. Obtén más información sobre qué clientes de email son compatibles con estas etiquetas y qué código usar en tus propios diseños.
Evita los emails de solo imágenes
No recomendamos usar emails solo con imágenes por diversos motivos:
- Sin texto alternativo, tu email puede parecer sospechoso para las bandejas de entrada y acabar en la carpeta de spam.
- Los emails de solo imágenes no son una práctica recomendada en cuanto a accesibilidad, ya que muchas personas y los lectores de pantalla tienen dificultades para leerlos.
- El uso de emails solo con imágenes para forzar una apariencia en modo claro está eludiendo las preferencias de tus suscriptores.
Muchas marcas usan emails compuestos solo por imágenes porque los archivos de imagen conservan los colores y las fuentes integrados en la imagen. Sin embargo, los emails compuestos solo por imágenes siguen dependiendo del HTML para el diseño, el espaciado y los fondos circundantes. La bandeja de entrada puede cambiar esos colores circundantes en el modo oscuro, por lo que este enfoque no garantiza que todo el email coincida con tu diseño original.
Prueba el email en modo claro y oscuro
Antes de enviar, comprueba que los logotipos, el texto y los enlaces sean legibles en ambos modos. Las pruebas de bandeja de entrada están disponibles para cuentas de pago de Klaviyo e incluyen 100 pruebas por usuario al mes. Cada vista previa de bandeja de entrada que generes cuenta como 1 prueba.
- En el editor de email de arrastrar y soltar, haz clic en Previsualizar y, a continuación, selecciona Pruebas de bandeja de entrada.
- Selecciona un perfil para previsualizar. Para un email que utiliza datos de eventos, selecciona el evento correspondiente para poder comprobar el contenido personalizado.
- En Seleccionar pruebas de bandeja de entrada, expande Modo oscuro y elige las bandejas de entrada que usen tus suscriptores. Selecciona versiones de modo claro para compararlas y elimina las bandejas de entrada preseleccionadas que no necesites.
- Haz clic en Realizar prueba. Cuando las vistas previas estén listas, haz clic en cada mosaico para inspeccionarlo.
- Haz clic en Listo para volver al editor. Haz los cambios de diseño necesarios y, a continuación, ejecuta nuevas pruebas para comprobar el email actualizado.
Consulta más información sobre el uso de las pruebas de bandeja de entrada. También puedes enviar un email de prueba a las bandejas de entrada a las que tienes acceso y compararlo en modo claro y oscuro.
Recursos adicionales
- Guide to the email template editor
Learn about Klaviyo’s drag-and-drop email template editor, including how to use template styles and configure each block type.
- Accessibility in emails and forms best practice reference
Learn how to make your emails and sign-up forms more accessible. When designing your emails and signup forms, you’ll want to make sure your designs are accessible to all of your recipients.
- Get started with email design