Como mejorar la calidad del temporizador en correos
Quieres una cosa: un temporizador de cuenta regresiva que se vea nitido en correos reales, no solo en el editor. Si tu temporizador se ve borroso, pixelado, tiene halos, puntos o bordes extranos, casi siempre es un problema de configuracion. Las soluciones a continuacion son rapidas y predecibles, una vez que sabes que buscar.
Comienza aqui (30 segundos)
1) Aumenta el tamano
Usa L o XL. Si Responsivo esta activado, usa uno aun mas grande.
2) Habilita Retina Ready
Mas nitido en pantallas de alta densidad. Luego aumenta el tamano de nuevo si es necesario.
3) Vuelve a copiar el codigo
El codigo antiguo mantiene el CSS antiguo. Reemplazalo en tu correo.
La mayoria de los casos de "temporizador borroso" son simplemente un GIF pequeno siendo estirado por el diseno del correo. Haz la fuente mas grande, y el temporizador se vuelve nitido.
Problemas comunes de calidad de un vistazo
| Lo que ves | Causa mas probable | Solucion rapida |
|---|---|---|
| Borroso o pixelado | Tamano base pequeno y estiramiento Responsivo | Usa L o XL, habilita Retina, vuelve a copiar el codigo |
| Suave en pantallas Retina | Imagen 1x en pantalla 2x | Habilita Retina Ready y aumenta el tamano |
| Halo alrededor de los numeros | Color de fondo mate incorrecto con transparencia | Usa fondo solido o haz coincidir el color mate |
| Puntos, bordes sucios | Bajo contraste o cuantizacion de color en GIF | Aumenta el contraste, evita colores casi identicos |
| Agujeros dentro de los digitos | 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 configuracion de modo oscuro |
Lista de verificacion rapida
- 1Usa L o XL (o aumenta Personalizado). Las imagenes fuente pequenas no se veran nitidas cuando se estiran.
- 2Habilita Retina Ready para nitidez 2x, luego aumenta el tamano para mantener el mismo ancho visual.
- 3Haz coincidir el color de fondo del temporizador con el fondo de tu correo. Usa fondo solido para mejores resultados.
- 4Si Responsivo esta activado, asume que la imagen se estirara. Comienza con un tamano mas grande para evitar el desenfoque.
- 5Despues de cualquier cambio, vuelve a copiar el codigo de insercion. El codigo antiguo todavia usa la configuracion antigua.
Tamano del temporizador demasiado pequeno
La mayoria de los temporizadores borrosos son simplemente GIFs estirados
Un temporizador de cuenta regresiva es una imagen GIF. Si se crea demasiado pequeno y luego se estira por el diseno del correo, se vera borroso o pixelado. Los clientes de correo no escalan las imagenes con gracia. Estiran los pixeles.
Lo que usualmente sucede:
- Creas un temporizador en tamano S o M
- Habilitas Responsivo en la configuracion de insercion
- El contenedor del correo es mas ancho que el GIF
- El temporizador se estira para llenar el ancho
- Resultado: desenfoque
Solucion que funciona cada vez:
- Cambia a tamano L o XL
- Si necesitas Responsivo, usa uno aun mas grande (XL o Personalizado alto)
- Vuelve a copiar el codigo de insercion
Opciones de tamano:
Recomendacion: L o XL
Si Responsivo esta activado, apunta a XL o Personalizado alto.
Modelo mental simple
Si tu correo muestra el temporizador a 500px de ancho, tu GIF deberia generarse alrededor de ese tamano (o mas grande con Retina). Un GIF de 250px estirado a 500px se vera suave.
Solucion: Aumenta el tamano a L o XL (o Personalizado mas alto). Luego vuelve a copiar el codigo de insercion.
Retina Ready no habilitado
Mas nitido en MacBooks, iPhones y pantallas de alta densidad
Las pantallas de alta densidad muestran mas pixeles en el mismo espacio fisico. Una imagen estandar 1x puede verse un poco suave. Retina Ready soluciona esto mostrando el GIF a la mitad de su tamano generado.
Como funciona Retina Ready:
- El GIF se genera mas grande
- El codigo de insercion fuerza un ancho de visualizacion mas pequeno
- Los bordes se ven mas limpios porque hay mas pixeles por forma
Cuando esta habilitado, el codigo de insercion incluye CSS como este: style="width:250px!important;"
Si tu imagen del temporizador es de 500px, se mostrara a 250px. Eso es esperado. Aumenta el tamano del temporizador para mantener el mismo ancho visual.
Error comun
La gente habilita Retina Ready, ve que el temporizador se vuelve mas pequeno, y lo estira manualmente. Mejor enfoque: aumenta el tamano en la configuracion, luego vuelve a copiar el codigo.
Solucion: Habilita Retina Ready, aumenta el tamano para compensar, luego vuelve a copiar el codigo de insercion.
Color de fondo incorrecto con transparencia
La razon mas comun por la que ves bordes irregulares en fondos oscuros
Este problema es causado por como GIF maneja la transparencia. GIF no soporta transparencia verdadera (alfa). Para que los digitos se vean suaves, el temporizador usa anti-aliasing, que mezcla los pixeles del borde en un color de fondo. Ese color de fondo esta efectivamente incorporado en el GIF.
Lo que sucede en correos reales:
En el ejemplo de la derecha, el temporizador esta colocado en una seccion de correo negro. El usuario simplemente queria digitos blancos sobre un fondo oscuro. Pero el color de fondo del temporizador se dejo como el gris predeterminado.
El temporizador usa anti-aliasing para suavizar los bordes de los digitos. Estos pixeles de borde fueron mezclados en gris, no negro. Cuando el GIF se muestra sobre negro, esos pixeles de borde gris se vuelven visibles. Los digitos se ven asperos, con bordes ruidosos y artefactos.
Si el color de fondo hubiera sido establecido en negro, los pixeles de borde se mezclarian en negro y se volverian invisibles. Los digitos se verian limpios y suaves.
Soluciones:
Mejor: usa un fondo solido
Si el temporizador esta sobre un color solido (seccion negra, seccion 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 asperos.
Si necesitas transparencia: haz coincidir el color mate
Si mantienes la transparencia, aun asi establece el color de fondo al mismo color detras del temporizador. Este es el color usado para suavizar, asi que debe coincidir con el fondo real del correo.
Verificacion rapida: Si tu temporizador esta destinado a estar en una seccion oscura, establece el color de fondo del temporizador en ese mismo color oscuro, no el gris predeterminado.
Estiramiento del modo responsivo
Util, 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 disenos moviles, pero puede estirar un GIF pequeno y hacerlo ver borroso.
Cuando Responsivo causa desenfoque:
- Tamano base pequeno
- Contenedor de correo ancho
- El temporizador se estira mas alla de su tamano natural de pixeles
Como usar Responsivo de forma segura:
- Comienza con tamano XL o Personalizado alto
- Habilita Retina Ready si quieres maxima 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 digitos
GIF usa una paleta de colores limitada. Si tu color de texto es muy cercano al fondo, la imagen puede perder pixeles de borde sutiles. Con transparencia, esto puede empeorar e incluso puede producir agujeros dentro de los numeros cuando los colores colapsan en la misma entrada de paleta.
Si ves puntos
Aumenta el contraste ligeramente. Haz el texto un poco mas oscuro o claro.
Si los bordes se ven sucios
Evita colores casi identicos. El fondo solido ayuda.
Si los digitos 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 producira artefactos en el correo.
Codigo de insercion no actualizado
Una razon sorprendentemente comun por la que la solucion "no funciona"
Tu codigo de insercion contiene los valores finales de CSS (width, max-width, a veces reglas de display). Si cambias la configuracion pero sigues usando el codigo de insercion antiguo, tu correo seguira renderizando la version antigua.
Solucion: Copia el codigo de insercion de nuevo despues de los cambios, y reemplazalo 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 tamano. Gmail puede invertir los colores y cambiar como se muestra tu correo. Usa una configuracion especifica para modo oscuro.
Tenemos una guia dedicada para esto
El modo oscuro de Gmail es un entorno que los remitentes de correo no pueden controlar completamente. Nuestra guia explica por que sucede esto y como reducir el impacto.
Leer: Como manejar el modo oscuro en GmailPaso a paso: Arreglar un temporizador borroso
Abre la configuracion de tu temporizador
Trabaja desde el temporizador real, no desde una plantilla de correo antigua
Aumenta el tamano base
Usa L, XL o Personalizado mas alto. Si Responsivo esta activado, comienza mas grande.
Establece el fondo correctamente
El fondo solido es el mas limpio. Si es transparente, haz coincidir el color mate.
Habilita Retina Ready
Luego aumenta el tamano si el temporizador se vuelve demasiado pequeno.
Vuelve a copiar el codigo de insercion
Reemplaza el codigo antiguo en tu correo. El codigo antiguo mantiene el CSS antiguo.
Envia un correo de prueba
Verifica en escritorio y movil antes de enviar a tu lista
Preguntas frecuentes
Por que mi temporizador se ve nitido en el editor pero borroso en el correo?
El editor muestra el GIF en su tamano nativo. En el correo, el diseno puede estirar la imagen (especialmente con modo Responsivo). Si el GIF es pequeno, estirarlo lo hace borroso. Aumenta el tamano a L o XL, luego vuelve a copiar el codigo de insercion.
Necesito Retina Ready?
Si te importa la nitidez en MacBooks, iPhones y pantallas modernas, si. Retina Ready muestra el GIF a la mitad del tamano para un aspecto mas limpio. Despues de habilitarlo, aumenta el tamano para mantener el mismo ancho visual.
Deberia usar fondo transparente o solido?
El fondo solido da el resultado mas limpio cuando el fondo de tu correo es consistente. La transparencia es util cuando el temporizador esta sobre multiples fondos, pero debes hacer coincidir el color de fondo mate para evitar halos.
Por que veo puntos, bordes sucios o pixeles irregulares?
Esto usualmente significa bajo contraste, fondo mate incorrecto o limitaciones de la paleta GIF. Aumenta el contraste ligeramente y evita colores casi identicos para texto y fondo. El fondo solido a menudo lo arregla instantaneamente.
Por que veo agujeros dentro de los digitos?
Con transparencia y paleta GIF limitada, los colores pueden fusionarse y partes del digito pueden volverse transparentes. Arreglalo deshabilitando la transparencia o cambiando el color del texto a un tono mas distinto.
Cambie la configuracion pero nada mejoro. Por que?
Probablemente todavia estas usando el codigo de insercion antiguo. Vuelve a copiar el codigo de insercion y reemplazalo en tu plantilla de correo.
Resumen
La mayoria de los problemas de calidad del temporizador provienen de estirar un GIF pequeno, usar transparencia con un fondo mate no coincidente, o usar colores casi identicos que rompen el anti-aliasing en GIF. Para los mejores resultados GIF: usa un tamano mas grande (L o XL), habilita Retina Ready, prefiere fondo solido cuando sea posible, vuelve a copiar el codigo de insercion despues de los cambios, y prueba en un correo real.