Cuenta atrás con fondo transparente para email

Un GIF con fondo transparente deja ver el color o la imagen de tu email detrás de las cifras, así que la cuenta atrás parece parte del diseño y no una caja pegada encima. Tiene un límite que conviene conocer antes de copiar el código: en un GIF, cada píxel es opaco o invisible, sin término medio.

Cómo funciona la transparencia en un GIF

Un GIF guarda sus colores en una paleta de 256 como máximo. La especificación GIF89a permite marcar uno de esos colores como transparente, y los píxeles de ese color no se pintan. Todo lo demás se ve al 100 %.

No hay transparencias parciales. Una sombra suave o un brillo que se funde con el fondo no se pueden guardar en un GIF: cada píxel tiene que decidir entre verse entero o no verse.

Los bordes de las cifras

Las cifras y las etiquetas se dibujan con los bordes suavizados. En un fondo opaco, el borde mezcla el color de la cifra con el del fondo y la letra se ve limpia. En un GIF transparente, el motor no sabe de qué color es tu email, así que hay que mezclar el borde con algún color al dibujarlo.

Nuestro motor dibuja sobre un color clave magenta y luego vuelve transparente ese color exacto. Los píxeles del borde son una mezcla entre la cifra y el magenta, no el magenta puro, así que quedan opacos con un tono rosado o violeta. Lo hemos comprobado generando GIF con el motor y poniéndolos sobre fondos blancos, negros y azules:

• En cifras grandes y oscuras sobre un email claro, el borde es una línea fina que apenas se nota.
• En las etiquetas ("DÍAS", "HORAS") se nota más, porque la letra es pequeña y casi todo es borde.
• Si las cifras se parecen al fondo (oscuras sobre un email oscuro, blancas sobre uno blanco), lo único que se distingue es el contorno de color.

Para elegir el color de las cifras, piensa en el fondo exacto donde va a ir el timer. Cifras oscuras sobre un email claro, cifras blancas sobre uno oscuro, y etiquetas con suficiente contraste, porque son lo primero que se ve mal.

Si tu email tiene un fondo de un solo color, hay una opción más limpia: desactiva la transparencia y pon como fondo del timer ese mismo color. El borde se mezcla entonces con el color correcto y no aparece ningún halo. La transparencia compensa cuando el timer va encima de una imagen o de un degradado.

Qué estilos admiten fondo transparente

• flat, minimal y serif. Las cifras se dibujan directamente sobre el fondo transparente. Son los que mejor se integran con el email.
• blocks, rounded, gradient y flap. Solo se vuelve transparente el espacio alrededor de las celdas. Las celdas se pintan en un gris oscuro fijo, así que con estos estilos las cifras tienen que ser claras.
• glass, ring, neon y bold. Son siempre opacos. Si activas la transparencia, el motor la ignora y el GIF sale con su fondo.

flat, minimal, blocks, rounded y gradient son del plan gratuito; flap y serif, de Pro.

Cuando el timer caduca, también puedes hacerlo desaparecer: en lugar del texto de caducado, el motor sirve una imagen transparente de 1 píxel.

Modo oscuro

Algunos clientes de correo cambian el fondo del mensaje cuando el usuario elige el tema oscuro. Según Microsoft, con el modo oscuro de Outlook.com y Outlook en la web el panel de lectura tiene fondo oscuro, y el botón "Turn on the lights" muestra el formato original. En Mail para Mac, la opción de fondos oscuros para los mensajes ("Use dark backgrounds for messages" en la ayuda de Apple) los muestra con fondo oscuro si el sistema está en modo oscuro.

Un GIF transparente deja ver lo que el cliente pinte detrás. Si tus cifras son oscuras y el cliente oscurece el fondo, pierden contraste y ganan protagonismo los bordes de color. Las páginas de ayuda de Microsoft y Apple hablan del fondo del mensaje, no de las imágenes, así que no sabemos cómo trata cada cliente los colores de un GIF.

Por eso, la recomendación es probar:

1. Envíate una prueba y ábrela en Outlook.com con el modo oscuro activado y en Mail para Mac con fondos oscuros.
2. Si las cifras se leen mal, sube el contraste de las etiquetas o usa un timer con fondo opaco, que lleva su propio color dentro de la imagen.
3. Escribe la fecha límite también en el texto del email, para quien no vea bien el timer.

Antes de enviar

Mira el timer en su sitio real, sobre el fondo de tu plantilla y en un móvil, que es donde los bordes se ven de más cerca. Si el timer va sobre una imagen, comprueba que las cifras se leen en la parte más clara y en la más oscura de esa imagen.

Si lo vas a pegar en una plataforma concreta, tienes los pasos para Klaviyo, Mailchimp, HubSpot y Shopify Email. Y si quieres un timer distinto para cada destinatario, lee cómo funciona el timer evergreen.