Countdown-Block
Ein live tickender Fristen-Timer für Launches, Sales und Enddaten — serverseitig als animiertes GIF gerendert, die eine Technik, die tatsächlich in jedem gängigen E-Mail-Client zuverlässig weiterzählt, Outlook eingeschlossen.
Wie es funktioniert
Kein E-Mail-Client führt CSS-Animationen oder JavaScript zuverlässig genug aus, um eine Uhr von Grund auf zu animieren, daher versucht der Countdown-Block das gar nicht erst; er bettet stattdessen ein einfaches <img> ein, das auf ein serverseitig gerendertes animiertes GIF verweist. Bei jedem Abruf berechnet MailInApp die verbleibende Zeit bis zur konfigurierten Frist und kodiert von Grund auf ein frisches „TT:HH:MM:SS“-artiges Digitaluhr-Bild (ein von Grund auf selbst geschriebener GIF89a-Encoder, keine gewrappte Bibliothek). Es zeichnet eine Sekunde pro Bild für sechzig Bilder und friert dann auf dem letzten Bild ein, sodass das Bild nach dem Öffnen eine volle Minute sichtbar weiterzählt und dann anhält. Da das Bild zum Abrufzeitpunkt anhand der echten Frist neu generiert wird, statt einmal beim Senden vorgerendert zu werden, ist es unabhängig davon korrekt, wann oder wie oft ein Empfänger die E-Mail öffnet. Der Endpunkt sendet zudem no-cache-Header, sodass Bild-Proxys wie der von Gmail bei jedem Öffnen neu abrufen, statt ein veraltetes zwischengespeichertes Bild wiederzuverwenden.
Die Bild-URL selbst ist HMAC-signiert (der Zeitstempel der Frist und die Farbe sind in die Signatur eingebacken), sodass sie von niemandem außer MailInApp als freistehender GIF-Countdown-Renderer missbraucht werden kann. Der Endpunkt ist öffentlich, wie die Interaktions- und Öffnungs-Tracking-Endpunkte, liefert aber nur das, wofür er signiert wurde.
Es gibt keine Divergenz zwischen E-Mail und Live-Ansicht, wie sie Karussell oder Akkordeon haben — beide Kontexte betten denselben Bild-Endpunkt ein. Die E-Mail nutzt eine absolute URL (eine E-Mail hat keinen Seitenursprung, gegen den sich ein relativer Pfad auflösen ließe), während die Live-Ansicht eine ursprungsrelative nutzt.
Es gibt auch keine separate „Fallback-Ebene“ jenseits des Bildes selbst. Ein Client, der keine GIFs animieren kann, zeigt weiterhin das erste Bild — eine bedeutungsvolle, korrekte Momentaufnahme der verbleibenden Zeit, kein Platzhalter. Der Alt-Text des Blocks und der Klartext-Teil der E-Mail tragen beide dieselbe verbleibende Zeit in Worten (z. B. „Angebot endet in 2 T 4 Std“), sodass die Frist auch bei vollständig deaktivierten Bildern lesbar bleibt.
Sobald die Frist verstrichen ist, stoppt der Block die Darstellung des GIFs und wechselt stattdessen zu reinem Text für den beendeten Zustand — keine weitere Bildanfrage, kein veraltetes „00:00:00:00“ mehr.
Konfigurierbare Felder:
- Label — der Text über dem tickenden Bild, z. B. „Angebot endet in“.
- Endet am — die Frist, als Datum und Uhrzeit gewählt.
- Farbe — die Ziffern-/Textfarbe, verwendet sowohl im gerenderten GIF als auch im Text für den beendeten Zustand.
- Schriftgröße (px) — die Schriftgröße des Labels während des Countdowns.
- Schriftgröße nach Ablauf (px) — die Schriftgröße der Nachricht „Dieses Angebot ist abgelaufen“, die nach Ablauf der Frist gezeigt wird.
Ein Countdown ist reiner Inhalt, wie ein Bild- oder Text-Block — es gibt nichts anzutippen oder abzusenden, daher erzeugt er nie ein Interaktionsereignis und erscheint nie im Antworten-Dashboard, im CSV-Export oder in einem Projekt-Webhook.
Beispiele
Subject
Our biggest sale of the year starts now
Eine Flash-Sale-E-Mail mit einer 24-Stunden-Frist ist der klassische Einsatz: Der sichtbar tickende Countdown ist es, was Dringlichkeit auf einen Blick begreifbar macht. Er bleibt korrekt, egal ob der Empfänger die E-Mail in der ersten Minute öffnet oder zwei Tage später, nachdem der Sale bereits vorbei ist — in diesem Fall zeigt er korrekt den beendeten Zustand statt einer eingefrorenen Lüge. Ein limitiertes Produkt-Drop kann einen Countdown mit einem Produkt-Block kombinieren, sodass sowohl die Uhr als auch der Bestandszähler gemeinsam Dringlichkeit vermitteln. Siehe E-Commerce & Produkt-Drops für das vollständige Muster. Eine Erinnerung zur Veranstaltungsanmeldung kann bis zur Anmeldefrist herunterzählen (nicht bis zur Veranstaltung selbst; dafür ist Zum Kalender hinzufügen da), um Zögernde zum Handeln zu bewegen, bevor das Zeitfenster schließt.
So sieht der statische Fallback aus
<div style="margin:12px 0">
<p style="margin:0 0 6px;font-size:16px;font-weight:700;color:#111827">Offer ends in</p>
<img
src="https://mailinapp.com/api/countdown?t=1753401600000&c=111827&s=9f2a...&"
width="207" height="34"
alt="Offer ends in 2d 4h"
style="display:block;max-width:100%;height:auto"
>
</div>
Es gibt kein separates „Fallback-Markup“ darüber hinaus: Jeder Client rendert dasselbe <img>-Tag. Der einzige Unterschied ist, ob dieser Client GIFs animiert (die meisten tun das) oder auf dem ersten Bild einfriert (eine Handvoll älterer Clients) — in beiden Fällen wird eine korrekte verbleibende Zeit gezeigt.