Posteingangsvorschau
Bevor jemand Ihre E-Mail öffnet, sieht er nur eine Zeile in einer Liste: von wem sie kommt, den Betreff und ein paar graue Wörter. Geben Sie Ihre ein und sehen Sie, wie sieben Posteingangs-Layouts sie anzeigen und wo sie abgeschnitten werden.
Die grauen Wörter nach oder unter dem Betreff. Lassen Sie das Feld leer, um zu sehen, was der Posteingang zeigt, wenn eine Nachricht keinen hat.
Der erste sichtbare Text der E-Mail, von oben nach unten, einschließlich eines Links „Im Browser ansehen“ oder Bildbeschreibungen. E-Mail-Programme nutzen ihn, wenn der Vorschautext fehlt oder zu kurz ist.
Die Vorschau wird von Ihrem Browser gezeichnet, während Sie tippen. Nichts, was Sie hier eingeben, wird an uns gesendet oder gespeichert.
Im Posteingang
Sieben Posteingangszeilen, in HTML in typischen Breiten nachgezeichnet und als ungelesene Nachricht dargestellt. Es sind gute Näherungen: Die tatsächliche Abschneidestelle verschiebt sich mit der Fensterbreite, der Dichte-Einstellung, der Schriftgröße und den auf dem Gerät installierten Schriften. Die Zeichenzahlen werden an diesen Nachbildungen gemessen.
Worauf Sie achten sollten
Versteckter Preheader zum Einfügen
Setzen Sie diesen Block ganz an den Anfang von <body>, vor jeden anderen Text. Das div ist in der geöffneten Nachricht unsichtbar, doch Posteingangslisten lesen es, weil es der erste Text im HTML ist. Die lange Folge von ‌ nach Ihrem Satz ist der Füllraum: Zeichen ohne Breite und Leerzeichen, die den Rest des Vorschaubereichs füllen, damit das E-Mail-Programm keinen Platz mehr hat, um „Diese E-Mail im Browser ansehen“ oder einen Menülink anzuhängen.
Die drei Teile einer Zeile im Posteingang
Ein Posteingang ist eine Liste von Zeilen, und jede Zeile besteht aus denselben drei Teilen der Nachricht.
- Absendername
- Der Anzeigename im
From-Header, der Teil vor der Adresse:From: Harbor Books <orders@harborbooks.example>. Er steht meist zuerst oder fett, und daran entscheiden die Leute, ob sie Sie kennen. - Betreff
- Der
Subject-Header. In jedem Layout eine Zeile, mit Auslassungspunkten abgeschnitten, wenn der Platz ausgeht. - Vorschautext
- Das ist gar kein Header. Das E-Mail-Programm liest den Anfang des Nachrichtentexts und zeigt die ersten Wörter, die es findet. Wenn Marketingleute dort bewusst einen Satz platzieren, nennen sie ihn Preheader.
Die ersten beiden steuern Sie direkt. Den dritten steuern Sie nur, indem Sie festlegen, was der erste Text in Ihrem HTML ist.
Abgeschnitten wird nach Breite, nicht nach Zeichenzahl
Sie haben wahrscheinlich gelesen, dass Betreffzeilen unter 50 Zeichen bleiben sollten. Das ist eine Faustregel, denn kein E-Mail-Programm zählt Zeichen. Jedes gibt dem Betreff einen Kasten mit einer bestimmten Breite und lässt den Text überlaufen. In eine Zeile aus schmalen Buchstaben passt mehr als in eine aus Großbuchstaben. „lila Licht ist fit“ ist auf dem Bildschirm viel kürzer als „WWW MMM SOMMER“, obwohl beide ungefähr gleich viele Zeichen haben.
Diese Seite arbeitet genauso. Jedes Mock-up ist ein echtes HTML-Layout in typischer Breite, mit den Schriften, die das jeweilige Programm anfordert, und der Browser schneidet den Text so ab, wie das Programm es täte. Das Skript misst dann, wie viele Ihrer Zeichen übrig geblieben sind. Verstehen Sie die Zahlen als „ungefähr“, denn Ihr Leser hat vielleicht eine größere Schrift, ein schmaleres Fenster oder ein Gerät ohne diese Schrift.
| Layout | Wie die Zeile aufgebaut ist |
|---|---|
| Gmail und Yahoo Mail im Desktop-Browser | Eine Zeile. Eine feste Spalte für den Absender, dann teilen sich Betreff und Vorschau die restliche Breite, ein langer Betreff verdrängt also die Vorschau. |
| Outlook auf dem Desktop, Apple Mail auf dem Mac | Eine schmale Listenspalte neben dem Lesebereich. Absender, Betreff und Vorschau bekommen je eine eigene Zeile. Apple Mail gibt der Vorschau zwei Zeilen. |
| Gmail und Outlook auf dem Smartphone | Drei übereinanderliegende Zeilen zu je einer Zeile, neben einem runden Initial. |
| Apple Mail auf dem iPhone | Absender, Betreff, dann standardmäßig zwei Zeilen Vorschau. Der Leser kann das von keiner bis fünf einstellen. |
Den Vorschautext festlegen und auffüllen
Um den Vorschautext zu bestimmen, machen Sie Ihren Satz zum ersten Text im Body und verstecken ihn in der geöffneten Nachricht. Der Block, den diese Seite erzeugt, erledigt das mit einem div, das keinen Platz einnimmt und keine sichtbare Farbe hat.
Es gibt einen Haken. Ist Ihr Satz 60 Zeichen lang und hat das Programm Platz für 110, liest es weiter und hängt an, was danach kommt: „View this email in your browser“, den Alternativtext Ihres Logos, „Home | Shop | Contact“. Um das zu verhindern, lassen Sie auf Ihren Satz eine lange Folge von Zeichen folgen, die in der Vorschau Platz einnehmen, aber nichts zeichnen, nämlich einen Bindungsverhinderer (Zero-Width Non-Joiner) und ein geschütztes Leerzeichen, wiederholt (‌ ). Das Programm füllt seinen Vorschaubereich damit und hört auf.
E-Mail-Programme ändern ohne Ankündigung, wie sie Vorschauen bauen, und manche fassen Leerzeichen zusammen. Schicken Sie sich vor einem großen Versand einen Test und sehen Sie ihn sich auf einem Smartphone an.
Worauf die Hinweise beruhen
Die Liste unter den Mock-ups beruht auf einfachen Messungen dessen, was Sie eingegeben haben:
- Schnittpunkte für Betreff und Absendername, aus den Zeichnungen übernommen, wobei Ihnen das kürzeste Smartphone-Layout genannt wird.
- Vorschautext: fehlt, wiederholt den Betreff (gleicher Anfang oder mindestens 80 % derselben Wörter) oder ist kürzer als der Platz, sodass Text aus dem Body folgt.
- Form: mehr als 70 % Großbuchstaben, zwei oder mehr Ausrufezeichen, die Anzahl der Emoji, ein „Re:“ oder „Fwd:“ bei einer Nachricht, die keine Antwort ist.
- Spam-Vokabular: eine kurze englische Liste („free“, „act now“, „guaranteed“…), als Information gemeldet.
Nichts davon entscheidet, wo Ihre Nachricht landet. Postfachanbieter filtern vor allem danach, wer sendet, also ob die Domain SPF, DKIM und DMARC besteht und wie Empfänger ihre E-Mails bisher behandelt haben. Diese Seite prüfen Sie mit der E-Mail-Authentifizierungsprüfung. Die Wörter zählen für das, was nach der Zustellung kommt, wenn ein Mensch entscheidet, ob er die Nachricht öffnet.
Häufige Fragen
Wie lang sollte die Betreffzeile einer E-Mail sein?
Smartphones zeigen etwa 30 bis 45 Zeichen eines Betreffs, je nach Buchstaben und Programm. Setzen Sie die Wörter, die die Nachricht kennzeichnen, in diesen Bereich. Ein längerer Betreff ist in Ordnung, wenn der Rest Details sind, die ein Desktop-Leser sieht.
Was ist der Preheader-Text einer E-Mail?
Der Satz, der in der Posteingangsliste nach oder unter dem Betreff steht. Er ist der erste Text im Body der Nachricht und wird in der geöffneten E-Mail meist per CSS versteckt, sodass er nur in der Liste erscheint.
Warum zeigt meine E-Mail im Posteingang „View this email in your browser“?
Weil dieser Link der erste Text in Ihrem HTML ist und kein Vorschautext davor steht. Fügen Sie einen versteckten Preheader als erstes Element des Bodys ein und füllen Sie ihn auf, damit das Programm nicht bis in den Link weiterliest.
Wie viele Zeichen Vorschautext zeigt Gmail?
Es gibt keine feste Zahl. Im Desktop-Browser setzt Gmail Betreff und Vorschau in eine Zeile, die Vorschau bekommt also, was der Betreff übrig lässt, von nichts bis über 100 Zeichen. Auf dem Smartphone bekommt sie eine eigene Zeile, etwa 35 bis 45 Zeichen.
Was bewirkt ‌ in einem Preheader?
Es ist Füllmaterial, das nichts zeichnet. Ein Bindungsverhinderer (Zero-Width Non-Joiner), gefolgt von einem geschützten Leerzeichen, viele Male nach Ihrem Vorschausatz wiederholt, belegt den Rest des Vorschaubereichs, sodass kein anderer Text der Nachricht angehängt wird.
Landet eine E-Mail wegen Emoji oder Wörtern wie „gratis“ im Spam?
Allein deswegen selten. Filter gewichten Authentifizierung und Ruf des Absenders weit stärker als das Vokabular. Ein Betreff voller Großbuchstaben, Ausrufezeichen und Verkaufswörter wirkt auf den Menschen, der ihn liest, allerdings wie Spam, und das ist Grund genug, ihn zu entschärfen.