Sie können eine maximale Breite für E-Mails festlegen, indem Sie eine E-Mail-Vorlage erstellen, die das Tag %{email_content} in einer Tabelle mit per CSS gesetztem max-width einschließt. Wenn Sie die Breite auch für E-Mails einschränken möchten, die in Outlook angezeigt werden, müssen Sie zusätzlich eine Tabelle mit fester Breite hinzufügen, die in <!--[if mso]>-Tags eingeschlossen ist.
Hier ist eine grundlegende E-Mail-Vorlage, die den Inhalt auf maximal 600px begrenzt. Wenn Sie diese Vorlage verwenden, ersetzen Sie unbedingt die URL des Logo-Bildes durch die URL des Logos Ihrer Website. Ersetzen Sie außerdem den Wert des href-Attributs durch die URL Ihrer Website. Das alt-Attribut des Logo-Bildes sollte auf einen für Ihre Website sinnvollen Wert gesetzt werden.
Da die Vorlage das Logo der Website enthält, müssen Sie sicherstellen, dass die Site-Einstellung
Benutzerdefinierte Stile auf Digest anwendendeaktiviert ist. Tun Sie dies nicht, werden in Zusammenfassungse-Mails von Ihrer Website zwei Logos am oberen Rand der E-Mail angezeigt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<!--[if mso]>
<style type="text/css">
body, table, td, th, h1, h2, h3 {
font-family: Helvetica, Arial, sans-serif !important;
}
</style>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 10px 0 30px 0;">
<!--[if gte mso 9]>
<table width="600" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
style="max-width: 600px;border-collapse: collapse;">
<tr>
<td style="padding: 20px 15px 20px 15px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<a href="https://forum.example.com">
<img src="https://your-site-logo-url"
alt="Name Ihrer Website" width="150" height="40"
style="display: block;"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0 15px 0 15px;">
<hr style="background-color: #ddd; height: 1px; border: 1px;">
</td>
</tr>
<tr>
<td style="padding: 20px 15px 30px 15px; color: #153643; font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;">
%{email_content}
</td>
</tr>
</table>
<!--[if gte mso 9]></td></tr></table><![endif]-->
</td>
</tr>
</table>
Ich habe dies mit einem E-Mail-Testdienst für die meisten gängigen E-Mail-Clients getestet:
iPad (Retina) (iOS 13.1):
Gmail App (Android 6.0):
iPhone 6 Plus:
