E-Mail-Gestaltung

Korrespondenzen, die als E-Mail versendet werden können aus verschiedenen Elementen zusammengestellt werden.

Im einfachsten Fall enthält eine Korrespondenz nur ein Textelement. Dieses wird dann mit dem folgenden HTML-Code zu eine Multipart-Nachricht verarbeitet.

In der E-Mail ist die Struktur ähnlich dem abgebildeten Code vorhanden. Manche Element sind nicht in jeder Nachricht.

Beispiel Mailstruktur

<body>
	<div class="sdw_head"></div>
	<div class="sdw_plain">
		Beispieltext für die ganze Breite
		<div class="sdw_right">Beispieltext rechtsbündig</div>
		<h1>Uberschriften Ebene 1</h1>
		<h2>Uberschriften Ebene 1</h2>
		<h3>Uberschriften Ebene 1</h3>
	</div>
	<div class="sdw_row">
		<div class="sdw_cell sdw_colstyle_w20"><em>Label-Spalte</em></div>
		<div class="sdw_cell sdw_colstyle_w80">Inhaltsspalte</div>
	</div>
	<div class="sdw_row">
	<!-- weitere Zeilen möglich -->
	</div>
 
	<div class="sdw_foot">Verweis auf die Anwendung</div>
</body>

Das Design der Nachricht ist durch ein Standard Style-Sheet definiert.

Im Bereich der Voreinstellungen (CiCd) kann dieses durch ein eigenes Styl-Sheet ersetzt werden. Dabei müssen für alle Elemente die Styleangaben übernommen werden. Das eigene Stylesheet wird dann als einziges ausgeliefert.

Die Selktoren

sdw_colstyle_w10

entsprechen den Breitenangaben aus den Layoutstilen für die Prinkausgabe. Eine Layout Tabelle 2 Spaltig 20 / 80 wird in zwei <div> Elemente aufgeteilt und erhält die Selektoren

sdw_colstyle_w20 / sdw_colstyle_w80

Wenn Sie in der E-Mail Bilder anzeigen lassen wollen müssen diese im CSS als Inline-Elemente mitgeliefert werden. Entweder als SVG-Element oder als jpg/png base64 codiert.

Beispiel-CSS

  body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
	background-image:
		url("data:image/svg+xml;utf8,<svg>[Bildinformationen]</svg>");
	background-attachment: fixed;
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: 30%;
	margin-left: 2em;
	margin-right: 4em;
	max-width: 900px;}

.sdw_row { display: flex;}

.sdw_cell {
	border-color: grey;
	border-style: solid;
	padding: 3px}

.sdw_colstyle_w10 { flex-basis: 10%}

.sdw_colstyle_w20 { flex-basis: 20%}

.sdw_colstyle_w30 { flex-basis: 30%}

.sdw_colstyle_w40 { flex-basis: 40%}

.sdw_colstyle_w50 { flex-basis: 50%}

.sdw_colstyle_w60 { flex-basis: 60%}

.sdw_colstyle_w70 { flex-basis: 70%}

.sdw_colstyle_w80 { flex-basis: 80%}

.sdw_colstyle_w90 { flex-basis: 90%}

.sdw_right { text-align: right;}

.sdw_foot {
	text-align: center;
	font-size: 0.8em;
	margin-top: 2em;
	padding-top: 1em;
	padding-bottom: 1em;
	background-color: #cccccc;}

.sdw_foot a {
	text-decoration: none;
	color: #d36f16}

Design in den Voreinstellungen anlegen.

Wechseln Sie in den Bereich "Administration/Anwendungseinstellungen".

Dort legen Sie bitte unter Organisation → CiCd einen Neuen Eintrag mit dem Schlüssel: CSS Vorgaben für E-Mail an.

Die Inhalte der CSS-Datei fügen Sie als Text im Bereich "Wert" ein.

Zum ausprobieren haben wir ein JS-Fiddle eingerichtet:

https://codepen.io/stattbuchung/pen/JegqxG

Space shortcuts

Page tree

Design in den Voreinstellungen anlegen.

Verwandte Artikel

0 Comments