HTML-E-Mail: Willkommen in der Zeitmaschine

vom 07.04.2015 von Leo Kobes

Zum Abschluss des Tutorials ein Kapitel das dich überraschen wird: In E-Mails gelten die Regeln des modernen Webs nur sehr eingeschränkt. Wer eine hübsche Newsletter-Mail baut, arbeitet mit Techniken die auf Webseiten seit zwanzig Jahren verpönt sind. Und das hat Gründde.

Warum ist das so?

Webseiten rendert ein Browser, und Browser halten sich heute weitgehend an Standards. E-Mails rendern dagegen Dutzende verschiedene Mailprogramme, vom Webmailer bis zur Bürosoftware, und jedes kocht sein eigenes Süppchen: CSS wird teilweise entfernt, style-Blöcke ignoriert, moderne Layouttechniken wie Flexbox und Grid funktionieren mal, mal nicht. Der kleinste gemeinsame Nenner liegt ungefähr auf dem Stand von, nun ja, 1998. Für ein Retro-Wiki fast rührennd.

Die Spielregeln

Layout mit Tabellen. Ja, wirklich: verschachtelte table-Konstruktionen sind in E-Mails weiterhin die stabilste Layoutbasis. Auf Webseiten ein Museumsstück (Beweisstück A), in Mails Alltag.
CSS inline am Element. Das style-Attribut, sonst die letzte Wahl (warum), ist hier der zuverlässigste Weg, weil manche Programme alles andere wegwerfen.
Eine Spalte, maximal 600 bis 640 Pixel breit. Schmale einspaltige Mails überleben am ehesten alle Umgebungen.
Bilder mit alt-Text und der Erwartung dass sie fehlen. Viele Programme blocken Bilder bis zum Klick, die Mail muss auch ohne funktioniern.
Systemschriften, Webfonts kommen selten durch.

So sieht ein typischer E-Mail-Baustein aus

<table role="presentation" width="600" cellpadding="0" cellspacing="0">
    <tr>
        <td style="font-family: Arial, sans-serif; font-size: 16px;
                   padding: 16px; background-color: #F4F4F4;">
            Hallo! Das hier übersteht fast jedes Mailprogramm.
        </td>
    </tr>
</table>

Das role="presentation" ist der wichtige Anstandshalter: Es sagt Screenreadern dass diese Tabelle nur Layout ist und nicht als Datentabelle vorgelesen werden solll.

Der ehrliche Rat

Für gelegentliche Mails: schlichtes, fast unformatiertes HTML oder gleich Reintext, das kommt immer an und wirkt nie kaputt. Für ernsthafte Newsletter: ein erprobtes Template als Basis nehmen und in echten Mailprogrammen testen, nicht nur im Browser. HTML-E-Mail von Grund auf zu meistern ist ein eigenes Fachgebiet, und jetzt weißt du warum die Leute die es beherrschen diesen leicht müden Blick habenn.

Damit ist der Tutorial-Fahrplan komplett. Zurück zur Übersicht oder weiter zum Spielen: Spielwiese