Cómo mejorar la calidad del temporizador en correos
Quieres una cosa: un temporizador de cuenta regresiva que se vea nítido en correos reales, no solo en el editor. Si tu temporizador se ve borroso, pixelado, tiene halos, puntos o bordes extraños, casi siempre es un problema de configuración. Las soluciones a continuación son rápidas y predecibles, una vez que sabes qué buscar.
Comienza aquí (30 segundos)
1) Aumenta el tamaño
Usa L o XL. Si Responsivo está activado, usa uno aún más grande.
2) Habilita Retina Ready
Más nítido en pantallas de alta densidad. Luego aumenta el tamaño de nuevo si es necesario.
3) Vuelve a copiar el código
El código antiguo mantiene el CSS antiguo. Reemplázalo en tu correo.
La mayoría de los casos de "temporizador borroso" son simplemente un GIF pequeño siendo estirado por el diseño del correo. Haz la fuente más grande, y el temporizador se vuelve nítido.
Problemas comunes de calidad de un vistazo
| Lo que ves | Causa más probable | Solución rápida |
|---|---|---|
| Borroso o pixelado | Tamaño base pequeño y estiramiento Responsivo | Usa L o XL, habilita Retina, vuelve a copiar el código |
| Suave en pantallas Retina | Imagen 1x en pantalla 2x | Habilita Retina Ready y aumenta el tamaño |
| Halo alrededor de los números | Color de fondo mate incorrecto con transparencia | Usa fondo sólido o haz coincidir el color mate |
| Puntos, bordes sucios | Bajo contraste o cuantización de color en GIF | Aumenta el contraste, evita colores casi idénticos |
| Agujeros dentro de los dígitos | El color del texto se mezcla con la paleta transparente | Evita la transparencia o cambia el color del texto |
| Se ve mal en modo oscuro de Gmail | Gmail invierte los colores de manera impredecible | Usa la configuración de modo oscuro |
Lista de verificación rápida
- 1Usa L o XL (o aumenta Personalizado). Las imágenes fuente pequeñas no se verán nítidas cuando se estiran.
- 2Habilita Retina Ready para nitidez 2x, luego aumenta el tamaño para mantener el mismo ancho visual.
- 3Haz coincidir el color de fondo del temporizador con el fondo de tu correo. Usa fondo sólido para mejores resultados.
- 4Si Responsivo está activado, asume que la imagen se estirará. Comienza con un tamaño más grande para evitar el desenfoque.
- 5Después de cualquier cambio, vuelve a copiar el código de inserción. El código antiguo todavía usa la configuración antigua.
Tamaño del temporizador demasiado pequeño
La mayoría de los temporizadores borrosos son simplemente GIFs estirados
Un temporizador de cuenta regresiva es una imagen GIF. Si se crea demasiado pequeño y luego se estira por el diseño del correo, se verá borroso o pixelado. Los clientes de correo no escalan las imágenes con gracia. Estiran los píxeles.
Lo que usualmente sucede:
- Creas un temporizador en tamaño S o M
- Habilitas Responsivo en la configuración de inserción
- El contenedor del correo es más ancho que el GIF
- El temporizador se estira para llenar el ancho
- Resultado: desenfoque
Solución que funciona cada vez:
- Cambia a tamaño L o XL
- Si necesitas Responsivo, usa uno aún más grande (XL o Personalizado alto)
- Vuelve a copiar el código de inserción
Opciones de tamaño:
Recomendación: L o XL
Si Responsivo está activado, apunta a XL o Personalizado alto.
Modelo mental simple
Si tu correo muestra el temporizador a 500px de ancho, tu GIF debería generarse alrededor de ese tamaño (o más grande con Retina). Un GIF de 250px estirado a 500px se verá suave.
Solución: Aumenta el tamaño a L o XL (o Personalizado más alto). Luego vuelve a copiar el código de inserción.
Retina Ready no habilitado
Más nítido en MacBooks, iPhones y pantallas de alta densidad
Las pantallas de alta densidad muestran más píxeles en el mismo espacio físico. Una imagen estándar 1x puede verse un poco suave. Retina Ready soluciona esto mostrando el GIF a la mitad de su tamaño generado.
Cómo funciona Retina Ready:
- El GIF se genera más grande
- El código de inserción fuerza un ancho de visualización más pequeño
- Los bordes se ven más limpios porque hay más píxeles por forma
Cuando está habilitado, el código de inserción incluye CSS como este: style="width:250px!important;"
Si tu imagen del temporizador es de 500px, se mostrará a 250px. Eso es esperado. Aumenta el tamaño del temporizador para mantener el mismo ancho visual.
Error común
La gente habilita Retina Ready, ve que el temporizador se vuelve más pequeño, y lo estira manualmente. Mejor enfoque: aumenta el tamaño en la configuración, luego vuelve a copiar el código.
Solución: Habilita Retina Ready, aumenta el tamaño para compensar, luego vuelve a copiar el código de inserción.
Color de fondo incorrecto con transparencia
La razón más común por la que ves bordes irregulares en fondos oscuros
Este problema es causado por cómo GIF maneja la transparencia. GIF no soporta transparencia verdadera (alfa). Para que los dígitos se vean suaves, el temporizador usa anti-aliasing, que mezcla los píxeles del borde en un color de fondo. Ese color de fondo está efectivamente incorporado en el GIF.
Lo que sucede en correos reales:
En el ejemplo de la derecha, el temporizador está colocado en una sección de correo negro. El usuario simplemente quería dígitos blancos sobre un fondo oscuro. Pero el color de fondo del temporizador se dejó como el gris predeterminado.
El temporizador usa anti-aliasing para suavizar los bordes de los dígitos. Estos píxeles de borde fueron mezclados en gris, no negro. Cuando el GIF se muestra sobre negro, esos píxeles de borde gris se vuelven visibles. Los dígitos se ven ásperos, con bordes ruidosos y artefactos.
Si el color de fondo hubiera sido establecido en negro, los píxeles de borde se mezclarían en negro y se volverían invisibles. Los dígitos se verían limpios y suaves.
Soluciones:
Mejor: usa un fondo sólido
Si el temporizador está sobre un color sólido (sección negra, sección blanca, color de marca), establece el fondo del temporizador en ese color exacto. Esto hace que el anti-aliasing se mezcle correctamente y elimina los bordes ásperos.
Si necesitas transparencia: haz coincidir el color mate
Si mantienes la transparencia, aun así establece el color de fondo al mismo color detrás del temporizador. Este es el color usado para suavizar, así que debe coincidir con el fondo real del correo.
Verificación rápida: Si tu temporizador está destinado a estar en una sección oscura, establece el color de fondo del temporizador en ese mismo color oscuro, no el gris predeterminado.
Estiramiento del modo responsivo
Útil, pero puede amplificar los problemas de calidad
El modo responsivo agrega style="width:100%!important;" para que el temporizador llene el ancho del correo. Esto es genial para diseños móviles, pero puede estirar un GIF pequeño y hacerlo ver borroso.
Cuándo Responsivo causa desenfoque:
- Tamaño base pequeño
- Contenedor de correo ancho
- El temporizador se estira más allá de su tamaño natural de píxeles
Cómo usar Responsivo de forma segura:
- Comienza con tamaño XL o Personalizado alto
- Habilita Retina Ready si quieres máxima nitidez
- Si necesitas un aspecto fijo, deshabilita Responsivo
Consejo: Si no necesitas ancho completo, deshabilita Responsivo y controla el max-width manualmente para resultados consistentes.
Colores de texto y fondo demasiado similares
Puntos, bordes sucios, y a veces agujeros dentro de los dígitos
GIF usa una paleta de colores limitada. Si tu color de texto es muy cercano al fondo, la imagen puede perder píxeles de borde sutiles. Con transparencia, esto puede empeorar e incluso puede producir agujeros dentro de los números cuando los colores colapsan en la misma entrada de paleta.
Si ves puntos
Aumenta el contraste ligeramente. Haz el texto un poco más oscuro o claro.
Si los bordes se ven sucios
Evita colores casi idénticos. El fondo sólido ayuda.
Si los dígitos tienen agujeros
Deshabilita la transparencia o cambia el color del texto.
Regla general: Si apenas puedes ver el texto contra el fondo en el editor, GIF probablemente producirá artefactos en el correo.
Código de inserción no actualizado
Una razón sorprendentemente común por la que la solución "no funciona"
Tu código de inserción contiene los valores finales de CSS (width, max-width, a veces reglas de display). Si cambias la configuración pero sigues usando el código de inserción antiguo, tu correo seguirá renderizando la versión antigua.
Solución: Copia el código de inserción de nuevo después de los cambios, y reemplázalo en tu plantilla de correo.
Problemas con el modo oscuro de Gmail
Un problema separado con sus propias soluciones
Si tu temporizador se ve bien en todas partes excepto Gmail en modo oscuro, esto no es un problema de tamaño. Gmail puede invertir los colores y cambiar cómo se muestra tu correo. Usa una configuración específica para modo oscuro.
Tenemos una guía dedicada para esto
El modo oscuro de Gmail es un entorno que los remitentes de correo no pueden controlar completamente. Nuestra guía explica por qué sucede esto y cómo reducir el impacto.
Leer: Cómo manejar el modo oscuro en GmailPaso a paso: Arreglar un temporizador borroso
Abre la configuración de tu temporizador
Trabaja desde el temporizador real, no desde una plantilla de correo antigua
Aumenta el tamaño base
Usa L, XL o Personalizado más alto. Si Responsivo está activado, comienza más grande.
Establece el fondo correctamente
El fondo sólido es el más limpio. Si es transparente, haz coincidir el color mate.
Habilita Retina Ready
Luego aumenta el tamaño si el temporizador se vuelve demasiado pequeño.
Vuelve a copiar el código de inserción
Reemplaza el código antiguo en tu correo. El código antiguo mantiene el CSS antiguo.
Envía un correo de prueba
Verifica en escritorio y móvil antes de enviar a tu lista
Preguntas frecuentes
¿Por qué mi temporizador se ve nítido en el editor pero borroso en el correo?
El editor muestra el GIF en su tamaño nativo. En el correo, el diseño puede estirar la imagen (especialmente con modo Responsivo). Si el GIF es pequeño, estirarlo lo hace borroso. Aumenta el tamaño a L o XL, luego vuelve a copiar el código de inserción.
¿Necesito Retina Ready?
Si te importa la nitidez en MacBooks, iPhones y pantallas modernas, sí. Retina Ready muestra el GIF a la mitad del tamaño para un aspecto más limpio. Después de habilitarlo, aumenta el tamaño para mantener el mismo ancho visual.
¿Debería usar fondo transparente o sólido?
El fondo sólido da el resultado más limpio cuando el fondo de tu correo es consistente. La transparencia es útil cuando el temporizador está sobre múltiples fondos, pero debes hacer coincidir el color de fondo mate para evitar halos.
¿Por qué veo puntos, bordes sucios o píxeles irregulares?
Esto usualmente significa bajo contraste, fondo mate incorrecto o limitaciones de la paleta GIF. Aumenta el contraste ligeramente y evita colores casi idénticos para texto y fondo. El fondo sólido a menudo lo arregla instantáneamente.
¿Por qué veo agujeros dentro de los dígitos?
Con transparencia y paleta GIF limitada, los colores pueden fusionarse y partes del dígito pueden volverse transparentes. Arréglalo deshabilitando la transparencia o cambiando el color del texto a un tono más distinto.
Cambié la configuración pero nada mejoró. ¿Por qué?
Probablemente todavía estás usando el código de inserción antiguo. Vuelve a copiar el código de inserción y reemplázalo en tu plantilla de correo.
Resumen
La mayoría de los problemas de calidad del temporizador provienen de estirar un GIF pequeño, usar transparencia con un fondo mate no coincidente, o usar colores casi idénticos que rompen el anti-aliasing en GIF. Para los mejores resultados GIF: usa un tamaño más grande (L o XL), habilita Retina Ready, prefiere fondo sólido cuando sea posible, vuelve a copiar el código de inserción después de los cambios, y prueba en un correo real.