¿Cómo afecta el aumento del modo oscuro a sus plantillas de marketing por correo electrónico? (+ ejemplos)

Todas las mañanas, cuando me despierto, hago lo mismo: tomo mi teléfono para desplazarme por un mar de correos electrónicos.

En el pasado, fui recibido con la cegadora luz blanca de Gmail y, aunque me ayudó a despertar, mis ojos no necesariamente me agradecían. Entonces, un día, todo esto cambió. Noté el “modo oscuro” disponible en la aplicación Gmail y, de repente, mis ojos se pudieron relajar.

Ya no necesitaban adaptarse al brillo intenso de la aplicación tan temprano en la mañana, y yo estaba revisando mis correos electrónicos más rápido que nunca. Sin embargo, al mismo tiempo, rápidamente me di cuenta de que el modo oscuro presentaba algunos problemas de experiencia de usuario únicos, problemas para los que los remitentes no habían optimizado.

Como si la optimización para diferentes clientes de correo electrónico no presentara ya un desafío. ¡Ahora, teníamos que resolver el modo oscuro!

Antes de sumergirme en el impacto general que tiene el modo oscuro en nuestros correos electrónicos, demos un paso atrás y hablemos de qué es exactamente.

¿Qué es el modo oscuro?

En resumen, el modo oscuro invierte el esquema de color de las interfaces de usuario de claro a oscuro y, curiosamente, el modo oscuro en realidad es anterior al modo claro en unas pocas décadas.

Algunas de las primeras computadoras domésticas, los monitores CRT (tubo de rayos catódicos) monocromáticos, mostraban texto verdoso en una pantalla negra.

Las máquinas procesadoras de texto, o las computadoras dedicadas como editores de texto, también permitían escribir texto en blanco sobre fondo negro.

No fue hasta los años 80 que empresas como Xerox y CPT Corporation (que interrumpieron sus operaciones a mediados de los 90) fabricaron computadoras de texto que tenían una pantalla blanca con texto negro para reproducir el aspecto de la tinta en el papel.

Pero el auge del modo oscuro en la actualidad todavía está envuelto en un misterio.

Andy Clarke, fundador del estudio de diseño web Stuff & Nonsense cree que se originó en personas que a menudo trabajan en centros de control. “Debido a que están mirando monitores muy grandes, una interfaz muy blanca y brillante básicamente iluminaría el techo”.

Pero muchos están de acuerdo en que es probable que sus orígenes se encuentren en la codificación. “Los desarrolladores técnicos han estado usando temas oscuros en sus editores de código desde que tengo memoria”, dice Clarke.

Los editores de código más populares, como el código de Visual Studio, ofrecen un modo o tema oscuro. Como desarrollador que usa el editor de código Sublime, siempre he usado el modo oscuro para mejorar la legibilidad y reducir la fatiga visual.

sublime-vista previa

“Se cuenta que más del 70% de los ingenieros de software codifican en un entorno de desarrollo de temas oscuros”. Exploro por qué este es el caso en la siguiente sección, pero independientemente de lo que provocó esta tendencia, es muy popular.

Aparte de Gmail, Facebook, Twitter, Instagram, Gmail y el iOS de Apple han introducido modos oscuros en los últimos 12 meses y no muestra signos de desaceleración.

¿Cuáles son los beneficios del modo oscuro?

Como se mencionó anteriormente, la luz blanca brillante y la luz azul a menudo pueden contribuir a la fatiga visual, que puede ir acompañada de dolores de cabeza y otras molestias en los usuarios. El modo oscuro puede ayudar a disminuir esto, especialmente cuando mira su dispositivo en condiciones de iluminación más oscura (durante la noche, habitaciones con poca luz).

Algunos también encuentran que el modo oscuro mejora la legibilidad, razón por la cual muchas herramientas, como Slack, Facebook Messenger, Adobe Suite lo ha adoptado.

El modo oscuro también reduce el brillo de la pantalla, lo que puede ayudarlo a ahorrar batería, especialmente si lo usa con más frecuencia que el modo claro.

Por último, algunas personas simplemente prefieren el modo oscuro en general, ya sea por las razones anteriores o porque la paleta es más su estilo.

Cómo afecta el modo oscuro a las plantillas de correo electrónico (y cómo optimizarlo)

En términos de correo electrónico, la mayoría de las aplicaciones de correo electrónico suelen tener un tema con un fondo blanco y texto gris oscuro / negro.

Cuando el modo oscuro está activado, la aplicación buscará instancias de estilos de fondo o bgcolor en el código del correo electrónico y los cambiará a un gris oscuro. El color de la fuente también se apunta y cambia de un color hexadecimal más oscuro a blanco.

correo electrónico - modo ligerocorreo electrónico - modo oscuro

El modo oscuro todavía es relativamente nuevo y no es compatible con todos los clientes de correo electrónico y probablemente nunca lo será, o no lo será durante mucho tiempo.

Esto se debe a que mantener los motores de renderizado utilizados para analizar los correos electrónicos es una tarea enorme. Por otro lado, algunas empresas simplemente no creen que sea necesario actualizar sus motores de renderizado si nada está realmente roto.

Actualmente, el modo oscuro solo está disponible para Gmail en Android 10 – 13 e iOS 13+, aunque muchos dispositivos ahora tienen opciones integradas para activar el modo oscuro en su teléfono, lo que no solo cambia la interfaz de color de su teléfono sino también sus navegadores y otros aplicaciones también.

Dejando a un lado Gmail, aquí hay una breve lista de quién está presionando el modo oscuro en su aplicación de correo electrónico:

Aplicaciones móviles

Clientes de escritorio

  • Correo de Apple
  • Outlook 2019 (Mac OS)
  • Outlook 2019 (Windows)

Clientes Web

Incluso si la gran mayoría de los clientes de correo electrónico se están quedando atrás, es probable que un gran porcentaje de sus suscriptores vean sus correos electrónicos en modo oscuro, especialmente si Gmail es el proveedor de correo electrónico más grande del mundo.

Si su correo electrónico no está optimizado para él, podría estar perdiendo clics y participación general.

¿Quién querría leer un correo electrónico que es difícil o imposible de ver para ellos, verdad?

La optimización de sus correos electrónicos para el modo oscuro es imprescindible.

Para ayudarlo a adelantarse a los problemas que puede esperar, estos son algunos de los más comunes con los que me he encontrado y lo que puede hacer para solucionarlos o evitar que sucedan.

Problema: fondos de color inconexos

A menudo, los correos electrónicos de ventas de comercio electrónico se crean exclusivamente con diferentes imágenes y pancartas, destacando los diferentes artículos que miró, cupones y promociones en curso.

Al unirlos, puede verse muy bien contra un fondo blanco predeterminado, pero en los modos oscuros, termina pareciendo inconexo.

El gris oscuro reemplazará cualquier área blanca, pero las imágenes JPG con fondos blancos permanecerán como están.

west-elm - correo electrónico móvil - modo oscuro

En el correo electrónico de West Elm anterior, podemos ver la gran brecha entre el logotipo y el enlace “encontrar una tienda”. Y la imagen del banner tiene más sangría que las otras secciones.

Este problema también puede dar lugar a secciones invisibles si se utilizan imágenes transparentes con texto.

En el ejemplo de Peloton a continuación, el texto de testimonio en blanco, que era una imagen blanca sobre un fondo negro, aparece invisible en el modo oscuro.

peloton - correo electrónico móvil - modo ligeropeloton - correo electrónico móvil - modo oscuro

Esto puede hacer que sus correos electrónicos se vean rotos y, en general, poco profesionales, lo que se refleja negativamente en su marca.

Solución:

Si tiende a crear correos electrónicos de esta manera, asegúrese de que cada sección de imagen que cree abarque todo el ancho del correo electrónico y llene los posibles huecos con piezas de imagen en blanco adicionales. Esto mantendrá la coherencia visual del correo electrónico en los esquemas de colores claros y oscuros.

Además, evite las imágenes de texto transparentes de color gris oscuro o blanco. Estos no se traducen bien cuando se convierten a fondos oscuros. En su lugar, renderice la sección completa con el fondo de color como una imagen completa.

Problema: logotipos invisibles o difíciles de leer

En promedio, alrededor del 28% de las empresas utilizan colores negros o en escala de grises en sus logotipos. Tan sofisticado como es un logotipo negro, es el modo menos oscuro.

Echar un vistazo:

medio - correo electrónico móvilcorreo electrónico de reddit - modo oscuro

En el caso de Medium, su logotipo es difícil de leer contra el gris, pero para el correo electrónico de Reddit, ¡la mitad del logotipo casi desaparece por completo!

Lo último que desea es que alguien lea su correo electrónico en modo oscuro, solo para que no vea el elemento de marca que le permite saber quién lo envió.

Solución:

Este problema se observa con las imágenes PNG, que tienen fondos transparentes. Esto significa que pueden tomar el color de cualquier imagen detrás de ellos.

Dado que la mayoría de los logotipos son de un color diferente al blanco, tienden a funcionar bien con fondos blancos, pero no todos funcionan con fondos oscuros.

Para solucionar esto, lo mejor es guardar los archivos como imágenes JPG con un fondo blanco o con un contorno blanco alrededor de las letras / símbolos incluidos en su logotipo. Si su logotipo no está sobre un fondo blanco, cambie el color de fondo del logotipo para que coincida con el que se usa en el correo electrónico.

Al hacer esto, el logotipo no se verá diferente en el escritorio, pero se mostrará de manera legible en el móvil.

Hackear una solución (* necesitará la ayuda de un desarrollador)

Si las ideas anteriores parecen demasiado laboriosas, hay CSS adicional que puede agregar a sus correos electrónicos para ayudarlo a tener más control sobre cómo se muestran sus correos electrónicos cuando el modo oscuro está activo.

Litmus hizo un gran trabajo al describir las líneas de código que puede usar y qué tan efectivas son en diferentes clientes, por lo que le recomiendo la mayoría de los detalles allí.

Un ejemplo que sugieren es usar la consulta de medios CSS de tema oscuro (que puede detectar cuando un usuario está viendo en modo oscuro) para mostrar estilos específicos que son diferentes del modo claro.

Tenga en cuenta que este código no es una solución directa de copiar y pegar y solo se usa como inspiración para lo que podría apuntar.

CSS de ejemplo:

@media (prefiere-esquema-de-color: oscuro) {

/ * Muestra contenido solo en modo oscuro, como imágenes * /

.dark-img {pantalla: bloque! importante; ancho: auto! importante;}

/ * Oculta contenido solo en modo claro, como imágenes * /

.light-img {pantalla: ninguna; pantalla: ninguna! importante; }

/ * Color de fondo del modo oscuro personalizado * /

.darkmode {color de fondo: # 272623! importante; }

/ * Colores de fuente personalizados en modo oscuro * /

h1, h2, p, span, a, b {color: #ffffff! importante; }

/ * Color de enlace de texto en modo oscuro personalizado * /

.link {color: # 91ADD4! important; }

}

¡Pero en caso de duda, prueba, prueba, prueba!

Los clientes de correo electrónico cambian constantemente, por lo que ya sea para el modo oscuro o para otra cosa, es importante hacer que probar sus correos electrónicos sea una tarea de rutina antes de enviarlos. Esto ahora debería incluir ver su correo electrónico en modo oscuro y texto sin formato en Outlook y Gmail.

Puedes hacerlo enviando versiones de prueba de tu correo electrónico a cada uno de estos clientes y visualizándolos, utilizando una herramienta de prueba de correo electrónico como Litmus o probando clientes de correo electrónico dentro de tu herramienta de marketing (la prueba de correo electrónico de HubSpot funciona con Litmus).

Le recomiendo encarecidamente que haga un esfuerzo consciente para que sus suscriptores optimicen el modo oscuro. Le mostrará respeto y reconocerá su decisión de ver sus correos electrónicos de la manera que ellos quieren y que está dedicado a brindarles la mejor experiencia posible.

El modo oscuro ya ha sido adoptado por tantas plataformas, que es probable que esté aquí para quedarse, por lo que es mejor comenzar a descubrir lo que necesita hacer para asegurarse de que su marca esté lista para adaptarse.