Cómo solucionar problemas comunes con los botones del modo oscuro (diseño de correo)

¿El botón de correo electrónico HTML parece roto cuando se prueba en modo oscuro? Aquí hay un resumen de los problemas más comunes con los botones del modo oscuro y sus soluciones.

Plantillas de correo electrónico de Envato Elements

Recuerda que puedes descargar de forma ilimitada antes de saltar Plantilla de correo electrónico de suscripción a Envato ElementsUtilizado por MailChimp, Campaign Monitor y muchos otros proveedores de servicios de correo electrónico. Envato Elements también le brinda acceso a miles de otros activos creativos, como fotos de archivo, gráficos, plantillas de video, audio, acciones de Photoshop y más.

1.1. Cómo arreglar botones de diferentes colores detrás del texto en modo oscuro

Si tiene este problema con el correo web de Outlook.com, Outlook para iOS o Outlook para Android

Esto sucede cuando el botón se crea usando un borde CSS alrededor del borde, simulando un relleno y creando una forma de botón sólida. Esto generalmente se hace para asegurarse de que se pueda hacer clic en toda la superficie del botón.

Los botones configurados de esta manera aplican un color de fondo al texto del enlace. En el modo oscuro, Outlook.com, la aplicación Outlook para iOS y la aplicación Outlook para Android invierten el color de fondo, pero el color del borde CSS no, por lo que se produce esta discrepancia.

Como arreglarlo

Haz que el borde sea transparente. ejemplo: border: 8px solid transparent Solo se puede ver el color de fondo del elemento de enlace. Este color también se invertirá en el modo oscuro, pero al menos los botones se verán más uniformes.

Si tiene este problema con Outlook para Windows en modo oscuro

El mismo efecto es que hay un botón VML con un color relleno, background-color Se aplica a <a> Etiquetas o algo más en VML.

Outlook no invierte el color de relleno VML en modo oscuro, pero invierte el color de fondo que se encuentra en la parte superior de la forma VML, proporcionando un área de diferentes colores.

Como arreglarlo

fabricar <a> Fondo de etiqueta transparent Outlook solo. Para hacer esto, agregue CSS condicional al comienzo del correo electrónico.

Por ejemplo, si tiene un enlace de este tipo en la siguiente clase buttonlink: <a class="buttonlink"> Incluya la siguiente información al principio del correo electrónico:

2.2. Cómo arreglar texto de diferentes colores con el botón VML en el modo oscuro de Outlook para Windows

Si está utilizando botones VML en Outlook, es posible que haya notado que algunos de los botones (elementos gráficos VML) permanecen en sus colores normales, mientras que el texto se ha ajustado a un color diferente.

Buenas noticias: ¡esto es fácil de solucionar! Para obtener instrucciones, consulte el otro tutorial, «Cómo solucionar un problema del modo oscuro de Outlook».

3.3. Cómo arreglar un botón que desaparece en segundo plano en modo oscuro

Esto sucede a menudo con la aplicación Gmail para iOS / Android, la aplicación Outlook para iOS / Android, Outlook para Mac y Outlook.com.

Estos clientes de correo electrónico oscurecen los botones, pero también el fondo del cuerpo. De repente, el final del botón oscuro desaparece. Es posible que haya probado los bordes normales y proyectado sombras para desperdiciar.

Si es posible, incluso un pequeño ajuste en el fondo del botón o en el color en el que se coloca el botón mejorará significativamente los resultados en el modo oscuro.

Pero en muchos casos, el color del correo electrónico es indiscutible. En este caso, intente agregar un borde fuera del botón en modo claro con el mismo color que el fondo. Muchos clientes de correo electrónico no cambian el color del borde CSS cuando procesan colores en modo oscuro, por lo que el borde a menudo puede mantener cierto contraste.

También puedes usar CSS outline Propiedades en lugar de border Si hay un botón cuadrado, es una propiedad. También puede forjar bordes anidando un botón dentro de un elemento ligeramente acolchado y aplicándole un fondo. De hecho, puede ver que el color del borde falso no cambia al usar una imagen de fondo o un degradado lineal.

Para obtener información sobre cómo hacer esto, consulte el otro tutorial, Solucionar problemas comunes de bordes en el modo oscuro.

Conclusión

El modo oscuro puede tener consecuencias inesperadas para el desarrollo del correo electrónico. Como siempre, probar su trabajo lo más minuciosamente posible puede ayudar a prevenir errores desagradables, pero esperamos que estas tres situaciones de resolución de problemas ayuden.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *