Die Folgenden Erläuterungen gelten für alle vier möglichen Layout Varianten:
Im Head Bereich können vor allem Web Fonts und globale Styles definiert bzw. referenziert werden.
Hier kann Text angegeben werden, der in E-Mail Benachrichtigungen angezeigt wird. Standardmäßig wird über den Platzhalter [[TITLE]] der Titel der E-Mail-Vorlage referenziert.
Eine Erläuterung zur Verwendung von Webfonts in E-Mails finden Sie hier: https://helpx.adobe.com/de/fonts/using/html-email.html
Bitte beachten Sie, dass Sie nur Fonts verwenden dürfen, für die Sie die entsprechenden Lizenzen verfügen.
Bitte beachten Sie weiterhin, dass nicht alle E-Mail-Clients HTML-E-Mails bzw. Web-Schriftarten in E-Mails unterstützen.
Hier können Assets für besondere Styles referenziert werden. Diese werden von dem meisten Mail-Clients ignoriert. Daher ist die Verwendung dieser globalen Styles nicht empfohlen.
Hier können Stylesheets referenziert werden. Diese werden von dem meisten Mail-Clients ignoriert. Daher ist die Verwendung dieser globalen Styles nicht empfohlen.
Der Standard des Headers ist wie folgt definiert:
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name=”x-apple-disable-message-reformatting”> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title>[[TITLE]]</title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / @font-face : BEGIN -->
<!-- NOTE: If web fonts are not required, lines 9 - 26 can be safely removed. -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
<!--<![endif]-->
<!-- Web Font / @font-face : END -->
<!-- CSS Reset with basic and enhanced styles -->
<style>
[[ASSETS]]
</style>
<!-- custom style from template -->
<style>
[[CSS]]
</style>
</head>
Hierüber kann die Breite des Bodys definiert werden.
Hierüber kann die Hintergrundfarbe des Bodys definiert werden.
Hierüber kann der Abstand zum Nachbarelement definiert werden.
Der Standard des Body ist wie folgt definiert:
<body width="100%" bgcolor="#f3f3f4" style="margin: 0;">
<center style="width: 100%; background: #f3f3f4;">
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">
<!-- (Optional) This text will appear in the inbox preview, but not the email body. -->
[[TITLE]]
</div>
<!-- Visually Hidden Preheader Text : END -->
<!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 680px.
2. MSO tags for Desktop Windows Outlook enforce a 680px width.
-->
<div style="max-width: 680px; margin: auto;">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td>
<![endif]-->
Das Definieren der Rolle “presentation” spielt eine Rolle im ARIA Kontext, ist also relevant für barrierefreie E-Mails. Sie ermöglicht bei HTML Umsetzungen mit Tabellen, dass diese von Screenreadern gelesen werden können.
Hierüber kann der Abstand der Zellen untereinander definiert werden.
Hierüber kann der Abstand des Textes zur Zellgrenze definiert werden.
Hierüber können Rahmenlinien definiert werden.
Hierüber kann die Textanordnung in der Zelle definiert werden.
Hierüber kann definiert werden, welchen Anteil der Breite des Bodys die Tabelle einnimmt.
Hierüber kann die maximale Breite eines Elements definiert werden.
Die folgenden Angaben definieren das Styling einzelner Zellen:
Hierüber wird der Abstand des Zellinhalts zum Rahmen definiert.
Hierüber wird die Ausrichtung des Texts in der Zelle definiert.
<!-- Email Header : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<tr>
<td style="padding: 20px 0; text-align: center">
</td>
</tr>
</table>
<!-- Email Header : END -->
Hierüber kann die Hintergrundfarbe von Zellen definiert werden.
Hierüber kann die im Body zu verwendende Schriftart definiert werden.
Hierüber kann die Schriftgröße definiert werden.
Hierbei handelt es sich um eine Microsoft Outlook spezifische Regel zur Darstellung von Bildern.
Hierüber wird der Zeilenabstand definiert.
Hierüber wird die Schriftfarbe definiert.
<!-- Email Body : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 40px; text-align: left; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555;">
[[CONTENT]]
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Email Body : END -->
Hierüber wird am Ende der Mail ein Link eingebracht, der dem Empfänger ermöglicht, die E-Mail als Webversion im Browser anzusehen.
Hier wird der Text in der Fußzeile der Mail definiert. Über den Platzhalter [[FOOTER]] werden die Adressdaten des Museums referenziert. Alternativ kann hier beliebiger Text eingegeben werden.
Hierüber kann ein Bild im Footer eingebracht werden. Bitte beachten Sie, dass die Abbildung eines Logos ggf. dazu führt, dass diese Mail als Werbung gewertet wird und Sie damit eine Einwilligung für den Versand an Kunden benötigen.
Wir empfehlen, sofern keine rechtliche Klärung Ihrerseits erfolgt ist, kein Logo in den E-Mail-Layouts einzubringen.
Hierüber wird die Quelle des Bilds referenziert.
Über den Platzhalter [[LOGO]] wird ein im System hinterlegtes Logo referenziert.
Alternativ kann die Bildadresse eines Bilds im Netz angegeben werden. Hierzu den Platzhalter mit der URL des Bilds ersetzen.
Hierüber kann sogenannter Alt-Text für das Bild angegeben werden. Dies ist für Barrierefreiheit wichtig.
Hierüber kann die Stärke des Rahmens für das Bild definiert werden.
Hierüber wird die Hintergrundfarbe des Bildes definiert. Das ist insbesondere dann relevant, wenn ein freigestelltes Bild verwendet wird, welches sich sauber in den Hintergrund eingliedern soll. Dann sollte hier der gleiche Farbwert angegeben werden, wie bei BGColor im Body.
Hierüber wird die Schriftart für den Alt-Text definiert.
Hierbei handelt es sich um eine Microsoft Outlook spezifische Regel zur Darstellung von Bildern.
Hierüber wird der Zeilenabstand des Alt-Texts definiert.
Hierüber wird die Schriftfarbe des Alt-Texts definiert.
<!-- Email Footer : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<tr>
<td style="padding: 40px 10px;width: 100%;font-size: 12px; font-family: sans-serif; mso-height-rule: exactly; line-height:18px; text-align: center; color: #888888;">
<webversion style="color:#cccccc; text-decoration:underline; font-weight: bold;"><a href="[[HTML_LINK]]">Im Browser öffnen</a></webversion>
<br><br>
[[FOOTER]]
<br>
<br>
<img src="[[LOGO]]" height="50" alt="alt_text" border="0" style="background: #dddddd; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555;">
<br>
<br>
</td>
</tr>
</table>
<!-- Email Footer : END -->