Conceptos básicos del modo oscuro en el email
Todos sabemos que la luz suele vencer a la oscuridad. Solo hay que ver Star Wars o El Señor de los Anillos… o La Divina Comedia, de hecho. La cultura pop (o la cultura en general, la verdad) nos ha enseñado que el lado oscuro no es el lugar en el que quieres estar. Y durante mucho tiempo, nos lo creímos. Pero, en los últimos años, el lado oscuro de nuestras aplicaciones se ha convertido en la opción preferida de multitud de usuarios. No es solo Discord o Twitter: el modo oscuro está en casi todas partes, email incluido.
Lo sabemos. El desarrollo de emails ya es bastante difícil de por sí. Pero de esta tendencia no puedes escapar. Así que abróchate el cinturón y prepárate para descubrir qué hace que el modo oscuro en el email sea tan popular, cómo puede ayudar a tu entregabilidad y cómo optimizar tus emails para el modo oscuro.
¿Qué es el modo oscuro?
Aquí no hay definiciones complicadas: el modo oscuro del email es más o menos lo que parece. El modo oscuro es un ajuste que los usuarios pueden activar para que el texto de una aplicación se muestre sobre un fondo negro en lugar de su fondo claro habitual. No todos los sitios web o aplicaciones tienen una función de modo oscuro, pero es común en plataformas con mucho texto y fondo blanco, como las redes sociales (Twitter, Instagram) y, por supuesto, los clientes de email.
Ventajas del modo oscuro
Los seguidores del modo oscuro son motivo suficiente para animarte a asegurar que tus emails están optimizados para esta función. Casi el 82 % de los usuarios encuestados por Android Authority utilizan los ajustes de modo oscuro solo en aplicaciones y smartphones. Tradicionalmente, el modo oscuro ha sido adoptado y promovido por un público más técnico, pero estadísticas recientes del iPhone muestran que los usuarios pasan apenas más de un 50 % menos de tiempo utilizando sus dispositivos cuando el modo oscuro está activado. Esto es una muestra de cómo el modo oscuro hace que la experiencia del usuario sea más eficiente. Existen muchas razones por las que se dice que el modo oscuro es superior (y entraremos en ellas con más detalle), pero aquí están las principales:
- Menor fatiga visual
- Reducción de la luz azul
- Ahorro de energía (consume menos batería)
- Más opciones de diseño personalizado
Independientemente de los motivos, las estadísticas dejan claro que el modo oscuro en los dispositivos es una opción imprescindible, pero ¿qué implica esto para el email en concreto?
¿Qué aspecto tiene el modo oscuro en un email?
El modo oscuro oscurece los colores de fondo y también convierte el texto oscuro en texto claro para que las palabras resalten sobre el nuevo fondo. Entonces, ¿qué aspecto tiene eso en una bandeja de entrada?
Tomemos nuestra propia newsletter de Mailgun como ejemplo. No solo hay cambios en el color de fondo y el cuerpo del texto, sino también en nuestro logotipo y en los iconos de redes sociales.
Otro ejemplo es la bandeja de entrada de Gmail y la opción de cambiar entre el modo oscuro y el modo clásico “claro” o “de día”.
Fuente: Green Eye IT
El modo “nocturno” de Gmail no cambia nada en las pestañas, la barra lateral ni en el diseño general de Gmail. Los únicos cambios son el color de fondo y los colores de la fuente de la pantalla.
Fuente: TechBlogBox
El cambio al modo oscuro no altera nada de las pestañas de Gmail ni su diseño general o usabilidad. Los únicos cambios son el color de fondo y los colores de la fuente de la pantalla.
Estos cambios menores pueden parecer decepcionantes; al fin y al cabo, ¿para qué sirve el modo oscuro?
¿Por qué existe el modo oscuro?
Existen un par de razones sencillas para la existencia del modo oscuro: muchas personas lo encuentran, literalmente, agradable a la vista. Aunque existen estudios contradictorios sobre si el modo oscuro realmente reduce la fatiga visual y la exposición a la luz azul de la tecnología, algunas personas prefieren el fondo más oscuro. Además, el modo oscuro puede prolongar la duración de la batería de tu teléfono o portátil al utilizar, de forma potencial, menos energía.
Probablemente, el principal punto a favor del modo oscuro sea su rol en accesibilidad del email. En general, se considera que el alto contraste de colores y la menor luminosidad del modo oscuro lo hacen más legible para personas con deficiencias visuales como la sensibilidad a la luz.
Aunque cada uno tiene sus motivos para usar el modo oscuro, es innegable que su popularidad ha aumentado en los últimos años, hasta el punto de que la mayoría de los principales clientes de email ofrecen ajustes de modo oscuro a sus usuarios.
¿Qué clientes de email ofrecen ajustes de modo oscuro?
Seguramente nos resultaría más fácil enumerar qué clientes de email no ofrecen algún tipo de interfaz en modo oscuro. No obstante, a modo de referencia rápida, aquí están los principales clientes de email que utilizan ajustes de email en modo oscuro:
- Gmail (en el navegador web, en la aplicación móvil de Android y en la de iOS)
- Outlook (en el navegador web Outlook.com, en la aplicación de escritorio para Mac y Windows, y en las aplicaciones móviles de Android e iOS)
- Plataformas de Apple Mail (en la aplicación de escritorio Apple Mail y en las aplicaciones Mail para iPhone y iPad)
- Yahoo (en el navegador web, en la aplicación móvil de Android y en la de iOS)
Según nuestra Informe de interacción del email de 2021 , está casi garantizado que la mayoría de tus contactos utilizarán al menos uno de estos proveedores. El reto, sin embargo, es que todos estos clientes muestran los emails en modo oscuro de forma un poco distinta. Algunos invertirán los colores automáticamente y otros no. Algunos admitirán @media (prefers-color-scheme) y otros (te miramos a ti, Gmail) no. Por tanto, al enviar emails, tu mejor opción para lograr la máxima interacción es asegurarte de que se vean de maravilla tanto en el modo claro como en el oscuro. Quizá te preguntes: ¿cómo? ¿Y por qué? Vamos a profundizar en cómo el modo oscuro puede afectar a tu entregabilidad y en lo que puedes hacer para asegurarte de llevarte bien con el modo oscuro.
¿Cómo puedes pasar tus emails al modo oscuro?
Es importante recordar que los ajustes de modo oscuro son sobre todo una preferencia que controla el usuario, y que cada cliente de email, dispositivo o servicio tendrá sus propios procesos y opciones de diseño para quienes deseen implementar esta función.
Dicho esto, no todos los clientes de email son iguales en lo que respecta a la optimización del modo oscuro. La mayor parte del trabajo pesado de diseño y optimización debe hacerse en la fase de desarrollo del email, y tus emails deben probarse y previsualizarse para evitar problemas de entregabilidad.
¿Cómo puede afectar el modo oscuro a la entregabilidad de tus emails?
Hay una razón principal por la que el modo oscuro puede afectar a tu entregabilidad, y es que los usuarios de email son un grupo exigente. Muchos clientes de email no optimizan automáticamente las funciones de imagen (logotipos, fotos, etc.) para el modo oscuro, y el contenido no optimizado puede hacer que tus emails se vean desordenados y difíciles de leer.
La mayoría de los suscriptores que utilizan el modo oscuro no van a perder el tiempo tratando de averiguar cómo leer tus emails con mal aspecto. ¿Y por qué iban a hacerlo? En lugar de eso, los ignorarán, los borrarán o los marcarán como spam ; todo ello afectará negativamente a tu entregabilidad.
En cambio, si dedicas tiempo a asegurar que tus emails se vean lo mejor posible incluso en el modo oscuro, es mucho más probable que los lean e interactúen con ellos. Y recuerda: unas buenas prácticas de email y unas buenas métricas de interacción se traducen en una buena entregabilidad.
Entonces, ¿qué pequeños ajustes rápidos puedes introducir en el diseño de tus emails para optimizar tus mensajes para el modo oscuro?
¿Cómo puedes optimizar tus emails para el modo oscuro?
Tú tienes preguntas y nosotros tenemos respuestas. Hemos recopilado algunas de las mejores y más sencillas formas de que tus emails se sigan viendo bien en el modo oscuro.
Consejos de diseño de emails para el modo oscuro
Optimizar tus emails y plantillas para el modo oscuro no tiene por qué ser nada difícil. A continuación, hemos reunido algunos de nuestros mejores consejos de diseño para convertir los emails claros en oscuros.
Haz que tus imágenes sean transparentes
Hacer que las imágenes de tus emails sean transparentes es tan sencillo como elegir imágenes sin fondo de color ni blanco. Las imágenes transparentes te permiten colocar logotipos, fotos y más elementos sobre cualquier fondo de email sin tener colores incompatibles. A menudo, las imágenes con fondo transparente que encuentras en internet tienen un fondo de cuadros blancos y grises, como el ejemplo de nuestro logotipo antiguo a continuación.
Por su parte, las imágenes con colores de fondo oscuros conservarán esos fondos independientemente del aspecto del email.
Asegúrate de elegir imágenes que se vean igual en cualquier fondo, y de guardarlas como PNG transparentes. Cuando tu usuario abra tu email en modo oscuro, tus imágenes se verán impecables y limpias, y tus usuarios podrán verlas sin que el diseño resulte desordenado o distraiga. Recuerda probar también el contraste de tu logotipo sobre un fondo claro y otro oscuro; si tu logotipo no destaca, tus lectores no sabrán que eres tú.
Añade un contorno blanco a las imágenes y fuentes oscuras
Aunque puede que quieras evitar algunos fondos en las imágenes para que tus gráficos se integren en el modo oscuro, a veces también querrás destacar fuentes e imágenes oscuras para mejorar su visibilidad. Puedes añadir fácilmente un contorno blanco a tus imágenes y texto en herramientas de edición de imágenes como Photoshop.
De esta forma, tus imágenes se ven exactamente igual que siempre en el modo claro. Sin embargo, acaban destacando y resultando legibles para los usuarios en el modo oscuro. Los usuarios ignorarán rápidamente tus emails si no pueden leerlos, pero los contornos son una forma sencilla de mantener tanto la legibilidad como el efecto visual.
Considera la posibilidad de enviar emails en texto sin formato
Los emails en texto sin formato no son nada desdeñables. Aportan autenticidad y eliminan adornos innecesarios y que distraen; los diseños más sencillos son incluso tendencia este año. Tal vez no utilices muchas imágenes o logotipos sofisticados en tu programa de email, o prefieras no tener que lidiar con esos problemas. La ventaja de los emails en texto sin formato es que siempre se mostrarán en modo oscuro sin problemas: un fondo claro se vuelve oscuro, el texto negro se vuelve blanco y listo.
Si sabes que a tu lista de contactos le gustan los emails directos y sin adornos, los emails de texto sin formato pueden ser ideales para ti. Se verán bien, tus usuarios obtendrán lo que quieren y tu entregabilidad estará en plena forma.
Consejos de programación para el modo oscuro
La renderización de los emails es la pesadilla de cualquier desarrollador. Y, por supuesto, el modo oscuro no iba a ser distinto. Dado que cada cliente muestra los emails en modo oscuro de forma diferente, resulta difícil crear un mensaje que se vea igual en todos los proveedores.
Junto a estas recomendaciones de diseño universales, hay varios ajustes de programación que puedes aplicar para crear una experiencia de modo oscuro personalizada para tus emails.
Activa el modo oscuro con metaetiquetas y el selector :root
Utiliza en la etiqueta para indicar al cliente de email que tu email es compatible con los modos claro y oscuro.
Si tu usuario tiene aplicado este ajuste en su aplicación de email, las siguientes metaetiquetas garantizarán que se active el modo oscuro:
<meta name="color-scheme" content="light dark">rnrn<meta name="supported-color-schemes" content="light dark">
El selector :root permitirá al cliente de email buscar el estilo de combinación de colores que necesite sin tener que leer todos los estilos.
<style type="text/css">rn:root {rn color-scheme: light dark;rn supported-color-schemes: light dark;rn}rn</style>
Añade estilos de modo oscuro a través de media queries
Puedes crear estilos CSS personalizados para determinar cómo se verán los distintos elementos (logotipos, color de fuente, fondo o texto de enlaces) al utilizar el modo oscuro.
Añade esta media query a tu bloque para personalizar estos elementos con los valores de color preferidos por tu marca:
@media (prefers-color-scheme: dark ) {rn /* Shows dark mode logo */rn.dark-logo-wrapper,.dark-logo {rn display: block !important;rn}rn /* Hides light mode logo */rn .light-logo {rn display: none !important;rn}rnrn /* Creates a custom dark mode background color */rn .body {rn background-color: #282828 !important;rn color: #ffffff !important;rn}rnrn /* Sets the font color */rn h1, h2, h3, p, td {rn color: #ffffff !important;rn}rnrn/* Sets the text link color */ rn a { rncolor: #43D6B7 !important;rn}rnrn/* More styles here */ rn}
Puedes añadir esto a la sección de tu email para crear estilos de modo oscuro personalizados para iOS, Apple Mail y algunas versiones de Outlook.
Añade las clases y los estilos adecuados a los elementos específicos del modo oscuro
Si tienes versiones claras y oscuras de determinados elementos (como las imágenes), tendrás que asegurarte de que los estilos que has creado para el modo claro y el oscuro se muestran cuando deben. Esto es especialmente importante si tienes una opción clara y otra oscura para tu logotipo y quieres alternar entre ambas en función de si el destinatario utiliza el modo oscuro o no.
A continuación tienes un ejemplo de cómo se vería esto en tu HTML:
<!-- start HEADER_LOGO -->rn<a href="https://mailgun.com/" target="_blank">rnrn<img src="https://www.yoursite.com/images/mailgun-light.png" class="light-logo" />rnrn<!-- Hide the dark logo in Outlook and Windows 10 Mail with conditional code but it will be revealed if dark mode is triggered -->rn<div class="dark-logo-wrapper" style="mso-hide: all; display: none;">rn <img src="https://www.yoursite.com/images/mailgun-dark.png" class="dark-logo" style="display: none;" />rn</div> rnrn</a>rn<!-- end HEADER_LOGO -->rn
No todos estos ajustes funcionarán en todos los clientes y, por mucho que lo intentemos, nuestros emails en modo oscuro podrían acabar viéndose un poco diferentes en distintas aplicaciones y proveedores. Si quieres asegurarte, prueba la renderización de tu email antes de enviarlo.
Consejos finales antes del envío
El modo oscuro para el email se ha convertido en una función muy popular desde su creación. Debes prepararte para optimizar tus emails para tu lista de contactos si quieres que haya interacción con ellos y que tu entregabilidad se mantenga saludable.
Aquí tienes algunos consejos sencillos que debes recordar a la hora de enviar emails en modo oscuro:
- Elige imágenes y logotipos que destaquen tanto en el modo claro como en el oscuro.
- En la medida de lo posible, utiliza imágenes transparentes y sin fondo.
- Añade un contorno blanco para destacar las fuentes, las imágenes y los logotipos oscuros.
- Si se adapta bien a tus contactos, plantéate la posibilidad de enviar emails en texto sin formato a tu lista para que se muestren de forma automática y sin complicaciones.
Pero lo más importante es probar tus emails antes de enviarlos. El mundo del email cambia constantemente y el modo oscuro también; por eso, asegúrate de probar tus emails en los clientes de email más populares de tus listas. Puedes hacerlo manualmente o utilizar herramientas de testing de emails, como Litmus o Email on Acid.
Seamos sinceros. Puede que te cause algún que otro dolor de cabeza y que sea un poco complicado, pero el lado oscuro ha llegado para quedarse. No cabe duda de que el modo oscuro del email tiene sus ventajas en lo referente a la entregabilidad y la accesibilidad; es hora de aceptarlo. Además, no necesitas de verdad a Darth Vader, a Sauron o una visita al noveno círculo del infierno para hacerlo bien.
