E-Mail-spezifische Anpassungen

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
  1. <style type="text/css" transform="true">
  2.   .font {
  3.       font-family: Open Sans, Arial, sans-serif;
  4.   }
  5. </style>

Beim Rendern werden diese Eigenschaften als Inline-Style in das Tag mit der entsprechenden Klasse geschrieben.
Template Quellcode
Ausgabe Quellcode
Template Quellcode
  1. <table cellspacing="0" cellpadding="0" width="640" align="center">
  2.     <tr>
  3.         <td class="font">Das ist der Text.</td>
  4.     </tr>
  5. </table>
Ausgabe Quellcode
  1. <table cellspacing="0" cellpadding="0" width="640" align="center">
  2.     <tr>
  3.         <td class="font" style="font-family: Open Sans, Arial, sans-serif;">Das ist der Text.</td>
  4.     </tr>
  5. </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
  1. <head>
  2.   <!-- cssToAttribute -->
  3.   <style type="text/css" transform="true">
  4.     .spacer {
  5.         height: 25px;
  6.     }
  7.   </style>
  8. </head>

Template Quellcode
Ausgabe Quellcode
Template Quellcode
  1. <table cellspacing="0" cellpadding="0" width="640" align="center">
  2.     <tr>
  3.         <td class="spacer"></td>
  4.     </tr>
  5. </table>
Ausgabe Quellcode
  1. <table cellspacing="0" cellpadding="0" width="640" align="center">
  2.     <tr>
  3.         <td class="spacer" style="height: 25px;" heigth="25"></td>
  4.     </tr>
  5. </table>

Unterstützte Attribute

CSS-Anweisung
Erzeugtes Attribut
background-image: url("foo.gif")
background="foo.gif"
background-color: #cccccc;
bgcolor="#cccccc"
width: 200px;
width="200"
height: 200px;
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.
  1. Einzüge durch Leerzeichen oder Tabs sollten entfern werden, da diese sonst sichtbar sind.
  2. Sämtliche Zeilenumbrüche sind sichtbar und sollten daher nur dort verwendet werden, wo diese auch gewünscht sind.
  3. Viele Attribute wie beispielsweise label oder default-Texte können im Textteil weggelassen werden.
​

Beispiel

  1. E-Mail im Browser lesen: [VIEWONLINE /]
  2. ===
  3. [CONTAINER name='header'][ELEMENT name='headerbanner' default='true']
  4. [INPUT type='a_img' name='image'][BLOCK name='caption']
  5. [INPUT type='span' name='text' required='true' /][/BLOCK][/ELEMENT][ELEMENT name='editorial' default='true'][CONTAINER name='editorial'][ELEMENT name='headline' default='true']
  6. [INPUT name='headline' /][/ELEMENT][ELEMENT name='text' default='true']
  7. [INPUT name='text' label='Text' /][/ELEMENT][ELEMENT name='button' default='true']
  8. [INPUT type='a' name='button' required='true' /][/ELEMENT][/CONTAINER][/ELEMENT][/CONTAINER][CONTAINER name='main'][ELEMENT name='teaser-article' default='true']
  9. [INPUT type='img' name='image' /][CONTAINER name='teaser-article'][ELEMENT name='headline' default='true']
  10. [INPUT name='text' /][/ELEMENT][ELEMENT name='headline2']
  11. [INPUT name='text' /][/ELEMENT][ELEMENT name='text' default='true']
  12. [INPUT name='text' /][/ELEMENT][ELEMENT name='button' default='true']
  13. [INPUT type='a' name='button' required='true'][/ELEMENT][/CONTAINER][/ELEMENT][/CONTAINER]
  14. ===
  15. [CONTAINER name='footer']...[/CONTAINER]


Inhalte in Browser-Ansicht ausblenden

Beispiel: Link zur Onlineansicht im Browser ausblenden
  1. [if-param module='viewonline' render='false']
  2.   <a href="[VIEWONLINE /]">Zur Browserversion</a>
  3. [/if-param]

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