Umsetzung

Die Schrift sollte einheitlich in Style (normal, fett kursiv), Größe und Farbe sein. Das bedeutet, es gibt keine Stiländerungen innerhalb eines Textes oder einer Headline. Innerhalb des gesamten Newsletters kann es zu kleineren Abweichungen kommen (z.B. kleinere Schrift in Teasern), es sollte jedoch trotzdem einheitlich bleiben. Es bedeutet für uns immer großen Aufwand, wenn wir für jedes Element einen eigenen Stil definieren müssen.
Der Abstand im Text (zwischen Paragraphen) ist nicht variabel definierbar. In Newslettern gibt es nur Umbrüche, für eine Leerzeile werden zwei Umbrüche im Text eingefügt. Folglich ist der Abstand abhängig von dem definierten Zeilenabstand.
SVGs sind in Newslettern generell nicht möglich
Hinweis: Abgerundete Ecken wie z.B. bei Buttons funktionieren nicht in allen Clients, bedeutet sie werden eckig ohne Abrundung angezeigt. Wenn das Design auch ohne runde Ecken funktioniert ist das kein Problem.
Hintergrundbilder sollten generell vermieden werden, da es nicht ohne weiteres in allen Clients funktioniert. Maximal im Header ist ein Hintergrundbild möglich, wenn es darüber nur Text (Headlines) und einen Link/Button ohne Bild gibt. Hintergrundbilder bedeuten für uns zusätzlichen Aufwand und Bilder über dem Hintergrundbild sind nicht möglich. (Bilder schließt auch schon einen einfachen Pfeil vor dem Link ein, siehe Punkt weiter unten).
Überlagerungen von einem Bereich in den anderen sind nicht möglich, da der Newsletter aus Tabellen besteht. Ein Beispiel:

Bei der Umsetzung muss immer in abschließenden Tabellen gedacht werden. Folgend haben wir die Tabellen einmal sichtbar gemacht:

Die Höhen der Elemente oder Teaser müssen variabel gestaltet werden, da die Texte und Headlines nicht immer gleich lang sind. Wir können den Button beispielsweise nicht auf die gleiche Höhe wie bei dem Teaser daneben platzieren, da es sich um zwei eigenständige Tabellen handelt, die voneinander nichts wissen.
Farben mit Transparenz funktionieren nicht, daher bitte nur Farben ohne Transparenz benutzen
Stilelemente/Linien vor und/oder hinter Headlines sollten vermieden werden, da wir die länge nicht variabel umsetzen können und das dann zu Problemen führt, wenn die Headline länger als vorgesehen wird. Zudem bricht das ganze mobil dann unschön um. Beispiel kurze Headline:

Links sollten möglichst einheitlich in Farbe und im unterstreichen bzw. nicht unterstreichen sein, da wir dann einen globalen Link-Stil definieren können. Wenn dann z.B. ein Link in einem Textfeld eingefügt wird, greift der globale Link-Stil. Gibt es keinen globalen Links-Stil, werden die Links automatisch blau und fallen aus dem Design. So muss für jeden Link inline der Style ergänzt werden, was die OR nicht kann.
Dreier Elemente sollten mobil immer einspaltig sein, da für zwei nebeneinander der Platz zu gering wäre und der dritte einzeln darunterfällt. Wenn das Element z.B. zweimal hintereinander benutzt wird, können die einzelnen Teaser nicht zusammen in eine Zeile rutschen. Es die Aufteilung wäre 2 – 1 – 2 – 1
Visuelle Quadrate sollten generell bei der Umsetzung beachtet werden, da wir sonst im Nachhinein die Abstände wieder anpassen müssen
Die Abstände zwischen den Inhaltselementen sollten einheitlich sein, damit wir diesen nur einmal definieren müssen. Wenn die Abstände variieren bedeutet das für uns Mehraufwand.
Exklusive Buttons sollten vermieden werden, da sie in der Umsetzung sehr komplex sind und meistens nur mit Mehraufwand in Outlook funktionieren. Hier bitte für Ausnahmefälle Rücksprache mit der Programmierung halten.

Hinweis: Stil-Elemente müssen immer als Bild eingefügt werden und sollten daher sparsam eingesetzt werden. Viele Bilder bedeuten immer einen großen Download für den Newsletter Empfänger. Beispiel Stil-Elemente:

Inhalte in einem Element sind in Cleverreach nicht variabel einsetzbar. Beispiel: Das ist ein dreier Element mit drei festen Inhalts-Bereichen:

Das ist theoretisch das gleiche Element, aber in der Mitte ist der Inhalt anders gestaltet:

Das würde für uns jetzt bedeuten, dass Element muss zweimal angelegt werden, einmal mit drei gleichen Inhalten und einmal mit dem Sonderfall in der Mitte. Möchte der Redakteur den Teil in der Mitte an einer anderen Position haben, würde das für uns wieder ein neues Element bedeuten usw.

In Typo3 ist das kein Problem, hier bitte vor Umsetzung Rücksprache ob der NL in Typo3 umgesetzt wird.

Inhalts-Elemente sollten einheitlich gestaltet werden. Gleiches Problem wie beim Punkt davor. Beispielsweise hat ein Teaser-Element, welches mehrfach im NL eingesetzt wird, einmal eine Trennlinie und dann wiederum keine oder der Stil der Headline ändert sich. Das bedeutet für uns, wir müssen wieder ein neues Element anlegen. Auch hier ist das in Typo3 nicht mehr so das Problem, bitte auch hier Rücksprache.
Wenn Webfonts benutzt werden, muss immer eine Fallback Schrift definiert und auch gestaltet werden. Teilweise kommt es hier nämlich du großen Abweichungen der Schriftgröße, Zeilenabstand etc.
Aufzählungen sind nur mit einfachen Punkt möglich. Bitte keine Pfeile oder sonstiges benutzen. Es funktioniert einfach nicht in Outlook und individual Programmierungen können wir nicht für die OR flexibel einsetzbar machen. Hier müsste immer die Programmierung ran.
Schatten sind nicht möglich.
Mobil sollte es zu möglichst wenig Abweichungen kommen, am besten alles schlicht untereinander setzen -> simples responsive Layout. Eine Umpositionierung wie bei Webseiten ist nicht möglich.
Hinweis: Text – Bild Verhältnis sollte 70 zu 30 sein, aber niemals 50% überschreiten, das könnte dazu führen, dass der Newsletter im Spam landet. Zudem muss immer bedacht werden, dass der Newsletter Empfänger die ganzen Bilder herunterladen muss.

Pflege in Cleverreach

Bilder dürfen nicht größer sein als im Layout vorgesehen. Zum einen ist es unsinnig, da die Bilder auch nicht größer dargestellt werden als vorgesehen und der Empfänger muss so große Dateien herunterladen und zum anderen führt das zu Darstellungsproblemen in Outlook, da Outlook immer die Originalgröße der Bilder anzeigt.