Newsletter mit Tabellen - Vom Roh-Gerüst zur finalen Version (NYT)
Mein Leitfaden „Newsletter mit Tabellen – vom Roh-Gerüst zur finalen Version“ zeigt Schritt für Schritt, wie ein stabiler, professioneller HTML‑Newsletter entsteht – optimiert für die oft problematische Darstellung in Outlook, Gmail und Apple Mail.
Ausgangspunkt ist ein bewusst einfach gehaltenes Grundgerüst, das Sie mit eigenen Inhalten füllen können. „Wir bauen zuerst nur das Skelett: wrapper table → container table → Bereiche Header/Main/Footer.“ Dieser Ansatz sorgt dafür, dass das Layout von Beginn an sauber strukturiert ist.
Im ersten Teil erklärt das Dokument die wichtigsten CSS‑Bausteine, jeweils genau dort, wo sie zum ersten Mal benötigt werden. Dazu gehören der unverzichtbare body‑Reset, der graue Hintergrundrahmen sowie der 600‑Pixel‑Container – ein seit Jahren bewährter Standard im Newsletter‑Design. Auch typische Stolperfallen werden erläutert, etwa warum Bilder immer display:block benötigen oder weshalb Abstände in E‑Mails fast ausschließlich über ‑Padding gesteuert werden. Meine Anleitung betont: „E-Mail-Layout ist kein modernes Weblayout. Tabellen sind nicht ‚altmodisch‘, sondern die einzige stabile Methode.“
Der zweite Teil führt durch den kompletten Aufbau eines Newsletters: Preheader, Headerbild, Divider, Tickerzeile, Artikelkarte, Fließtext mit CTA‑Button sowie ein zweispaltiges Grid für weitere Inhalte. Jeder Schritt enthält klare ToDos und beschreibt das erwartete Ergebnis im Browser. Besonders wertvoll ist die Erklärung, warum bestimmte Muster – etwa feste Spaltenbreiten oder Link‑Wrapper um ganze Artikelkarten – in E-Mails unverzichtbar sind.
Im dritten Teil zeigt die Anleitung, wie aus der Seminarversion die finale, E-Mail‑taugliche HTML‑Datei entsteht. Da viele Clients Style‑Blöcke ignorieren, müssen zentrale Eigenschaften wie Padding, Schriftgrößen oder Bildattribute inline gesetzt werden. Die Checkliste „Inline muss rein“ fasst alle Pflichtangaben kompakt zusammen und dient als zuverlässige Qualitätskontrolle.
Mein Leitfaden soll damit nicht nur Technik vermitteln, sondern auch Praxiswissen: Ein klarer, nachvollziehbarer Weg vom Rohgerüst zum robusten Newsletter, der in allen Clients stabil dargestellt wird.
Anmerkung vom 1. Juni 2026: Der hier beschriebene Artikel ergänzt einen weiteren Artikel zur selben Beispieldatei, in der das gesamte HTML dargestellt wird und der Fokus nicht so sehr auf dem CSS liegt. Dieser Artikel erscheint hier mit einem eigenen Blogbeitrag in den nächsten Tagen.
Hinweis zum Thema dieses Beitrags
Wenn Sie eines meiner Seminare zu diesem Thema besucht haben, können Sie begleitend zu meinen Blog‑Beiträgen Schritt‑für‑Schritt‑Anleitungen und Erläuterungen erhalten, die beim Wiederholen und Vertiefen der Inhalte helfen. Dazu können Sie sich hier in meine Abonnenten‑Liste eintragen. Sie können den Bezug jederzeit wieder beenden. Ich versende keine Werbemails und keine sonstigen Informationen außerhalb dieses Themas.
In Abonnenten-Liste eintragen Abonnement beenden
Falls Sie diesen Artikel nicht erhalten haben – etwa weil er bereits veröffentlicht wurde, bevor Sie sich für das Abonnement eingetragen haben – können Sie ihn über den folgenden Button noch einmal abrufen.
Alle im Blog beschriebenen Artikel sind urheberrechtlich geschützt und stehen unter der Lizenz
Creative Commons Attribution-NonCommercial (CC BY NC 4.0).
Urheber ist Frank Zeitz.
Die Nutzung, Weitergabe und Bearbeitung des Materials ist unter Nennung des Urhebers für nicht-kommerzielle Zwecke zulässig. Nicht gestattet ist insbesondere die Verwendung dieses Materials im Rahmen eigener Schulungen, Seminare, Workshops oder sonstiger Lehrtätigkeiten durch Dritte, unabhängig davon, ob diese kommerziell oder nicht-kommerziell erfolgen. Eine Nutzung zu Unterrichtszwecken – ganz oder in Teilen – bedarf in jedem Fall der vorherigen ausdrücklichen schriftlichen Zustimmung des Urhebers.