Todas las colecciones
Editor de plantillas
Contenidos
¿Cómo optimizar tus plantillas para los dispositivos que usan Modo Oscuro?
¿Cómo optimizar tus plantillas para los dispositivos que usan Modo Oscuro?

Conoce qué es el modo oscuro y cómo puedes evitar que afecte negativamente tus plantillas de Email.

Actualizado hace más de una semana

¿Qué es el modo oscuro?

El modo o tema oscuro es una funcionalidad con la que ahora cuentan los teléfonos móviles y las computadoras. Al estar activa los textos se ven de color blanco sobre fondos oscuros y no al revés.

Esta funcionalidad tiene dos beneficios claves: ahorrar batería en dispositivos móviles y evitar el agotamiento de la vista, ya que la pantalla no utiliza tanto brillo.

Comparación entre el modo claro y el modo oscuro en la app de Gmail para Android

Con el aumento en popularidad del modo oscuro es importante que tengamos consideraciones a la hora de diseñar las plantillas que enviamos en nuestras campañas de email marketing.

Algunos consejos para que tus plantillas sean compatibles con el modo oscuro:

  • Ten en cuenta los distintos clientes de correo

Diversos clientes de correo han empezado a ofrecer el modo oscuro a sus usuarios. Por ejemplo, Apple mail y Outlook 2019 te permiten usar modo oscuro en tus computadoras. También puedes activar esta funcionalidad en las aplicaciones de Gmail y Outlook para Android.

No olvides que cada cliente de correo renderiza las plantillas con ligeras diferencias entre sí. Algunos clientes de correo mostrarán la plantilla exactamente de la misma manera sin importar si el modo oscuro se encuentra activo o no, otros reconocerán una plantilla con fondo claro y lo cambiarán a otros colores de la paleta pero siempre más oscuro que el original. Hay incluso casos donde el cliente de correo procesará una plantilla diseñada para verse en modo oscuro y le colocará fondo claro.

Todo esto hace que diseñar plantillas para hacerlas compatibles con el modo oscuro sea confuso. Este es un resumen de los clientes y su nivel de soporte hoy:

-Modo oscuro completo: Gmail para iOS, Outlook 2019 para Windows.

-Modo oscuro parcial: Gmail para Android, Outlook para Android, Outlook para iOS, Outlook 2019 para macOS, Outlook.com.

-Sin modo oscuro: iOS Mail, Apple Mail.

  • Utiliza imágenes con fondo transparente

Para que tu plantilla sea compatible con el modo oscuro siempre debes usar imágenes con fondo transparente. De esa manera, cuando el color de fondo cambie de blanco a negro, tus emails mantendrán una estética natural.

Si una imagen lleva fondo blanco, al momento del cambio de fondo el espacio en blanco no se modificará, esto no importa en el modo claro, pero en el modo oscuro le dará un aspecto poco estético a tu diseño.

Fíjate cómo esta plantilla se ve perfecta en modo claro, pero se estropea la estética del encabezado en el modo oscuro porque el logo y los iconos llevan fondo blanco:

  • Delinea el texto negro utilizando el color blanco

Si existe algún texto de color negro en tu plantilla de correo este no será visible cuando se utilice el modo oscuro. Para evitar esto puedes resaltar el texto con color blanco para evitar que desaparezca cuando el fondo se convierta a negro.

En este ejemplo de TripAdvisor, el logo desaparece por completo al visualizarlo en modo oscuro. Esto se podría evitar fácilmente al delinear el texto con color blanco.

  • Haz envíos de prueba de tus plantillas en modo oscuro

Una vez que hayas terminado tu diseño recuerda probarlo tanto en modo claro como en modo oscuro, así sabrás como se verá el mensaje en cada uno de los escenarios.

Incluso, si tienes la posibilidad, envíalo a distintas bandejas y ábrelos desde distintas aplicaciones o clientes de correo electrónico (realizar un envío de prueba desde WoowUp es muy fácil y en este artículo te explicamos cómo hacerlo):

  • Utiliza texto plano

Siempre puedes apostar a la opción segura utilizando texto plano. Dado que sólo estás utilizando texto simple no tienes que preocuparte de que tu diseño se renderice de manera incorrecta.

Las plantillas con texto plano son texto negro sobre fondo blanco por lo que son fáciles de invertir en modo oscuro. Es preferible contar con un diseño simple, con un mensaje contundente, que un diseño cargado que pierda todo el impacto y legibilidad al visualizarse en modo oscuro.


Deseas conocer cómo editar los contenidos de texto en tu plantilla? en el siguiente artículo te explicamos cómo: ¿Cómo añadir contenido de Texto?

¿Ha quedado contestada tu pregunta?