HTML-E-Mail-Vorschau
Ihre Mail in Gmail auf Desktop und Handy sehen

Was eine HTML-E-Mail-Vorschau Ihnen zeigt

Eine HTML-E-Mail-Vorschau zeigt Ihre Mail, bevor sie jemand anderes sieht. Zudem fügen Sie den Code ein, und die Seite zeichnet ihn so, wie Gmail es täte. Dann prüfen Sie ihn auf Desktop und Handy.

Das erspart echten Ärger. Gmail verändert mehr, als die meisten erwarten. Es entfernt manche Tags, ignoriert manches CSS und kürzt lange Nachrichten. Ein kurzer Blick jetzt ist also besser als eine kaputte Mail später.

Diese Vorschau folgt den Regeln, die Google für Entwickler aufschreibt. Sie liest dieselbe Liste unterstützter CSS-Eigenschaften, die Google veröffentlicht. Darum stammen die Prüfungen aus der Quelle und nicht aus Vermutungen.

Kein Server hilft mit, denn Ihr Browser zeichnet die Vorschau selbst. Ihre Mail, mit ihren Namen und Angeboten, verlässt diese Seite nie.

Eine Mail vor dem Senden ansehen

Danach fügen Sie Ihr HTML ein oder öffnen Sie es, und die Vorschau erscheint sofort. Um das Ergebnis zu sehen, müssen Sie nicht einmal einen Knopf drücken. Wenn Sie nur stöbern wollen, wählen Sie ein Beispiel und klicken Sie auf Beispiel ausprobieren.

Die Vorschau lebt in einem eigenen Kasten. Das CSS Ihrer Mail kann diese Seite nicht berühren, und diese Seite kann Ihre Mail nicht berühren. Dadurch bleibt die Vorschau wahrheitsgetreu.

E-Mail-Vorschau für Desktop und Handy

Desktop zeigt Ihre Mail 760 Pixel breit, nahe an der Breite eines Gmail-Lesefensters. Handy zeigt sie 375 Pixel breit, der Breite eines gängigen Handys.

Media Queries reagieren auf diese Breiten. Eine Regel für Bildschirme bis 480 Pixel Breite schaltet sich ein, wenn Sie Handy wählen. So sehen Sie, wie sich zwei Spalten zu einer stapeln.

Wie Gmail Ihr CSS liest

Google pflegt eine Seite namens CSS support in Gmail. Sie listet jede Eigenschaft auf, die Gmail unterstützt. Alles andere ignoriert Gmail.

Dabei stellen Sie Regeln auf Gmail, und die Vorschau lässt alles weg, was die Liste auslässt. Zum Beispiel verschwinden box-shadow, position und Flex-Layouts. Zudem stellen Sie Regeln auf Normaler Browser, und sie lässt nichts weg, so können Sie beide vergleichen.

Selektoren und Media Queries in Gmail

Gmail liest Klassen-, Element- und ID-Selektoren. Attributselektoren und Pseudoklassen wie :hover überspringt es. Bei Media Queries unterstützt es Breite, Ausrichtung und Auflösung.

Die Vorschau folgt denselben Grenzen. Ein übersprungener Selektor erscheint mit einem Beispiel in den Prüfungen, sodass Sie ihn schnell finden.

Betreffzeile und Vorschautext

Danach tippen Sie einen Betreff und einen Absendernamen ein, und die Seite zeichnet eine Posteingangszeile. Sie zeigt den Namen, den Betreff und die ersten Wörter der Nachricht. Diese ersten Wörter sind der Vorschautext.

Viele Mails beginnen mit Im Browser ansehen, das verschwendet die beste Zeile im Posteingang. Fügen Sie stattdessen einen kurzen versteckten Preheader hinzu oder tippen Sie Ihren eigenen Text in Vorschautext. Die Prüfungen warnen Sie, wenn die Mail mit einer schwachen Zeile beginnt.

Eine Dunkelmodus-Vorschau

Viele Leser nutzen Gmail im Dunkelmodus. Das Menü Darstellung gibt eine grobe dunkle Ansicht. Es kehrt helle Farben zu dunklen um und stellt Bilder wieder richtig herum.

Gmail veröffentlicht sein eigenes Verfahren nicht, sehen Sie diese Ansicht also als Warnlicht und nicht als Versprechen. Trotzdem zeigt sie schnell ein dunkles Logo, das auf einer dunklen Seite verschwindet.

Bilder in der Vorschau

Ihr Browser hindert diese Seite daran, Bilder von anderen Seiten zu laden. Das ist eine Sicherheitsregel, und wir behalten sie bei. Darum erscheint ein fremdes Bild als grauer Kasten in der richtigen Größe.

Der Kasten zeigt trotzdem das Layout. Außerdem melden die Prüfungen fehlenden Alt-Text, fehlende Breiten und als Base64 eingebettete Bilder, die Gmail nicht zeigt.

Was Gmail aus Mails entfernt

Gmail führt keine Skripte aus. Es entfernt auch Frames, Formulare, Video und SVG. Außerdem streicht es Event-Handler wie onclick und Links, die mit javascript: beginnen.

Die Vorschau tut dasselbe und listet jede Entfernung auf. So erfahren Sie von einem kaputten Button vor Ihren Lesern.

Die Kürzungsgrenze von 102 KB

Gmail kürzt eine Nachricht, die größer als 102 KB ist. Den Rest versteckt es hinter einem Link namens Gesamte Nachricht anzeigen. Steht Ihre Abmeldezeile ganz unten, sehen Leser sie vielleicht nie.

Das Feld Größe zeigt Ihre Mail in Kilobyte. Um sie zu verkleinern, entfernen Sie Kommentare, wiederholen Sie weniger Inline-Stile und schicken Sie den Code durch einen HTML-Minifier.

Prüfungen für Kaltakquise-Vorlagen

Eine Kaltakquise-Mail wirkt am besten, wenn sie wie eine Notiz von einem Menschen aussieht. Halten Sie das Design also schlicht: ein paar Absätze, ein Link und ein klarer Weg zur Abmeldung.

Die Prüfungen melden die üblichen Probleme. Außerdem warnen Sie vor Mails, die fast nur aus Bildern bestehen, vor Links, die ins Leere führen, und vor einer fehlenden Abmeldezeile. In den USA erklärt der CAN-SPAM-Leitfaden, warum Letzteres wichtig ist.

Eine vorhandene Datei öffnen

Die meisten Mail-Tools lassen Sie das HTML einer Vorlage exportieren. Speichern Sie es als Datei, klicken Sie auf Datei öffnen, und die Vorschau erscheint. Dateien bis 2 MB funktionieren, weit mehr, als Gmail ohnehin zeigen würde.

Links vor dem Senden prüfen

Ein kaputter Link kostet Sie einen Leser. Die Prüfungen zählen jeden Link und warnen vor leeren, vor einfachen http-Links und vor unsicheren. Links bleiben in der Vorschau abgeschaltet, ein versehentlicher Klick führt Sie also nie von Ihrer Arbeit weg.

Danach öffnen Sie vor dem Senden jeden Link einmal in Ihrem eigenen Browser. Lesen Sie dann die Adresse in der Statusleiste und prüfen Sie, ob sie dorthin führt, wohin die Worte sagen.

Gmail-Regeln mit einem normalen Browser vergleichen

Dabei schalten Sie das Menü Regeln hin und her und beobachten Sie, was sich ändert. Jeder Unterschied ist etwas, das Gmail Ihren Lesern wegnehmen würde. Beheben Sie diese zuerst, denn sie entscheiden, wie Ihre Mail in dem Posteingang aussieht, den die meisten nutzen.

Eine Vorschau ist kein vollständiger Test

Diese Vorschau ist nicht Gmail selbst. Sie folgt Gmails schriftlichen Regeln, aber das echte Gmail hat eigene Apps, Konten und Updates. Außerdem senden Sie sich auch einen Test.

Auch Outlook und Apple Mail verhalten sich anders. Tabellen und Inline-Stile sind der sicherste Weg, eine Mail für alle zu bauen.

So beheben Sie die üblichen E-Mail-Probleme

Dabei nutzen Sie Tabellen fürs Layout und setzen Sie bei jedem Bild eine Breite. Zudem schreiben Sie wichtige Stile inline. Zudem fügen Sie jedem Bild Alt-Text hinzu und halten Sie die Hauptspalte nahe 600 Pixel. Sehen Sie dann wieder auf beiden Bildschirmen nach.