Webfonts

Grundsätzlich sollten Standardschriftarten verwendet werden, da nur wenige Clients Webfonts unterstützen. Hier werden alle Schriften aufgezählt welche verwendet werden können: https://www.w3schools.com/cssref/css_websafe_fonts.asp

Es ist dennoch möglich Webfonts zu benutzen, wenn eine Fallback-Schriftart eingebaut ist. Dann werden in den unterstützten Clients die Webfont angezeigt und in allen anderen die Fallback-Schriftart.

Folgende Clients unterstützen Webfonts:

Apple Mail
iOS Mail
Google Android
Samsung Mail (Android 8.0)
Outlook for Mac
Outlook App

Beispiel einer Webfont-Einbindung (Didact Gothic) mit Fallback-Schrift (Arial):

<link href="https://fonts.googleapis.com/css?family=Didact+Gothic&display=swap" rel="stylesheet" type="text/css">
<style type="text/css">
[style*="Didact Gothic"] {
      font-family: 'Didact Gothic', Arial, sans-serif !important;
}
</style>

font-family: Arial, sans-serif, 'Didact Gothic';

Die Schriftart wird über den Link geladen. Mit dem style-Attribut wird die Schriftart überschrieben, wenn diese verfügbar ist. Sonst wird die Fallback-Schrift überall als erste Schriftart definiert und ganz zum Schluss die Webfont. Somit wird sichergesteltt, dass in allen Clients die richtige Schrift benutzt wird.

Aufbau

Ein Newsletter besteht NUR aus Tabellen, im allgemeinen Gilt immer: Programmieren wie 1999!.
Die Tabellen werden ineinander geschachtelt und Spalten und Zeilen werden auch als Abstände benutzt.

Würde man "Div" Tags wie auf jeder Webseite benutzen, so würde es Probleme bei der Positionierung der Elemente geben, denn z.B. Outlook kennt den CSS-Style "float" nicht, ja nicht einmal "display". Mit Tabellen kann man die Elemente "bombenfest" positionieren, denn Tabellen-Spalten sind immer nebeneinander und Tabellenzeilen immer untereinander.

Deshalb sind Überlagerungen auch grundsätzlich nicht möglich. Einzige Möglichkeit, das zu umgehen ist eine Grafik zu erstellen, die den Anschein einer Überlagerung erzeugt.

Hier ein Beispiel, in dem die Tabellenstruktur hervorgehoben ist:

[BILD 1]

P-Tags haben fast überall eigene Styles wie Margins und Paddings, was zu unerwünschten Abständen führt, und der Redakteur kann später nicht in allen P-Tags die Abstände zurück setzten. Daher werden in längeren Texten nur Umbrüche verwendet.
Text so anlegen, dass es Raum zum Ausweichen gibt. Text nicht „auf Naht“ anlegen.
Es kann keine überlappende Designelemente geben. Diese müssen, wenn unbedingt notwendig in Grafiken angelegt werden. In diesem Beispiel muss der gesamte Bereich inkl. der Hauptüberschrift als Grafik angelegt werden, da sich ein „schwebender“ Button nicht umsetzen lässt und die „Sandgrafik“ sich nicht mit der Tabelle, die die Überschrift enthält überschneiden kann
[BILD 2]
SVGs sind Tabu. Deshalb sollten Grafiken, vor allem Icons, nicht zu klein angelegt sein. Vor allem das PNG Format hat die Angewohnheit, sehr kleine Details „matschig“ wirken zu lassen.
Alle anderen Bilder sollten als jpg und in der richtigen Größe angeelegt werden. Outlook stellt immer die Originalgröße der Bilder da, daher nicht größer anlegen als vorgesehen! Zudem möchte kein Empfänger unendlich große Bilder herunterladen.

Styles

In Newsletter werden die CSS-Styles IMMER Inline, direkt in die Spalte geschrieben.
Es gibt tatsächlich Clients, die Classen und Ids neu vergeben (Yahoo) und es gibt Clients wie Gmail, die den <style>-Tag einfach entfernen! Somit würden alle Styles einfach ignoriert werden. (Dies gilt ausschließlich für die Desktop-Version.)

Paddings und Margins sollten vermieden werden, da sie im besten Fall falsch dargestellt werden, meistens aber ganz vernachlässigt werden. Abstände sollte man mit "width" und "height" in den Tabellenspalten und -zeilen erzeugen.
Achtung: Auch wenn nichts in der Spalte steht, wird die line-height der Standardschrift verwendet. Das bedeutet, wenn man eine Höhe von 10 Pixel haben möchte, muss man die line-height und die font-size auf null setzen, da sonst die minimale Höhe bei ungefähr 18 Pixel liegt.
Trotzdem sollte man in den leeren td-Tag ein geschütztes Leerzeichen (&nbsp ;) machen, weil es auch Clients gibt, die den leeren Tag sonst komplett ignorieren würden.

Besonders bei Links sollte man die Styles immer direkt in den A-Tag schreiben, da die Styles sonst zu 90% überschrieben werden.

Was man nicht verwenden sollte:

Webfonts (oder nur mit Fallback Schrift)
Hintergrundbilder (wenn dann nur Text über Bild)
Schatten
Generell keine CSS3 Styles
Transparenz
alles was mit Positionierung und Display zu tun hat
animierte GIFs
Listen nur mit Punkten als Auzählungszeichen (siehe Outlook)

Beispiel für die Integration eines Hintergrundbildes:

<table class="full-width" width="800" align="center" border="0" cellspacing="0" cellpadding="0" style="background-color: #ffffff; max-width: 800px; outline: #efefef solid 1px; box-shadow: #e0e0e0 0px 0px 30px 5px; margin: 0px auto;">
        <tbody><tr>
            <td align="center" valign="top" class="container" style="background:url(https://mailbuild.rookiewebstudio.com/customers/aWaRtGun/user_upload/20200507141635_header.jpg);background-color: #ffffff; background-repeat: no-repeat; background-position: 50% 0%, 50% 50%; background-size: cover;" bgcolor="#ffffff" background="https://mailbuild.rookiewebstudio.com/customers/aWaRtGun/user_upload/20200507141635_header.jpg" width="100%" height="100%">
                <!-- start container -->
                <!--[if gte mso 9]>
                <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; width:600pt; height:312pt; background-repeat:no-repeat;" src="https://mailbuild.rookiewebstudio.com/customers/aWaRtGun/user_upload/20200507141635_header.jpg" ></v:image>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" fill="true" stroke="false" style="border: 0; display: inline-block; position: absolute; width:600pt; height:312pt;  background-repeat:no-repeat;">
                    <v:fill type="frame" src="https://mailbuild.rookiewebstudio.com/customers/aWaRtGun/user_upload/20200507141635_header.jpg" color="#333333" ></v:fill>
                <![endif]-->
                <table width="600" align="center" border="0" cellspacing="0" cellpadding="0" class="container" style="margin: 0px auto; width: 600px; min-width: 320px; max-width: 90%;" role="presentation">
                    <tbody><tr>
                        <td valign="top" align="center">
                           // Inhalt
                        </td>
                    </tr>
                </tbody></table>
                <!--[if gte mso 9]>
                </v:fill>
                </v:rect>
                </v:image>
                <![endif]-->
                <!-- end container -->
            </td>
        </tr>
    </tbody>
</table>

Eine ausführliche Übersicht, über das was man verwenden kann gibt es hier: https://www.campaignmonitor.com/css/

How Tos für Outlook

"Vor Microsoft Outlook 2007 konnten mit einigen wenigen Einschränkungen Newsletter ohne Probleme entwickelt und dargestellt werden, da Outlook als Standard die Rendering-Engine vom Internet Explorer benutzt hatte. Ab Outlook 2007 hat sich Microsoft dazu entschieden, zum Lesen von Emails die Rendering-Engine von Word zu benutzen. Diese Umstellung hatte auch zur Folge, dass der CSS Support extrem eingeschränkt wurde. Eine Begründung liegt darin, dass viele Features einfach nichts mit dem lesen von Emails zu tun haben. Warum Features wie float, margin und padding für Designer nicht verfügbar oder nur eingeschränkt benutzbar sind weiß keiner so genau, dennoch wurde es erstmal so gelöst. "

"Tabellen in Outlook erzeugen automatisch eine ungewollte Lücke wenn diese eine Höhe von ungefähr 1790 Pixel überschreitet. Outlook möchte damit eine Unterteilung erzwingen. Das wird am besten mit mehreren Tabellen umgangen und ereignet sich als beste Lösung zu diesem Problem welches sich nur ab der gewissen Höhe von 1790 Pixel ereignet."
Mehr über die Tücken von Outlook: http://www.visual4.de/blog/marketing/darstellungsprobleme-bei-newslettern-fuer-outlook-2007-2010-und-2013

Es gibt tatsächlich Conditions für Outlook:

<!--[if mso]>Mich siehts du nur in Outlook<![endif]-->

<!--[if gte mso 9]> Mich siehts du nur in Outlook 2000<![endif]-->

<!--[if !mso]>Mich siehst du nicht in Outlook<![endif]-->

Wenn Listen im Newsletter dargestellt werden, müssen die li den Style mso-special-format:bullet; bekommen, sonst wird kein Listenstil angezeigt.

Mehr dazu und die richtigen Outlook-Versionen gibt es hier: http://templates.mailchimp.com/development/css/outlook-conditional-css/

Responsive

Der Newsletter ist auf das wesentliche reduziert, aber dennoch ist es möglich den Newsletter Responsive zu programmieren.

Das Standard Apple-Mail Programm und auch das von Android, können ganz normal Media Querys interpretieren und auch viele Styles die man sonst leider vernachlässigen muss.

Wie: In der Desktop-Version hat man zwei oder drei Tabellen nebeneinander in einer Spalte. In der mobilen Version gibt man diesen Tabellen über Klassen eine Breite von 100%, display: block und float:none und schon sind diese untereinander. Wichtig ist, das alles Styles ein !important haben, damit alle Inline-Styles überschrieben werden können.

Was nicht geht, sind Spalten untereinander darstellen.

Aufpassen muss man auch bei Elementen, die man ein und ausblenden möchte, in der mobilen Version ist das kein Problem, doch in der Desktop-Version kennen viele Clients den Style display:none nicht!

Icons

Icons sollten von der Grafik als PNGs zur Verfügung gestellt werden und so angelegt sein, dass Icons, die in einem Kontext stehen (z.B. nebeneinander gesetzte Socialmedia Icons) in einem gleichförmigen transparenten Hintergrund platziert sind. Die Größe der einzelnen PNGs lässt sich ansonsten nicht ohne größeren Aufwand anpassen.