Zum Inhalt

E-Mail-spezifische Anpassungen

CSS-To-Inline

In einigen E-Mail-Clients müssen die CSS-Anweisungen für eine fehlerfreie Darstellung direkt am HTML-Tag angefügt werden (also Inline). Bei Nutzung von CSS-To-Inline werden CSS-Eigenschaften beim Rendern automatisch als Inline-Styles in das entsprechende Tag geschrieben.

Um die Funktion zu aktivieren, muss dem gewünschten <style>-Tag das Attribut transform="true" angehängt werden:

Beispiel: CSS-Anweisungen
<style type="text/css" transform="true">
  .font {
      font-family: Open Sans, Arial, sans-serif;
  }
</style>

Beim Rendern werden diese Eigenschaften als Inline-Style in das Tag mit der entsprechenden Klasse geschrieben. Das ursprüngliche <style>-Tag wird nicht in die Ausgabe gerendert.

<table cellspacing="0" cellpadding="0" width="640" align="center">
    <tr>
        <td class="font">Das ist der Text.</td>
    </tr>
</table>

<table cellspacing="0" cellpadding="0" width="640" align="center">
    <tr>
        <td class="font" style="font-family: Open Sans, Arial, sans-serif;">Das ist der Text.</td>
    </tr>
</table>

CSS-To-Attribute

Bei Nutzung von CSS-To-Attribute werden im Header angegebene CSS-Eigenschaften beim Rendern in passende HTML-Attribute gewandelt und dem HTML-Tag angefügt.

Um die Funktion zu aktivieren, muss innerhalb von <head></head> der Kommentar <!-- cssToAttribute --> eingefügt werden:

Beispiel: CSS-Anweisungen
<head>
  <!-- cssToAttribute -->
  <style type="text/css" transform="true">
    .spacer {
        height: 25px;
    }
  </style>
</head>

<table cellspacing="0" cellpadding="0" width="640" align="center">
    <tr>
        <td class="spacer"></td>
    </tr>
</table>

<table cellspacing="0" cellpadding="0" width="640" align="center">
    <tr>
        <td class="spacer" style="height: 25px;" heigth="25"></td>
    </tr>
</table>

Unterstützte Attribute

CSS-Anweisung Erzeugtes Attribut
background-image: url("foo.gif") background="foo.gif"
background-color: #cccccc; bgcolor="#cccccc"
width: 200px; (px oder %) width="200"
height: 200px; (px oder %) height="200"
text-align: left; align="left"

Text-Teil

Damit Mailings nicht als Spam eingestuft werden, ist ein Text-Teil wichtig; auch wenn dieser heute kaum noch tatsächlich angezeigt wird. In der Regel kann dafür die MWML-Struktur des HTML-Teils verwendet werden, jedoch ohne die HTML-Tags.

  • Einzüge durch Leerzeichen oder Tabs sollten entfern werden, da diese sonst sichtbar sind.
  • Sämtliche Zeilenumbrüche sind sichtbar und sollten daher nur dort verwendet werden, wo diese auch gewünscht sind.
  • Viele Attribute wie beispielsweise label oder default-Texte können im Textteil weggelassen werden.

Beispiel

E-Mail im Browser lesen: [VIEWONLINE /]
===

[CONTAINER name='header'][ELEMENT name='headerbanner' default='true']

[INPUT type='a_img' name='image'][BLOCK name='caption']

[INPUT type='span' name='text' required='true' /][/BLOCK][/ELEMENT][ELEMENT name='editorial' default='true'][CONTAINER name='editorial'][ELEMENT name='headline' default='true']

[INPUT name='headline' /][/ELEMENT][ELEMENT name='text' default='true']

[INPUT name='text' label='Text' /][/ELEMENT][ELEMENT name='button' default='true']

[INPUT type='a' name='button' required='true' /][/ELEMENT][/CONTAINER][/ELEMENT][/CONTAINER][CONTAINER name='main'][ELEMENT name='teaser-article' default='true']

[INPUT type='img' name='image' /][CONTAINER name='teaser-article'][ELEMENT name='headline' default='true']

[INPUT name='text' /][/ELEMENT][ELEMENT name='headline2']

[INPUT name='text' /][/ELEMENT][ELEMENT name='text' default='true']

[INPUT name='text' /][/ELEMENT][ELEMENT name='button' default='true']

[INPUT type='a' name='button' required='true'][/ELEMENT][/CONTAINER][/ELEMENT][/CONTAINER]

===

[CONTAINER name='footer']...[/CONTAINER]

Inhalte in Browser-Ansicht ausblenden

Beispiel: Link zur Onlineansicht im Browser ausblenden
[IF-PARAM module='viewonline' render='false']
  <a href="[VIEWONLINE /]">Zur Browserversion</a>
[/IF-PARAM]

Lerne im nächsten Schritt, wie du ein automatisches Inhaltsverzeichnis hinzufügst:

Inhaltsverzeichnis hinzufügen