Ein Code für alle Fälle – Darum braucht es einen Profi für E-Mail-HTML

Gerade bei Newsletter-Templates „von der Stange“ kann es bei der Mailing-Erstellung verlockend sein, den vorhandenen Code um ein paar Zeilen zu erweitern, um beispielsweise Absätze einzurücken oder interaktive Elemente einzufügen. Aber Vorsicht: Auch die Art und Weise, wie der Code des Mailings vom anzeigenden Medium interpretiert wird, ist für die Darstellung entscheidend. In diesem Blogbeitrag zeigen wir anhand von Praxisbeispielen, welche Fallen beim Eingreifen in den Code von HTML-Templates lauern und was bei der Mailing-Erstellung zu beachten ist, damit keine Darstellungsfehler auftreten.

VorherigesNächstes

Eingreifen in den Code birgt Tücken

Ein Beispiel aus der Praxis verdeutlicht, welche Folgen das Eingreifen in den Code eines HTML-Templates haben kann: Dieter kümmert sich in seinem Unternehmen um das E-Mail-Marketing und nutzt für die Erstellung der Newsletter das Inxmail Advanced Template. Bei einer Fortbildung hat Dieter kürzlich einige Befehle und hilfreiche Kniffe rund um die Programmierung mit HTML-Code gelernt. Sein neu errungenes Wissen möchte er bei der Erstellung seines nächsten Newsletters direkt einbringen. Um einen Absatz rechts auszurichten, packt er den Textteil in einen Div-Container und passt die Position über die CSS float-Eigenschaft an. Außerdem baut er noch eine GIF-Animation ein. Die Darstellung überprüft er im Editor und in der Browservorschau – sieht super aus. Beim Versand einer Testmail an das eigene Outlook-Postfach folgt dann die Überraschung: Von den Formatierung ist nicht mehr viel zu sehen. Und auch das GIF scheint erstarrt.

Was ist in Dieters Beispiel falsch gelaufen? Sowohl seine eingefügten Zeilen als auch der Code des Templates sind fehlerfrei. Dieter hat jedoch übersehen, dass auch die Art und Weise, wie der Code vom anzeigenden Medium (E-Mail-Client) interpretiert wird, eine entscheidende Rolle für die Darstellung spielt.

Clients interpretieren HTML-Code unterschiedlich

Da es keinen allgemeingültigen Standard für die Darstellung von Mailings gibt, interpretiert jeder E-Mail-Client (u. a. Microsoft Outlook, Gmail, Thunderbird, Apple Mail, AOL etc.) HTML-Code anders. Einige Clients fügen sogar noch Code hinzu, um die Darstellung besser einzubetten und beispielsweise Adressen oder Telefonnummern automatisch zu erkennen. Im Beispiel von Dieter ist es so, dass Microsoft Outlook nicht mit den eingefügten Befehlen umgehen kann. Außerdem wird bei animierten GIFs hier lediglich der erste Frame dargestellt und keine Animation.

In der Regel verwenden Empfänger unterschiedliche Clients oder sogar mehrere Geräte zum Lesen ihrer Mailings. Bei der Erstellung eines Templates ist es deshalb wichtig, den Code so zu schreiben, dass er auf einer möglichst großen Anzahl von Clients und Geräten gut aussieht. Die Basis bildet hier ein Gerüst von HTML-Tabellen, dessen Optik teilweise an mehreren Stellen definiert wird. Um den Beschränkungen kleinerer Smartphone-Displays Rechnung zu tragen, werden diese häufig mit Media-Queries (Medienabfragen) erweitert. Deshalb sind in der in der Regel viele Zeilen Code notwendig, um die gewünschte Optik des Mailings auf möglichst vielen Clients sicherzustellen.

Was passiert mit fehlerhaftem Code?

Nicht optimal geschriebener Code kann zur Folge haben, dass das Layout eines Mailings auf bestimmten Clients komplett verändert wird. So werden beispielsweise Media-Queries von der Google-Mail-App auf Android 6 gänzlich ignoriert, sobald auch nur ein kleiner Fehler (z. B. ein Tippfehler oder fehlendes Semikolon) im CSS vorhanden ist, während im Regelfall nur die betreffende fehlerhafte Zeile nicht interpretiert wird. Die Folge: Der Betrachter bekommt keine mobile Darstellung des Mailings, sondern die Desktopversion angezeigt, deren Lesbarkeit auf dem Smartphone eher unschön und unpraktisch ist.

Eine andere Falle birgt dieses Beispiel für Microsoft Outlook: Um einen dreispaltigen Artikel in ein Mailing einzubinden, der in der mobilen Variante untereinander in drei einspaltige Artikel umbrochen wird, ist wieder ein Tabellen-Gerüst notwendig. Bei der Ausgabe dieser Tabellen würde Microsoft Outlook diese jedoch bereits in der Desktopversion teilweise untereinander darstellen. Um das zu verhindern, muss ein eigener Code für die Darstellung in Outlook ins Mailing implementiert werden. Dadurch ist sichergestellt, dass das Mailing sowohl in der Desktop- als auch in der Mobilversion korrekt ausgespielt wird.

Das sind nur zwei Beispiele, die die Tücken der HTML-Programmierung verdeutlichen. Sie zeigen jedoch gut, welche Folgen Ungenauigkeiten oder Unkenntnis über die Interpretation der einzelnen Clients haben können.

Fehler im Code nicht unmittelbar sichtbar

Zusammengefasst kann man also sagen: Um HTML-E-Mails so zu programmieren, dass sie auf jedem Client gut aussehen, reichen Grundkenntnisse noch nicht aus. Kleine Änderungen oder das Hinzufügen von Code in vordefinierte E-Mail-Templates können Darstellungsprobleme nach sich ziehen – auch wenn sie vielleicht auf den ersten Blick nicht unbedingt sichtbar sind. Daher ist es ratsam nur eigene HTML-Mails zu erstellen oder HTML-Code in Inxmail Smart Templates einzufügen, wenn man sich sowohl mit HTML/CSS als auch den Eigenheiten und Tücken der diversen E-Mail-Clients gut auskennt. Das gilt auch für eigenen Send-Time-Content oder Bausteine, weil hier ebenfalls HTML-Code erzeug wird, der die Darstellung der Mailings beeinflussen kann.

Beratung, Gestaltung und Support aus einer Hand

Wir bei Inxmail sind Experten für die Umsetzung von professionellen und individualisierten Mailings. Wir haben jahrelange Erfahrung rund um das Spezialverhalten der verschiedenen E-Mail-Clients. Darüber hinaus testen wir unseren Code und finden die beste Lösung, um Empfängern auf möglichst jedem Client ein E-Mail-Erlebnis zu bieten.

Sowohl bei Individuallösungen und auch bei unseren Newsletter-Templates wird der Code von uns so entwickelt und optimiert, damit ein möglichst großer Empfängerkreis optisch ansprechende E-Mails im Corporate Design unserer Kunden erhält. Unser Template Solutions Team übernimmt für Sie die Anpassung Ihrer HTML-Templates oder unterstützt Sie beratend bei der Umsetzung. Lernen Sie die Vorteile und vielfältigen Möglichkeiten unserer Newsletter-Templates kennen.

Arbeiten bei Inxmail

Auf unserer Karriereseite erfahren Sie mehr über Inxmail als Arbeitgeber. Zudem gibt es eine Infoseite für Softwareentwickler. Die aktuellen Stellenangebote finden Sie in unserem Jobportal.