Crear emails compatibles con el modo oscuro

El modo oscuro se impone cada vez con mayor frecuencia entre las preferencias de los usuarios; por ejemplo, el 34 % de los usuarios utilizó este modo para abrir emails en agosto de 2022 (Fuente: Litmus). Esta preferencia está impulsada por la comodidad que ofrece, la reducción de la fatiga visual o la mejora de la visibilidad del contenido, entre otros motivos adicionales. Muchos destinatarios de email optan por el modo oscuro debido a esos motivos. Por tanto, resulta fundamental que diseñe sus emails de modo tal que sean compatibles con el modo oscuro.

¿Qué es el modo oscuro?

El modo oscuro es una configuración de pantalla que se puede habilitar o deshabilitar en muchos dispositivos, aplicaciones y sistemas operativos. Cuando se activa, cambia el color de la interfaz de usuario.

En cuanto a los emails, el modo oscuro invierte los colores de la interfaz de los destinatarios del email, así como las opciones de formato del contenido del email. Esto significa que los destinatarios de email verán un fondo oscuro o un color invertido para los fondos no oscuros, así como un color de texto invertido para evitar que se mezcle con el fondo.
A continuación, se muestra un ejemplo de un email en modo claro y oscuro:

Dark_mode_email_light_version_en-us.jpg Dark_mode_email_dark_version_en-us.jpg

¿Qué plataformas de email son compatibles con el modo oscuro?

Según la plataforma de email que se utilice, los emails pueden mostrarse de manera diferente en el modo oscuro. Esto se debe a que las plataformas de email utilizan tres técnicas principales para habilitar el modo oscuro:

Plataforma de email Técnica utilizada
Apple Mail (MacOS)

Sin alteraciones

Su email no se verá afectado cuando se habilité el modo oscuro.

iPhone o iPad (iOS 13)
AOL
Yahoo Mail
Aplicación de Gmail para Android

Inversión parcial

Su email aparecerá con fondos más oscuros y texto más claro, mientras que las partes que ya están oscuras permanecerán oscuras.

Aplicación Outlook (iOS o Android)
Outlook 2019 (MacOS)
Outlook.com
Office 365 (MacOS)
Aplicación de Gmail para iOS

Inversión total

Su email invertirá los fondos claros a oscuros y los fondos oscuros existentes a claros.

Outlook 2019 (Windows)
Outlook 2021 (MacOS o Windows)
Office 365 (Windows)
Windows Mail

Optimizar los emails para el modo oscuro

En esta sección, encontrará información sobre cómo optimizar sus emails para el modo oscuro.

💡 Información relevante
Le sugerimos que al diseñar los emails lo haga de forma simple; en particular, en lo que respecta al texto del correo, es mejor usar la fuente color negro predeterminada.

Antes de comenzar a diseñar su email en Brevo, hay algunos pasos que puede dar por su cuenta con las imágenes, a fin de que sus emails sean compatibles con el modo oscuro:

Usar archivos PNG transparentes

Los formatos PNG transparentes son imágenes sin fondo y, a menudo, se marcan mediante un patrón de tablero de ajedrez. Le recomendamos que use este tipo de imagen para el logotipo de su empresa.

Dark_mode_email_png_model_en-us.png

El uso de imágenes transparentes le permite mantener un aspecto natural en los emails con fondos blancos y negros. Además, mejora la experiencia del usuario, ya que evita que se encuentre con fondos brillantes mientras lee emails en modo oscuro.
A continuación, se muestra un ejemplo de lo que se debe hacer y lo que no se debe hacer:

Dark_mode_email_example_transparent_PNG_en-us.jpg

Recortar imágenes de forma profesional

Si sus imágenes no tienen formato PNG (lo que significa que no tienen un fondo transparente), considere cómo se verán en modo oscuro. Por ejemplo, si el fondo de su imagen está recortado cerca del logotipo o del texto, su email no se verá profesional en modo oscuro, como puede constatar en el siguiente ejemplo. Para evitar esta situación, asegúrese de recortar la imagen con suficiente fondo o espacio en blanco al alrededor.

Dark_mode_email_crop_images_2_en-us.png

Añadir brillo, bordes o sombras a los formatos PNG oscuros

Añada brillo, bordes o sombras a las imágenes PNG oscuras para asegurarse de que se pueden ver en modo oscuro, más allá del color de fondo. En especial, si está utilizando un logotipo oscuro sobre un fondo blanco en modo claro, puede añadir algo de brillo, un borde o una sombra que coincida con el color de fondo. Hay herramientas en línea que le permiten añadir estas opciones. 
A continuación, se muestra un ejemplo de un texto con formato PNG con brillo:

Dark_mode_email_glow_image_dark_en-us.jpg

Añadir color de fondo a las imágenes

Si no quiere o no puede añadir brillo, borde o sombra, puede añadir un fondo de color desde el editor Drag and Drop de Brevo al diseñar su email. Añada un color de fondo al bloque de estilo y elija tonos más claros, como el gris, para garantizar la visibilidad.

Dark_mode_email_background-color_en-us.png

Dark_mode_email_background-color_result_en-us.png

Obtener una vista previa y probar el email en modo oscuro

Antes de enviar su email, le recomendamos que lo previsualice en diferentes plataformas de email. Esto se puede hacer directamente desde Brevo después de diseñar su email. Esta funcionalidad le permite comprobar cómo se verá el email, incluso en modo oscuro. Tenga en cuenta que las vistas previas no siempre son precisas, le recomendamos que se envíe un email de prueba si ha habilitado el modo oscuro en sus dispositivos. Para obtener más información, consulte nuestro artículo dedicado Generar una vista previa y probar la campaña de email.

Dark_mode_email_preview_en-us.png

🤔 ¿Tiene alguna duda?

Si tiene alguna pregunta, no dude en ponerse en contacto con nuestro equipo de asistencia mediante la creación de un ticket desde su cuenta. Si todavía no tiene una cuenta, puede ponerse en contacto con nosotros aquí.

Si necesitas ayuda con un proyecto usando Brevo, podemos ponerte en contacto con un socio certificado de Brevo.

💬 ¿Fue útil este artículo?

Usuarios a los que les pareció útil: 13 de 30