• Unternehmen
  • Aktuelles
  • Die Agentur
  • Was man beim Erstellen eines Newsletters alles beachten sollte
  • Was man beim Erstellen eines Newsletters alles beachten sollte

    Im World Wide Web finden sich bereits zahlreiche Berichte und praktische Tipps zum Thema „Erstellung eines HTML-Newsletters“. Da ich selbst das Vergnügen hatte, Newsletter zu erstellen, habe ich mich entschieden einen eigenen Beitrag (aus der praktischen Sicht) zu verfassen.

    Als ich zum ersten Mal die Aufgabe bekommen habe, einen Newsletter zu erstellen, habe ich nicht ahnen können, dass man, um allen E-Mail-Clients gerecht zu werden, so viele Dinge beachten muss. Vor allem seit der neuen Outlook-Version 2007 hat sich in der Newsletter-Programmierung einiges getan. Oder besser gesagt – „zurück entwickelt“.

    Kurze Erklärung: Outlook 2007 verwendet zum Interpretieren von HTML keine Internet-Explorer-Engine mehr sondern eine Word-2007-Engine. Und da die HTML-Anzeige von Word 2007 beispielsweise keine CSS-Positionierung unterstützt, werden zur Positionierung wieder veraltete Tabellenlayouts verwendet. Begründet wird diese Änderung durch z.B. mehr Sicherheit, einheitliche Darstellung, etc.

    Outlook hat im B2B-Bereich einen Marktanteil von ungefähr 75% , daher hat bei der Erstellung eines HTML-Layouts eine Optimierung für Outlook höchste Priorität!

    Im Folgenden finden Sie ein paar nützliche Tipps zur Erstellung eines Outlook-2007-konformen HTML-Newsletters versehen mit ein paar Beispielen und Kommentaren:

    1. Formulare werden in Outlook 2007 nicht mehr unterstützt:

    Das HTML-Element form wird hier nicht mehr unterstützt. Aber nicht nur Outlook 2007 unterstützt die integrierten Formulare nicht, sondern auch andere wichtige Webmail-Clients.

    Tipp: Es empfiehlt sich eine Verlagerung auf die Landing-Page.

    2. Im Allgemeinen gilt für Outlook 2007 –> Tabellen- und Inline-CSS-Verwendung!

    E-Mail-Client Technische Umsetzung
    Yahoo! Mail CSS
    Hotmail CSS
    Gmail Tabellen und Inline-CSS
    Outlook 2003 and Outlook Express CSS
    Outlook 2007 Tabellen und Inline-CSS
    Lotus Notes Tabellen und Inline-CSS
    AOL 9 CSS
    Thunderbird CSS
    Mac Mail CSS
    Entourage CSS
    Eudora (Mac) Tabellen und kein CSS
    • keine Unterstützung für Hintergrundbilder (CSS) –> background-image, background-position oder background-repeat

    CSS-Eigenschaften background-image zur Festlegung Hintergrundgrafiken, background-position und deren Positionierung und background-repeat um eine Wiederholung der Hintegrundgraphik in x- oder/und y-Achse hervorzurufen, werden von Outlook 2007 nicht unterstützt.

    Tipp: Über das HTML-Attribut background ist es möglich, in Outlook 2007 eine Hintergrundgrafik für body zu realisieren. Hintergrundbilder für Tabelle table, Tabellenzeile tr oder Tabellenspalte td sind hier jedoch nicht möglich.

    Zudem sollte für andere Grafiken ein Alternativtext über das Attribut alt angegeben werden. Dieser erscheint, falls die Anzeige von Grafiken im Browser oder als Standardeinstellung in Outlook 2007 deaktiviert ist.

    Beispiel: <body background=“http://www.beispiel.de/hintergrund.gif“>></body>

    <img src=“http://www.beispiel.de/banner.jpg“ alt=“[Bild:Banner]“/>

    • keine Unterstützung für Positionierung (CSS) –> position

    CSS-Eigenschaft position legt die Art der Positionierung der Elemente fest. Durch position:static z.B. wird ein Element in der Reihenfolge angezeigt, wie es im Dokument definiert ist; position:absolute zeigt das Element dort an, wo es positioniert wurde und position:relative richtet das Element am vorhergehenden aus.

    Outlook 2007 positioniert die Elemente in jedem Fall untereinander, d.h. Eigenschaft position wird nicht unterstützt.

    Tipp: Für die Positionierung müssen alternativ ineinander verschachtelte Tabellenlayouts verwendet werden.

    • keine Unterstützung für Anzeigeart (CSS) –> display

    mit der CSS-Eigenschaft display kann bestimmt werden, wie ein Element angezeigt wird (display: block, inline etc.) und ob überhaupt (display:none).

    Tipp: Für die Umsetzung der einzelnen Anzeigearten müssen hier Tabellenlayouts bzw. die entsprechenden HTML-Tags verwendet werden.

    • keine Unterstützung für Textumfluss (CSS) –> float

    die CSS-Eigenschaft float bestimmt für ein Element, ob nachfolgende Elemente dieses umfließen sollen. float:left bedeutet, dass das Element links steht und rechts umflossen wird, für float:right – umgekehrt. float:none steht für „kein Umfluss“.

    Tipp: Hier könnte man zwar HTML-Attribute des img-Tags für die Realisierung eines Textumflusses verwenden (align, vspace, hspace), jedoch werden diese mittlerweile als veraltet gekennzeichnet. Daher bleibt als Alternative wieder mal der Umweg über ein Tabellenlayout.

    Beispiel: <img src=“bs.jpg“ align=“left“ vspace=“15“ hspace=“15“ />

    <p> Hier erscheint Ihr Beispiel Text, das das Bild rechts umfließt</p>

    3. Animierte Grafiken/GIFs werden von Outlook 2007 nicht mehr unterstützt.

    Angezeigt wird nur eine statische Version.

    4. Genau so wie Adobe Flash und andere Plug-Ins.

    An Stelle eines Flashs wird das typische rote X angezeigt.

    Tipp: Hier besteht die Möglichkeit einen Screenshot aus der Flash-Animation zu machen und in die E-Mail einzubinden, und anschließend mit dem Flash-Film zu verlinken.

    5. Außerdem werden weitere HTML-Elemente wie applet, bdo, button, iframe, input, isindex, menu, noframes, noscript, object, optgroup, option, param, q, script, select nicht unterstützt.

    6. Weitere CSS-Eigenschaften, die nicht unterstützt werden, sind: border-spacing, bottom, clear, content, left, list-style-image, list-style-position, max-height, max-width, outline, table-layout, text-transform, text-shadow …

    Eine gute Übersicht erhält man hier:

    http://msdn.microsoft.com/de-de/library/aa338201(en-us).aspx#Word2007MailHTMLandCSS_Introduction

    Außerdem sind folgende Links zu empfehlen:

    http://www.sitepackage.de/service/tutorials/css-unterstuetzung-in-webmail-systemen.html

    http://www.sitepackage.de/service/tutorials/css-unterstuetzung-in-webmail-systemen-2.html

    Fazit: Durch die Einführung von Outlook 2007 ist der Programmierer gezwungen den HTML-E-Mails mit CSS den Rücken zu kehren und für die optimale Anzeige wieder Tabellenlayouts und Inline-CSS zu verwenden! Somit bewegt sich der CSS-Support in Outlook 2007 ungefähr auf dem Niveau des Internet Explorers 5, was mit mehr Schreibarbeit und somit weitaus längerem Code verbunden ist.

    Die Agentur # , , , ,
    Share: / / /

    9 thoughts on “Was man beim Erstellen eines Newsletters alles beachten sollte

    1. Alexander sagt:

      Sehr guter Beitrag. Ich habe auch immer wieder das Problem, dass jedes Programm und jeder bescheidene Freemailer den Kram anders darstellt.

      Office 2007. Erinnert mich an „Zurück in die Zukunft“

      Gruß, Alexander

      PS: der zweite Link ist falsch verlinkt

    2. Alexander sagt:

      Noch etwas vergessen: Noch ein Surftipp, ähnlich wie Deine Link-Empfehlungen:

      http://www.campaignmonitor.com/css/

      Gruß, Alexander

    3. @Alexander
      Danke für den Hinweis mit dem Link, ist korrigiert.

    4. Danke – nach solch einer Übersicht „jagte“ ich gerade im Web, interessant wären in dem Zusammenhang fähige Editoren zum Thema…

    5. Sandra sagt:

      Eventuell auch noch eine gute Ergänzung: [link=http://www.netzideen-gmbh.de/blog/newsletter-mit-cleverreach-erstellen/]12 Tipps – Newsletter mit Cleverreach[/link]

    6. Clara sagt:

      Auch noch eine gute Ergänzung als Video wie mit Outlook Newsletter erstellt werden – ganz ohne HTML Kenntnisse und Tücken
      http://www.successcontrol.de/V4/Videos/Newsletter/Newsletter.html

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

    Archive