HTML-Tabellen in E-Mails: Was könnte schief gehen?

Wenn Sie schon länger in der E-Mail-Branche tätig sind, haben Sie wahrscheinlich eine Reihe von Problemen mit Ihren E-Mail-Kampagnen erlebt. Von fehlenden Bildern bis hin zu Problemen mit der Zustellbarkeit ist E-Mail-Marketing voller Herausforderungen. Etwas, das Sie vielleicht noch nicht bedacht haben, ist, was mit den Tabellen schief gehen kann – dem eigentlichen Code – der die Grundlage Ihrer E-Mails bildet.

Bei HTML-Tabellen kann leider viel schief gehen. Heute wollten wir einige der häufigsten Probleme mit HTML-Tabellen aufschlüsseln und Ihnen einige Tipps geben, damit Sie nicht auf dieselben Probleme in Ihren eigenen E-Mails stoßen.

Warum wir Tabellen verwenden

Zuerst eine kurze Auffrischung, warum wir HTML-Tabellen zum Codieren von E-Mails verwenden. Wie wir in der Vergangenheit besprochen haben, erfordern E-Mail-Marketingkampagnen ihre eigenen speziellen Codierungsüberlegungen. Während Web und E-Mail auf denselben Technologien (HTML und CSS) basieren, entsprechen E-Mail-Anwendungen nicht denselben Standards wie Webbrowser. Jede E-Mail-Anwendung verfügt über eine eigene Rendering-Engine, die bestimmt, welcher Code unterstützt wird und wie E-Mails angezeigt werden. Die schlechte Nachricht für uns ist, dass all diese Rendering-Engines verschiedene HTML-Tags und CSS-Eigenschaften unterstützen.

Aus diesem Grund können wir weitgehend nicht die gleichen Codierungsprinzipien verwenden, die im Webdesign verwendet werden. Um sicherzustellen, dass E-Mails in den meisten E-Mail-Clients richtig angezeigt werden, müssen wir HTML-Tabellen verwenden, um die Struktur einer E-Mail-Kampagne zu erstellen.

Obwohl sich dies in letzter Zeit geändert hat, insbesondere mit dem großen Update von Gmail im letzten Jahr, unterstützen einige E-Mail-Clients immer noch nicht viel HTML und CSS. Das Bemerkenswerteste: Microsofts Outlook-Familie von E-Mail-Clients, die Microsoft Word als Rendering-Engine verwenden. Da Outlook immer noch sehr beliebt ist (derzeit Platz 5 auf unserem E-Mail-Client-Marktanteils-Tracker), müssen E-Mail-Designer immer noch Tabellen verwenden, wenn sie möchten, dass ihre Kampagnen für Abonnenten richtig angezeigt werden.

Und wenn wir uns auf HTML-Tabellen verlassen müssen, gibt es eine Reihe von Dingen, die schief gehen können…

Dinge kompliziert machen

Eines der häufigsten Probleme bei der Verwendung von Tabellen sind übermäßig komplexe Layouts. Dies gilt insbesondere für ältere E-Mail-Vorlagen, die seit einigen Jahren nicht mehr aktualisiert wurden.

Bis vor kurzem wurden die meisten E-Mails mit vielen Tabellen erstellt. Tabellen in Tabellen in Tabellen – eine Praxis, die als Verschachtelung bekannt ist.

Wenn Sie mehrere Tabellen in einer anderen Tabelle verschachteln, führen Sie wahrscheinlich zu Problemen in Ihrem Code. Es ist sehr leicht, beim Verschieben versehentlich eine Tabelle an der falschen Stelle zu platzieren oder ein wichtiges HTML-Tag einzufügen. Und bei einigen Clients (mit Blick auf Sie, Lotus Notes) können Sie feststellen, dass E-Mails schlecht gerendert werden, wenn Sie Tabellen zu tief verschachteln. Aus diesem Grund empfehlen wir, E-Mails mit einem modularen Ansatz zu erstellen, über den unser Freund Brian Graves geschrieben hat. Und versuchen Sie, verschachtelte Tabellen auf ein Minimum zu beschränken. Das Verschachteln von Tabellen ist fast unvermeidlich, aber wenn Sie die Verschachtelungstiefe auf maximal 4-6 Tabellen halten, können Sie Probleme vermeiden.

Ähnlich wie bei komplexen Verschachtelungen können auch zu komplexe Designs problematisch sein. Es ist nicht ungewöhnlich, E-Mails mit mehreren Spalten zu sehen, aber wenn Sie einer E-Mail zu viele Spalten hinzufügen, bereiten Sie sich auf potenzielle Fehler vor.

Einige E-Mail-Clients haben sogar mit grundlegenden Mathematikproblemen Probleme. Bestimmte Versionen von Microsoft Outlook sind dafür bekannt, Tabellenspalten zusätzliche Abstände hinzuzufügen und E-Mail-Layouts zu zerstören. Während Sie vielleicht denken, dass die Verwendung von vier Tabellenzellen mit einer Breite von 25 % sinnvoll ist, fügt Outlook diesen Zellen zusätzlichen Platz hinzu und bewirkt, dass das Layout breiter als 100 % ist. Die resultierende E-Mail wird einige dieser Zellen in einer eigenen Zeile ablegen und Ihre gut gestaltete, perfekt geplante E-Mail-Kampagne ruinieren.

Wenn Sie Ihre E-Mail-Layouts einfach halten, vermeiden Sie potenzielle Probleme mit Ihren Kampagnen und halten Ihre Abonnenten zufrieden.

Fehlende Tags

E-Mails enthalten normalerweise viel Code. Und die meisten E-Mail-Teams arbeiten mit sehr schnellen, engen Zeitplänen. Diese Kombination kann zu Fehlern führen, die eine E-Mail-Kampagne ruinieren können.

Schauen wir uns zur schnellen Auffrischung an, wie HTML geschrieben wird. HTML besteht aus Tags, die Inhalte umgeben. In den meisten Fällen erfordert das richtige Markup sowohl ein öffnendes als auch ein schließendes Tag. Nehmen Sie diese HTML-Tabelle als Beispiel:

 <table> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table>

Sie sehen, dass es drei verschiedene Tags gibt: Die Tabelle, die Tabellenzeile und die Tabellenzelle. Diese Tags werden geöffnet und dann geschlossen (gekennzeichnet mit dem Symbol /).

Obwohl HTML eine nachsichtige Auszeichnungssprache ist, ersticken E-Mail-Clients und ihre Rendering-Engines oft, wenn HTML-Tags fehlen. Leider ist das Fehlen von schließenden Tags ein allzu häufiges Problem in E-Mails. Diese schnellen Bearbeitungszeiten können dazu führen, dass E-Mail-Designer zu schnell programmieren und vergessen, eine Tabelle, Zeile oder Zelle zu schließen. Während dies bei einigen Kunden in Ordnung sein kann, führt dies bei anderen zu fehlerhaften Kampagnen.

Tools wie der W3C Markup Validation Service können dabei helfen, fehlende Tags zu identifizieren. Fehlende Tags und falsch geformtes Markup sind auch der Grund, warum wir die Verwendung von E-Mail-Vorlagen oder Tools wie Builder's Partials und Snippets zum Erstellen von E-Mails empfehlen. Sie tragen nicht nur dazu bei, dass Ihr Code gut geschrieben und ordnungsgemäß getestet ist, sondern haben den zusätzlichen Vorteil, dass Sie Ihren Workflow beschleunigen – so können Sie diese engen Fristen einhalten und Ihr Team zufrieden stellen.

Fehlende Attribute

So wie fehlende Tags Probleme verursachen können, können fehlende HTML-Attribute in Tabellen zu unkonventionell aussehenden Designs führen.

HTML-Attribute sind zusätzliche Eigenschaften, die für HTML-Tags festgelegt werden können. Diese Eigenschaften steuern Dinge wie Elementbreiten und -höhen, Ausrichtung und gleichmäßige Abstände. Unerwarteter Abstand um Tabellenzellen ist eines der häufigsten Probleme, die Sie bei HTML-Tabellen sehen.

Fast alle E-Mail-Anwendungen (und Webbrowser) fügen HTML-Tabellen ihre eigenen Stile hinzu. HTML-Tabellen werden traditionell zur Anzeige von tabellarischen Daten verwendet und waren ursprünglich nicht zum Anordnen und Gestalten von Inhalten gedacht. Aus diesem Grund müssen wir das Standardverhalten von Browsern und E-Mail-Anwendungen überschreiben, um sicherzustellen, dass Tabellen richtig angezeigt werden.

Durch Hinzufügen der Zellenabstands- und Zellenabstandsattribute zur Tabelle – und beide auf Null setzen – können wir sicher sein, dass keine E-Mail-Clients zusätzlichen Platz zu oder um Tabellenzellen hinzufügen.

 <table cellpadding="0" cellspacing="0"> </table>

Ebenso sollten Sie bei Problemen mit Tabellenbreiten oder der Ausrichtung von Tabelleninhalten darauf achten, dass Sie die Breite oder Ausrichtungsattribute von Tabellen oder Tabellenzellen nicht vergessen haben.

Erfahren Sie, wie Sie Fehler beheben

Möchten Sie erfahren, wie Sie Fehler bei Ihren eigenen E-Mail-Kampagnen beheben und peinliche Probleme für Ihre Abonnenten vermeiden? Besuchen Sie uns bei Litmus Live für einen vollständigen Workshop zur Fehlerbehebung bei E-Mails wie ein Profi. Wir gehen auf die häufigsten E-Mail-Stolperfallen, ihre Lösungen und die besten Methoden zur Fehlerbehebung bei Kampagnen ein.

Holen Sie sich Ihre Lackmus Live-Tickets! Melden Sie sich noch heute an, um mit uns E-Mail zu feiern! Jetzt registrieren →