[DE] Design erstellen

Ihre individuelle Vorlage erstellen

Gerne übernehmen unsere Expert:innen die Gestaltung Ihres individuellen E-Mail-Designs. Gemeinsam entwickeln wir Ihre individuelle Vorlage im Corporate Design Ihres Unternehmens, welche alle Anforderungen optimal erfüllt.

Möchten Sie das Design selbst erstellen, liefert Ihnen diese Schritt-für-Schritt Anleitung alle wichtigen Informationen, damit Ihre Wünsche und Anforderungen in der neuen Vorlage bestmöglich umgesetzt werden können.

Das richtige Format

Wichtig ist, dass das Design in einem Format geliefert wird, aus dem wir die Schriftgrößen, Farbwerte und Bildgrößen entnehmen können.

Arbeiten Sie bei Bild- und Schriftgrößen bitte immer mit Pixel-Werten!

Erstellen Sie Ihr Design in einem der folgenden Formate:

• Figma
• Adobe InDesign
• Adobe Photoshop
• Adobe XD
• HTML (alle Texte müssen in der Datei enthalten sein!)

Folgende Formate sind nicht geeignet:

• Canva
• PDF
• Adobe Illustrator

Schritt für Schritt zu Ihrem Wunsch-Design

1. Breite und Abstände festlegen

Unsere Empfehlungen lauten:

• Newsletter Breite: 600px - 780px (Desktop) und 385px - 415px (Mobil)
• Zusätzlicher Abstand zum Inhalt: 20px - 40px (Desktop) und 10px (Mobil)

2. Schriftart einbinden

In E-Mails sollten Sie auf websichere Schriften (z.B. Arial, Verdana, Georgia, …) setzen, da diese auf den meisten Geräten standardmäßig installiert sind. Soll eine sogenannte Webfont verwendet werden, empfehlen wir den Einsatz von Google Fonts.

Sonstige Sonderschriften, welche im CD Ihres Unternehmens genutzt werden, können ebenfalls in unseren Vorlagen verwendet werden. Stellen Sie uns bitte die entsprechenden Dateien zur Verfügung!

Für Mail-Clients, bei denen die Sonderschrift nicht installiert ist, oder welche generell keine Webfonts oder Sonderschriften unterstützen, hinterlegen wir eine alternative, websichere Schrift als sogenannte Fallback-Schrift.

3. Schriftgrößen definieren

Wir empfehlen folgende Schriftgrößen (diese berücksichtigen die geltenden Barrierefreiheits-Richtlinien):

• Überschriften: ab 16px
• Fließtext: 14-16px
• Abschluss: ab 12px

Damit alle Texte gut lesbar sind, gilt es Schriftgrößen unter 12px zu vermeiden. Kleine Schriftgrößen können von Spamfiltern als negative Signale interpretiert werden – das Risiko, dass Ihre Aussendung im Spam-Ordner des Empfängers landet, steigt.

Die empfohlene Zeilenhöhe für den Fließtext beträgt das 1,5-fache der gewählten Schriftgröße.

4. Beispiel-Newsletter aufbauen

Überlegen Sie aufgrund Ihrer bisherigen Kampagnen, welche Anforderungen und Wünsche an die neue Vorlage bestehen.

Unser Tipp: Arbeiten Sie im Design-Prozess mit Bildern und Texten aus tatsächlichen Aussendungen, um böse Überraschungen in der fertigen Newsletter-Vorlage zu vermeiden.

Folgende Punkte gilt es bei der Erstellung des Newsletter-Designs zu beachten:

• Platzieren Sie Texte, Bilder und andere Elemente entlang gemeinsamer Ausrichtungslinien. In den oben genannten Programmen stehen Ihnen dafür „Hilfslinien“ zur Verfügung.
• Der Grundaufbau mit Header, Body und Footer muss beachtet werden. Alle Kampagnen starten mit dem nicht wiederholbaren Header und enden mit dem Footer. Im Body dazwischen befinden sich die wiederholbaren Abschnitte. Hier finden Sie Beispiele aus der Praxis.
• Achten Sie auf eine klare Struktur mit ausreichendem Abstand zwischen den Abschnitten und Elementen.
• Call-to-Action Elemente müssen eine ausreichende Größe haben, damit sie von den Leser:innen wahrgenommen und geklickt werden können. Wir empfehlen deshalb Buttons mit einer Gesamthöhe von rund 50px. Die Breite orientiert sich an der Textlänge.

Vermeiden Sie:

• komplexe Layouts mit einer stark verschachtelten Struktur
• zu viele Spalten bei wichtigen Informationen
• individuelle Layouts oder Sonderlösungen für einzelne Aussendungen
• Designs, welche nur mit Bildern funktionieren

Responsive Design

Immer mehr Empfänger öffnen ihre E-Mails auf mobilen Geräten wie z.B. Smartphones. Da diese Geräte eine geringere Bildschirmgröße haben (ca. 6,7 Zoll), müssen Kampagnen entsprechend angepasst werden.

Ob Ihre Vorlage mobiloptimiert ist, beeinflusst die Erfolgschancen Ihrer Aussendungen also wesentlich.
Um zu erfahren in welchen E-Mail-Clients Ihre Kampagnen geöffnet werden, werfen Sie einen Blick auf Ihre Newsletter Statistik.

In Desktop-Clients können mehrspaltige Elemente sehr gut nebeneinander dargestellt werden. In der mobilen Version müssen die einzelnen Spalten, aufgrund der geringeren Bildschirmbreite aber untereinander platziert werden. Es ist deshalb notwendig darauf zu achten, dass Inhalte auch einzeln verständlich sind und in der richtigen Reihenfolge eingegeben werden.

Alle weiteren Informationen zur mobilen Darstellung der Kampagnen finden Sie in diesem Whitepaper.

Herausforderungen im Dark Mode

Auf jedem Gerät kann der Dunkelmodus aktiviert werden. Dadurch werden die Farben in Ihren Aussendungen teilweise bis vollständig umgekehrt. Helle Hintergründe werden dunkel und dunkle Text mit heller Schriftfarbe dargestellt.

Da jeder E-Mail-Client eigene Methoden zur Farbanpassung verwendet, gibt es derzeit keinen einheitlichen Standard für den Dark Mode. Moderne E-Mail-Clients wie Apple Mail oder Outlook Web lassen sich durch Regeln im Vorlagencode fast vollständig beeinflussen. Gmail sowie Outlook Desktop wenden hingegen eigene Algorithmen zur Farbumkehr an und ignorieren Vorgaben weitgehend. Eine vollständig konsistente Darstellung über alle E-Mail-Clients hinweg ist derzeit technisch nicht möglich.

Folgende Herausforderungen treten im Dark Mode besonders häufig auf:

• Herausforderung: Ein Logo mit transparentem Hintergrund verschwindet im Dark Mode.
  Lösung: Bereiten Sie die Bilddatei so auf, dass um den dunklen Bereich ein heller Schatten liegt. Im Light Mode ist dieser Schatten nicht sichtbar, im Dark Mode sorgt er dafür, dass sich die dunklen Bildelemente vom dunklen Hintergrund abheben.
• Herausforderung: Der Text ist im Dark Mode nicht lesbar.
  Lösung: Unsere Vorlagenexperten versuchen Ihre CI-Farben auch im Dark Mode so gut wie möglich beizubehalten oder suchen nach geeigneten, alternativen Farbtönen.

Reality Check

Jeder E-Mail-Client verwendet eine eigene Rendering-Engine und interpretiert HTML und CSS unterschiedlich. Dadurch kann ein Newsletter je nach Programm – insbesondere in Outlook und Gmail – optisch leicht vom ursprünglichen Design abweichen.

Unser Ziel ist es, Ihr Newsletter-Design so originalgetreu wie möglich umzusetzen. Aufgrund der unterschiedlichen technischen Möglichkeiten der einzelnen Mail-Clients kann jedoch nicht garantiert werden, dass das Design in jedem Programm exakt gleich dargestellt wird. Kleinere Abweichungen bei Abständen, Schriftarten oder der Positionierung einzelner Elemente sind technisch bedingt und lassen sich nicht vollständig vermeiden. Entscheidend ist, dass Ihr Newsletter in allen unterstützten Mail-Clients funktional, gut lesbar und dem Charakter Ihres Corporate Designs treu bleibt.

Welche E-Mail-Clients konkret betroffen sind, verraten Ihnen unsere Vorlagenexpert:innen.
Jetzt Kontakt aufnehmen!

Häufig gestellte Fragen

Kann ich Videos in Kampagnen integrieren?

Ja, wir können bei den einzelnen Bildplatzhaltern die Video-Funktion aktivieren. Weitere Informationen zur Video-Funktion erhalten sie in diesem Whitepaper.

Besteht die Möglichkeit zur Integration von Hintergrundbildern?

Ja, Hintergrundbilder können im Newsletter integriert werden. Es ist allerdings wichtig zu beachten, dass Bilder mit sehr hoher Qualität und zu viele Hintergrundbilder im gesamten Newsletter eine lange Ladezeit beim Empfänger verursachen können.

Es gibt mehrere Möglichkeiten ein Hintergrundbild in der mobilen Version darzustellen. Nähere Informationen dazu finden Sie hier.

Kann CSS in Kampagnen verwendet werden?

Ja, in der Webversion funktioniert das ohne Probleme. Viele E-Mail-Clients unterstützen aber nur einen eingeschränkten Bereich von CSS Eigenschaften. Folgende Eigenschaften sind davon betroffen:

• Abrundungen
• Schatten
• Hover-Effekte
• Animationen
• Transparenzen

Transparente Flächen werden in allen Outlook Versionen bis Office 365 und GMX/Web.de als Volltonfarbe dargestellt.

Gibt es eine Möglichkeit JavaScript in den Newsletter zu integrieren?

Nein, diese Möglichkeit besteht leider nicht. JavaScript wird von den meisten E-Mail-Clients aus Sicherheitsgründen blockiert.

Unser Tipp: Anstelle von JavaScript Animationen mit animierten GIFs arbeiten.