Standalone E-Mail Newsletter

Betreffzeile:

• Max. 60 Zeichen inkl. Leerzeichen und Emojis
• Emojis bitte nur verwenden, wenn sie bereits von Ihnen erfolgreich getestet wurden und angezeigt werden können.

Zu beachten:

• Template-Breite max. 600 px
• Der Inhalt der Betreffzeile darf nicht irreführend sein
• Die Betreffzeile soll den User zum Öffnen animieren und den Inhalt des Newsletters wiedergeben

Preview Text:

• Max. 80 Zeichen inkl. Leerzeichen

Zu beachten:

• Der Inhalt des Preview Textes darf nicht irreführend sein
• Der Preview Text soll den User zum Öffnen animieren und den Inhalt des Newsletters ergänzend zum Betreff und Absendername beschreiben.
• Der Preview Text sollte das erste Element Ihres HTMLs sein, sodass keine anderen Inhalte angezeigt werden.
• Verwenden Sie auf gar keinen Fall die gleiche Schriftfarbe wie die Hintergrundfarbe → SPAM-Gefahr
• Best practice: https://litmus.com/community/snippets/1-hidden-preheader-text

Größe:

• max. 50 KB; max. 600 Pixel Breite empfehlenswert, keine Beschränkung für die Höhe
• Untersagt: Scripting und Flash
• Nicht empfohlen: Rich Media

Technische Details:

• Links bitte immer mit http:// oder https:// vorangestellt.
• Bitte im txt-Format anliefern

Durch einen Wechsel der Rendering-Engine ab Outlook 2007 vom Internet Explorer auf Word 2007 ergaben sich auch für Mailings Änderungen hinsichtlich der Verwendung von HTML/CSS-Inhalten.

Deshalb muss Outlook nachstehendes beachtet werden:

• alle styles inline angeben
• keine div Positionierungen verwenden, bitte Tabellen benutzen
• Tabellen immer definieren, z.B. <table width="600" border="0"cellpadding="0" cellspacing="0">
  • „px“ im width=“...“ und height=“...“– nicht zulässig
  • in jeder Spalte align und valign definieren
  • jede Spalte „stylen“, in der Text enthalten ist – z.B. <td style="font-family: verdana;font-size:11px;color:#000000">text text text</td>
  • Schriftfarben Hexadezimal angeben, keine Kurzform.
• Leere Tabellenzellen die eine geringere Höhe als 20 haben, müssen wie folgt angegeben werden: <td width="13"height="10" style=“font-size:10px;line-height:10px;“></td>
• auf Hintergrundbilder (background images) verzichten
  • falls diese trotzdem benutzt werden, muss zusätzlich eine bgcolor dahinter angegeben werden, welche als Ersatz einspringt
  • Vorsicht: Schriftfarbe darf nicht identisch mit bgcolor sein!

• background-repeat ist nicht zulässig
• auf Formulare verzichten
• keine Frames benutzen
• paddings immer ausschreiben: padding-left, padding-right, padding-top, padding-bottom
• keine margins verwenden
• kein JavaScript verwenden

Empfehlungen / Hinweise:

• <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> verwenden
• Verlinkte images immer mit border=“0“ angeben
• Alle Bilder mit display:block versehen: <img src=“BILDPFAD“ border=“0“ style=“display:block;“ />
• Animierte gif-images: bitte beachten, dass bei einigen Clients nur der erste Frame angezeigt wird
• images sollten alt-Attribute zur Definition eines Alternativ-Text enthalten, falls die Grafiken nicht heruntergeladen werden
• images nicht größer als 150 KB
• images sollten wenn möglich die Größenangaben width=“..“ und height=“..“ enthalten.
• „px“ sind als zusätzliche Angabe in HTML-Tags wie z.B. width=“..“ nicht erlaubt
• Area maps – zulässig, aber nicht empfehlenswert
• Font-Family: Arial, Verdana, Tahoma, Times New Roman – empfehlenswert

Zur Verringerung des Spamwertes sollte/n:

• der title im html-Header <title>xxx</title> nicht länger als 25 Zeichen sein
• Keine Schriftgrößen von 0 und größer als 18 verwendet werden (z.B: font-size: 0px).
• auf Groß- bzw. Kleinschreibung bei der Benutzung von Grafiken geachtet werden (Bildernamen sind case sensitive)

Einige Smartphones auf Android-Basis und Drittanbieter-Apps (z. B. GMail-App) unterstützen die CSS3 media Queries, die zur Umsetzung des Responsive Designs von Newslettern notwendig sind nicht vollständig.

Für Retina Displays empfehlen wir, alle Grafiken (vor allem Icons) in doppelter Auflösung zu integrieren.

Folgende Angaben sollten für Responsive Design im Code enthalten sein:

• <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
• <meta name="format-detection" content="telephone=no">
• <meta name="x-apple-disable-message-reformatting">

Um eine optimale Darstellung zu gewährleisten, empfehlen wir (sofern noch nicht enthalten) folgende CSS-Angaben im <head> zu integrieren:

<style type="text/css">

ReadMsgBody {width: 100%;}.ExternalClass {width: 100%;}.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: normal;}body {-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;margin: 0 !important;padding: 0 !important;-ms-text-size-adjust: 100%;}p {margin: 1em 0;}BODY:link {color: #333333 !important;text-decoration: underline !important;}a[x-apple-data-detectors] {color: inherit !important;text-decoration: none !important;font-size: inherit !important;font-family: inherit !important;font-weight: inherit !important;line-height: inherit !important;}table td {border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;}img {outline: 0;-ms-interpolation-mode: bicubic;}a img {border: none;}p {margin: 1em 0;}div, button {display:block !important;}

</style>

Animierte GIFs können ganz normal als Bild eingebunden werden. Einige Clients unterstützen die Anwendung jedoch nicht. In diesen Clients wird das erste Bild der GIF-Bildfolge dargestellt. Das erste Bild der GIF-Bildfolge sollte deshalb schon Sinn in der gesamten Newsletter-Darstellung ergeben.

Damit wir ihre Werbemittel schnellstmöglich einbinden und somit einen reibungslosen Ablauf garantieren können, bitten wir Sie folgende Vorgaben und Anmerkungen zu beachten.

• Die Werbemittel (html und txt) sowie die Betreffzeile/n und Testmailempfänger sind spätestens 72h vor dem Versandtermin einzureichen.