El modo oscuro comenzó más como una novedad que como un estándar. Desde el lanzamiento del modo oscuro en dispositivos móviles en 2019, se ha logrado una adopción impresionantemente rápida.
De hecho, la adopción del modo oscuro ha sido tan rápida que, en abril de 2019, una encuesta realizada por un desarrollador de modo oscuro informó que el 82,7% de los usuarios preferían el modo oscuro. En 2020, los datos de una encuesta de Android Authority revelaron que el 91,8% de sus lectores utilizan el modo oscuro hasta cierto punto.
Es posible que las cifras de encuestas autoinformadas no sean exactas, pero la conclusión es que una parte de sus suscriptores de correo electrónico abrirán sus correos electrónicos en modo oscuro.
Eso podría causar problemas en su marketing por correo electrónico si sus correos electrónicos no están diseñados para ser compatibles con el modo oscuro. Afortunadamente, existen formas de asegurarse de que sus correos electrónicos se muestren correctamente en modo oscuro.
Analizaremos cómo diseñar correos electrónicos para el modo oscuro, comenzando con los conceptos básicos del correo electrónico en modo oscuro.
¿Qué es el modo oscuro?
El modo oscuro es una combinación de colores invertida que muestra iconos, texto y ciertos elementos de la interfaz de usuario en colores claros sobre un fondo oscuro. Los sistemas operativos más comunes ofrecen modo oscuro y muchas aplicaciones también tienen configuraciones de modo oscuro que se pueden habilitar fuera de la configuración de modo oscuro del sistema operativo.
Mucha gente prefiere el modo oscuro porque reduce la exposición a la luz azul y puede reducir la fatiga visual.
Cada desarrollador de aplicaciones y sistemas operativos tiene su propio método para crear la combinación de colores del modo oscuro, lo cual es importante, por lo que revisaremos esto en breve.
Pero, ¿qué posibilidades hay de que tus correos electrónicos se abran en modo oscuro?
Es complicado obtener datos precisos sobre cuántos correos electrónicos se abren en modo oscuro, ya que sólo los clientes de correo electrónico basados en WebKit informan las aperturas de correo electrónico en modo oscuro.
Sin embargo, un estudio de 100.000 aperturas de correos electrónicos encontró que el 12% de los correos electrónicos se abrieron en modo oscuro.
Los datos de Email On Acid muestran que entre el 5,8% y el 11,5% de los correos electrónicos se abren en modo oscuro.
Es probable que estas cifras también estén subestimadas.
Es más fácil detectar las aperturas de correo electrónico en modo oscuro en dispositivos Apple, donde los clientes de correo electrónico basados en WebKit son más comunes. Pero, como informó Android Authority, los usuarios de Android tienden a preferir el modo oscuro.
Esto significa que la proporción de aperturas en modo oscuro es probablemente muy alta en clientes de correo electrónico donde no se informa si el correo electrónico se abre o no en modo oscuro. Se estima que cerca del 25% de los correos electrónicos se abren en modo oscuro, cuando se tienen en cuenta clientes de correo electrónico que no son WebKit.
Todos estos clientes de correo electrónico ofrecen configuraciones de modo oscuro:
Apple Mail (iPhone, iPad y versiones de escritorio)Gmail (versiones de iOS y Android)Outlook (versiones de iOS, Android y de escritorio)Outlook.comYahoo! correoAolHey.com
Incluso si su base de suscriptores se inclina en gran medida hacia un cliente de correo electrónico u otro, no está evitando el modo oscuro.
Entonces, sí, vale la pena diseñar tus correos electrónicos para el modo claro y oscuro.
¿Cómo afecta el modo oscuro al diseño del correo electrónico?
Como mencionamos anteriormente, cada sistema operativo y cliente de correo electrónico invierte los colores para el modo oscuro de manera diferente. Esto hace que sea difícil predecir exactamente cómo se verán sus correos electrónicos para cada suscriptor:
La buena noticia es que todos estos algoritmos de inversión del modo oscuro se dividen en una de dos categorías amplias: inversión de color parcial e inversión de color completo.
Inversión de color parcial
La inversión de color parcial cambia áreas con fondos claros y texto u objetos oscuros a fondos oscuros con texto u objetos claros. Sin embargo, las áreas que ya tienen un fondo oscuro se dejan como están.
Este método tiende a ser el menos invasivo. A menudo, los diseños de correo electrónico en modo claro serán legibles en el modo oscuro de conversión parcial de color.
Obviamente, este no es siempre el caso, pero el modo oscuro de inversión parcial de color cambia menos colores y es menos probable que los correos electrónicos se muestren incorrectamente.
Invertido a todo color
La inversión a todo color básicamente simplemente cambia todos los colores claros a colores oscuros y los colores oscuros a colores claros. Este método es el que tiene más probabilidades de provocar que sus correos electrónicos se muestren incorrectamente. Afortunadamente, el modo oscuro invertido a todo color es menos común que el modo invertido de color parcial.
Cambiar fondos oscuros a fondos claros anula el propósito del modo oscuro. Por lo tanto, las aplicaciones y los clientes de correo electrónico que utilizan la inversión de color completa suelen intentar realizar cambios de color más sutiles.
Aun así, la inversión a todo color cambia todos (o al menos la mayoría) de los colores de su correo electrónico.
Además, algunos de los clientes de correo electrónico más populares, como iOS Gmail, utilizan el modo oscuro invertido a todo color. Eso significa que la ruta más segura es diseñar sus correos electrónicos para que sean manejados por inversión a todo color, y se mostrarán bien en modo oscuro con inversión parcial de color.
Cómo diseñar correos electrónicos amigables en modo oscuro
El gran desafío al diseñar correos electrónicos para que se muestren bien en modo oscuro es tener en cuenta todos los diferentes clientes de correo electrónico y los algoritmos propietarios de inversión de color en modo oscuro.
La forma más eficaz de crear correos electrónicos para el modo oscuro es integrar algunos fundamentos de diseño en su flujo de trabajo de producción de correo electrónico.
De esa manera, su proceso habitual de creación de correo electrónico crea correos electrónicos que se muestran en modo claro y oscuro, independientemente del cliente de correo electrónico que utilice el suscriptor.
Mantener el texto como texto
Generalmente no es aconsejable utilizar imágenes para mostrar texto. Los objetos de texto estándar tienen menos problemas potenciales de visualización que las imágenes. El uso de archivos de imagen en lugar de texto sin formato crea dolores de cabeza innecesarios en el desarrollo normal de correo electrónico, sin un estilo en modo oscuro.
Cuando se trata del modo oscuro, los clientes de correo electrónico reconocen mucho mejor los objetos de texto e invierten los colores manteniendo el texto legible. La inversión de color con imágenes es mucho más complicada y propensa a errores que causan problemas en la visualización del correo electrónico.
Siempre que muestres texto, hazlo con un objeto de texto. Guarde los archivos de imagen para mostrar, ya sabe, imágenes.
Si debes cortar texto como imagen, hazlo con un fondo transparente. Y en algunos casos, necesitarás agregar un contorno al texto que sea del mismo color que el fondo. Por ejemplo, si tiene texto negro sobre fondo blanco, agregue un trazo de 2 píxeles al texto para que permanezca visible cuando esté invertido.
Utilice imágenes compatibles con el modo oscuro
Evidentemente no todo se puede mostrar como texto. Las imágenes son importantes en el correo electrónico, especialmente en los correos electrónicos de marketing. Sin embargo, las imágenes sólo ayudan si se ven bien.
Si desea que los fondos de sus imágenes coincidan con el fondo del texto, utilice archivos .PNG con fondos transparentes. Esta es la forma más sencilla y confiable de asegurarse de que sus imágenes se muestren correctamente.
Si utiliza un archivo .JPG o algún otro tipo de archivo con un fondo que coincide con el fondo del texto y otros objetos en modo claro, el fondo de la imagen a menudo se invierte misteriosamente a un color diferente al de los otros fondos.
En el mejor de los casos, esto hace que los bordes de las imágenes aparezcan en el correo electrónico. En el peor de los casos, hace que la imagen desaparezca en el fondo del modo oscuro.
Si utiliza imágenes .PNG con fondos transparentes, la inversión de color es más predecible y puede crear imágenes que se muestran sobre fondos en modo claro y oscuro.
Crea imágenes de alto contraste
Además de utilizar fondos transparentes, lo mejor es utilizar objetos de imagen que contrasten con la luz. y fondos oscuros.
El gris oscuro y el negro son los colores de fondo del modo oscuro más comunes. Hay muchos colores que destacan sobre estos colores oscuros y también aparecen sobre fondos blancos.
Fuente: Código mágico
Sin embargo, si su imagen es difícil de ver en un color oscuro, agregue un brillo o un contorno que coincida con el color de fondo del modo claro.
El efecto de contorno o brillo desaparecerá en el modo de luz, cuando aparezca el color de fondo predeterminado. En modo oscuro, el efecto evita que la imagen sea difícil de ver o desaparezca por completo.
Este fundamental es especialmente importante si debe utilizar una imagen para mostrar texto por algún motivo. El texto de las imágenes es especialmente susceptible a desaparecer si no hay resaltado para mantenerlo visible en el modo oscuro.
Habilite el modo oscuro para clientes de correo electrónico que lo admitan
Hay dos clientes de correo electrónico principales que ofrecen cierto control sobre cómo se muestra el modo oscuro sin hacks ni desarrollo de correo electrónico no estándar. Apple Mail y Outlook tienen configuraciones de modo oscuro que puedes habilitar en tus correos electrónicos.
Sin embargo, estos clientes de correo electrónico no le brindan control total sobre cómo se muestra el modo oscuro. Simplemente le dan la opción de agregar un poco de código a sus correos electrónicos que le indica al cliente de correo electrónico que ha creado un estilo de modo oscuro, luego el cliente de correo electrónico altera un poco menos los colores de sus correos electrónicos.
En última instancia, esto sólo significa que sólo debes declarar el modo oscuro en tus correos electrónicos una vez que hayas implementado los tres fundamentos que describimos anteriormente. Declarar el modo oscuro en el código de su correo electrónico puede hacer que sus correos electrónicos se vean peor si no ha agregado un estilo de modo oscuro.
Por ejemplo, activar el modo oscuro en Apple Mail simplemente limita la inversión de color del modo oscuro al fondo y deja los demás elementos del correo electrónico como están. Esto puede causar problemas de visualización si tus imágenes no están optimizadas para el modo oscuro o si estás usando imágenes para mostrar texto.
En Outlook, puede especificar qué colores usar en modo oscuro, y Outlook usará esos colores, o colores muy cercanos a los colores especificados, cuando sus correos electrónicos se muestren en modo oscuro.
Dicho todo esto, agrega estas líneas de código para activar el modo oscuro en Apple Mail y Outlook:
Metacódigo del modo oscuro de Apple Mail:
Luego declara tus colores usando este código:
La primera línea de código activa el modo oscuro. La segunda línea de código le permite especificar qué colores mostrar en modo oscuro (los colores se declaran después de la línea @media).
Especificar qué colores mostrar en modo oscuro crea el estilo de modo oscuro para Apple Mail y debes declarar los colores del modo oscuro para que tus correos electrónicos se muestren correctamente.
Cuando tienes habilitado el modo oscuro en Apple Mail, solo se invierte el fondo y solo si el fondo es blanco.
Código de declaración de color del modo oscuro de Outlook:
Este código le permite especificar qué colores mostrar en modo oscuro y crear su estilo de modo oscuro para Outlook.
Agregar estas líneas de código solo afecta la forma en que se muestran sus correos electrónicos en Apple Mail y Outlook. Aún necesitarás crear imágenes compatibles con el modo oscuro y seguir los otros fundamentos para que tus correos electrónicos se muestren correctamente en todos los demás clientes de correo electrónico.
También vale la pena señalar que debes mantener los colores oscuros para el estilo del modo oscuro de Apple Mail y Outlook. En teoría, podrías especificar colores del modo de luz.
Sin embargo, hacer esto es una mala experiencia para tus suscriptores. Si tienen el modo oscuro habilitado, quieren que el modo oscuro esté habilitado. Usar su estilo de modo oscuro para forzar esencialmente el modo claro en Apple Mail es un poco irrespetuoso.
Qué no hacer en los correos electrónicos en modo oscuro
Según cómo funciona el modo oscuro, es natural suponer que podrías hacer un par de cosas para ejercer más control sobre cómo se muestran tus correos electrónicos en cada cliente de correo electrónico.
Sin embargo, no es tan fácil manipular la forma en que se muestran sus correos electrónicos en modo oscuro como podría parecer. Es mejor establecer estándares de diseño que tengan en cuenta el modo oscuro que intentar esquivarlo de alguna manera.
Resiste la tentación de utilizar estas técnicas para lidiar con el modo oscuro.
Intercambio de imágenes
Es posible desarrollar correos electrónicos que muestren diferentes imágenes en modo oscuro. Sin embargo, ocultar elementos HTML basados en el modo oscuro es complicado, porque su código de correo electrónico debe detectar correctamente el modo oscuro en todos los diferentes clientes de correo electrónico.
Lo más probable es que termines con imágenes en modo claro y oscuro apareciendo en al menos algunos clientes de correo electrónico.
El objetivo de diseñar correos electrónicos para que se muestren en modo oscuro es evitar que el correo electrónico se muestre incorrectamente para una parte de sus suscriptores. A…