Come creare un countdown timer responsive?

Poiché i client email non supportano javascript, i countdown timer sono immagini gif animate che il server genera continuamente con un nuovo conto alla rovescia, creando sempre una nuova gif e visualizzandola al client. Di per sé, questa immagine ha dimensioni precise — larghezza e altezza — quindi l'animazione gif senza ulteriori manipolazioni del codice HTML non può essere responsive.

Per rendere il countdown timer responsive, è necessario avere conoscenze tecniche di markup HTML e CSS, ma cercheremo di descrivere questo processo nel modo più semplice possibile affinché chiunque possa rendere il proprio timer adattativo.

Affinché il countdown timer si adatti automaticamente alla larghezza dello schermo, è necessario conoscere la sua larghezza (ad esempio, la larghezza del timer è 500px), aggiungere questa larghezza alla proprietà CSS max-width, ottenendo max-width=500px (puoi anche sostituire 500px con 100%, ma se la larghezza dell'email è maggiore della larghezza del timer, il timer si estenderà oltre la sua larghezza, con conseguente deterioramento della qualità dell'immagine).

Successivamente, aggiungi le proprietà width=100% e height=auto a questa proprietà CSS, e combina tutte queste proprietà separate da punto e virgola; otterrai questa riga: max-width=500px; width=100%; height=auto;.

L'ultimo passaggio consiste nell'aggiungere questo codice al codice del timer. A tale scopo dobbiamo aggiungere una riga di proprietà all'attributo "style", risultando in questa riga: style="max-width=500px;width=100%;height=auto;". Aggiungi quindi questa riga al codice del timer; il codice completo dovrebbe avere questo aspetto:

<img src="https://m.promofeatures.com/aya" border="0" alt="https://promofeatures.com" style="max-width=500px;width=100%;height=auto;" />

Dopo queste manipolazioni, il tuo timer diventa responsive e puoi aspettarti che si visualizzi perfettamente su qualsiasi dispositivo.

Per semplificare questo processo, abbiamo aggiunto un pulsante che, facendo clic, aggiunge automaticamente questi stili al codice del tuo timer. Vale la pena notare che aggiungiamo la larghezza non come 100% ma come 90%; questo serve affinché il countdown timer, con una larghezza ridotta, abbia margini dai bordi della lettera. Se lo desideri, puoi sostituire questa proprietà con qualsiasi altro valore.