HTML Newsletter mit TYPO3

Um mit der Newsletter Extension “direct_mail” kompatible HTML Newsletter auszuliefern, benötigt es ein sorgfältig erarbeitetes HTML Template, ein geeigentes Content Rendering und einige TypoScript Einstellungen.

Generell gilt für HTML Newsletter:

Inline Styles und CSS verwenden
Layout mit HTML Tabellen gestalten
Testen, testen, testen

Damit TYPO3 die Newsletterseiten als Tabellen ausgibt muss das alte static Template “content (default)” ausgewählt werden.

TYPO3 HTML Newsletter und TypoScript

Typoscript

Um einen eigenen HTML Head aufzubauen schalten wir die Header Codes ab. (der übliche TYPO3 Headbereich mit Metatags und anderen Angaben wird nicht benötigt)
Nun müssen noch einige Rendering Eigenschaften über TypoScript eingestellt werden um bei den verschiedenen HTML Elementen inline Styles zu verwenden. Dieses Beispiel ist bei weitem nicht abschliessend!


config {
# Standard TYPO3 Header ausschalten
disableAllHeaderCode = 1

# weitere Konfigurationen
prefixLocalAnchors = all
typolinkCheckRootline_noExtTarget = 1
inlineStyle2TempFile = 0
insertDmailerBoundaries = 1
doctype = none
}

#### Rendering mit inline Styles erweitern

# Überschrift style inline
lib.stdheader.10.1.fontTag = <h1 style="font-size: 14px; color: #0099ff;  font-family : Arial, Helvetica, sans-serif;">|</h1>

# Text style inline
tt_content.text.20.parseFunc.nonTypoTagStdWrap.encapsLines.addAttributes.P.style = font-size: 12px; font-family : Arial, Helvetica, sans-serif; color:#000000;

#### Newsletter HTML aufbauen
page = PAGE
page {
typeNum = 0
10 = TEXT
10.value = <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
20 = TEXT
20.field = title
20.wrap = <title>|</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
30 = TEXT
30.value (
<style type="text/css" media="screen, print">
/*<![CDATA[*/<!--

b {color : #222222;}
hr { background-color:#CCCCCC; color:#CCCCCC; border: #CCCCCC; height: 1px; }
li { list-style-type: square; padding-left : 10px; padding-bottom: 5px; }
/* ... und weitere CSS Definitionen */

-->
/*]]>*/
</style>
)
40 = TEXT
40.value = </head><body text="black" alink="blue" vlink="blue" bgcolor="white">

50 = USER
50.userFunc = tx_templavoila_pi1->main_page

60 = TEXT
60.value = </body></html>

TypoScript Setup

Weitere Elemente können auch einfach über TypoScript Konstanten mit HTML Elementen umgeben werden.


# Bildbeschreibung stylen
styles.content.imgtext.captionWrap = <span style="font-size: 10px;>|</span>

TypoScript Konstanten

HTML Newsletter


<html>
<head>

###INLINE_CSS###
</head>
<body text="black" alink="blue" vlink="blue" bgcolor="white" >
<table width="550">
<tr>
<td width="330" style="background-color:#DEDEDE; padding:10px;">

###COL_LEFT###

</td>
<td width="180" style="background-color:#DDDDDD; padding:10px;">

###COL_RIGHT###

</td>
</tr>
</table>

</body>
</html>

HTML Template – Spaltenanordnung, Grössenangaben, Hintergrundfarben direkt im Tabellencode definieren.

Testen

Es ist weiterhin unverzichtbar den Newsletter in verschiedenen E-Mail Clients und Webmail Diensten zu testen.
Eine grosse Hilfe sind dabei integrierte Tools von Newsletter Service Provider wie z.B. Mailchimp

Hinterlasse ein Kommentar Antworten abbrechen