Prácticas recomendadas para el diseño de email en modo oscuro

Qué aprenderás

Descubre el modo oscuro, un ajuste del dispositivo que algunos usuarios activan para oscurecer sus pantallas. Este ajuste afecta a cómo se muestran los email. El modo oscuro es una configuración 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 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.

Dispositivos y sistemas operativos que ofrecen el modo oscuro

Los detalles de los cambios del modo oscuro varían entre dispositivos y sistemas operativos. Litmus ofrece un recurso sobre los dispositivos que ofrecen el 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, no hacen cambios directamente en el contenido de tu email (a menos que incluyas metatags 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 tu información de remitente.

Inversión de color

Otras bandejas de entrada, como Outlook en escritorio, invierten parcialmente tus 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.

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.

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.

Usa 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.

Sin embargo, muchas marcas usan esta estrategia, por lo que vale la pena mencionarla aquí. Los emails solo de imagen no dependen de 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 email que, por lo general, se ajusta a tu diseño original.

Recursos adicionales