Die Mail sieht kaputt aus

Eine Mail wird nicht von einem Browser angezeigt, sondern von einem Mailprogramm, und die machen alle etwas anderes. Outlook am Rechner rendert mit der Engine von Word. Gmail schneidet lange Mails ab. Ein Telefon im Dunkelmodus dreht Farben um. Deshalb ist das Mail-HTML von Keystate absichtlich altmodisch gebaut, und deshalb sieht eine Mail nie ganz genauso aus wie die Seiten, auf denen du sie gebaut hast.

Was gegen Outlook eingebaut ist

Der ganze Aufbau: verschachtelte Tabellen, Farben am Zellenrahmen, Abstände über Innenpolster. Kein flex, kein grid, keine Farbverläufe im Layout. Outlook kennt das alles nicht, und was es nicht kennt, ignoriert es einfach: Eine Mail mit modernem Layout fällt dort in eine Spalte auseinander.

Aus demselben Grund kommen einige Stellen als Bild und nicht als Text: Schrift über Fotos, Verläufe, gebogene Linien, die Stadtsilhouette im Marktblick. Als HTML zerfielen sie in Outlook, als Bild stehen sie überall.

Der Vorschautext, der in der Postfachliste hinter dem Betreff steht, ist ebenfalls für Outlook mitgedacht: Er wird auf eine Weise versteckt, die auch die Word-Engine versteht.

Dunkelmodus

Keystate bittet das Mailprogramm ausdrücklich, die Mail hell zu lassen. Im Kopf jeder Mail stehen zwei Angaben, color-scheme und supported-color-schemes, beide auf light only.

Apple Mail und Outlook halten sich daran. Gmail auf Android hält sich nicht immer daran und dreht Farben teils trotzdem um. Dagegen gibt es keinen Hebel, den wir hätten: Es gibt keine zweite, dunkle Fassung deiner Mail, und es wird auch keine geben. Zwei Fassungen laufen auseinander, und die Mail, die du in der Vorschau abgenommen hast, wäre dann nicht die, die rausgeht.

Praktisch heißt das: Wenn dir jemand ein Bildschirmfoto mit umgedrehten Farben schickt, ist das kein Fehler in deiner Mail. Prüf im Zweifel, ob dein Logo auf dunklem Grund noch lesbar ist. Ein Logo mit weißer Fläche darunter steht dort besser als ein freigestelltes mit schwarzer Schrift.

Schriften

Keine Webfonts. In einer Mail kommt nur an, was auf dem Gerät des Empfängers schon liegt, und Mailprogramme laden keine Schrift nach. Deine Wunschschrift steht deshalb vorn im Stapel und fällt sauber auf die systemeigene Groteske zurück, wenn sie fehlt. Auf dem iPhone ist das San Francisco, in Outlook meist Arial.

Die Folge: Deine Hausschrift siehst du in der Vorschau, deine Empfänger sehen sie meistens nicht. Das ist bei allen Newsletter-Anbietern so. Was aus deiner Marke wirklich in der Mail ankommt, steht in Wie deine Mail aussieht und Schrift wählen.

Farben und Lesbarkeit

Deine Akzentfarbe färbt Pillen, Rahmen, Preisfeld, Trennlinien und Knöpfe. Die Schrift darauf kippt automatisch: Ist die Fläche hell, wird der Text dunkelgrau, ist sie dunkel, wird er weiß. Ein Büro mit hellgelbem Akzent hatte vorher weiße Schrift auf Hellgelb, also nichts Lesbares und keine Fehlermeldung dazu.

Beurteilt wird dabei nicht der Mittelwert der Farbkanäle, sondern die Helligkeit nach dem Auge: Reines Grün wirkt hell, reines Blau dunkel.

Der Text der Mail bleibt immer lesbar dunkel, wie in einer gedruckten Broschüre. Die Hausfarbe färbt Flächen, keine Schrift.

Breite

Die Mail ist 620 Pixel breit und geht unter 620 Pixeln auf die volle Breite des Bildschirms. Der Umschalter in der Vorschau verengt den Rahmen auf 390 Pixel, genau die Breite, mit der ein aktuelles Telefon rechnet. Du siehst dort also wirklich die Umbrüche, die beim Empfänger greifen.

Eine Falle: Klicks auf eine Mailadresse

Ein Link, der ein Mailprogramm öffnen soll, funktioniert nicht überall. Apple Mail und Outlook am Rechner öffnen es. onOffice und die meisten Webmailer tun nichts, der Klick verpufft ohne Fehlermeldung. Genau so ist es am 24.08.2026 aufgetreten: in onOffice reglos, in Apple Mail normal.

Wenn dir jemand sagt, ein Kontaktknopf in deiner Mail „tut nichts”, frag zuerst, in welchem Programm er die Mail gelesen hat.

Was du selbst tun kannst

1. Testmail an dich, und zwar in das Programm, in dem deine Empfänger lesen. Siehe Testmail an dich. Eine Vorschau im Browser ersetzt das nicht.
2. Handy-Ansicht in der Vorschau einmal durchsehen, siehe Handy-Vorschau.
3. Kein eigenes HTML in die Textfelder. Eine aus Word kopierte Tabelle bringt Formatierungsreste mit, die in der Mail nicht mitgehen.
4. Bei einem echten Darstellungsfehler das Bildschirmfoto mitschicken und dazu das Programm nennen: Outlook 2019, Gmail auf Android, Apple Mail auf dem iPad. Ohne diese Angabe ist ein Darstellungsfehler nicht nachstellbar. Der Weg dafür ist Fehler melden.

Fehlen nicht Formen, sondern Bilder, dann steht die Antwort in Bilder werden nicht angezeigt.