#Responsive Newsletter Regeln zur Erstellung von responsive Newslettern
<td width="10" height="1" style="font-size:1px; line-height:1px"> </td>width und height ist für das Spacing verantwortlich. height muss immer gesetzt werden und mindestens 1px betragen.
font-size und line-height müssen gesetzt werden, damit Outlook das nicht wie normale Schrift stylt.
padding und border funktionieren nur auf tds ohne Nebeneffekte. Nie auf tables benutzen, es führt zu massiven Problemen. In Outlook bekommt jedes Untertd das selbe padding wie die table. Auch die Browser intepretieren tables mit padding und border verschieden. So sind tables in neuen Browser standardmäßig box-sizing: border-box gesetzt. IE 7& Outlook hingegen box-sizing: content-box.
margin sollte überhaupt nicht verwendet, siehe fehlende CSS Unterstützung
Um sicherzugehen, dass sich die Abstände immer korrekt aufspannen, ist es empfohlen Spacer TDs zu verwenden zu verwerden. border und paddings werden von Outlook in ein anderes Format umgewandelt und können vom Originalwert abweichen.
<a href="#"><img src="http://smg.scnem.com/art_resource.php?sid=4o59y.pcigbt" alt="" width="44" height="39" border="0" style="display:block;" /></a>border="0" verhindert blaue Rahmen im IE wenn ein Link gesetzt wurde. style="display:block;" entfernt einen von Outlook eingefügten Abstand unterhalb vom Bild.
Nicht im HTML, nicht im CSS
Falsch:
background:#FFF;
Richtig:
background:#FFFFFF;
body {
background-image: url('http://smg.scnem.com/art_resource.php?sid=4o3p1.2kcrr8o');
background-repeat: repeat-x repeat-y;
background-position: top center;
background-color: #ededed;
}Bei responsive Newslettern werden Tabellen gefloatet, indem das Attribut align gesetzt wird.
Zudem alle Tabellen mit border="0" cellpadding="0" cellspacing="0" reseten.
<table width="20" border="0" cellpadding="0" cellspacing="0" align="left">
</table>
<table width="680" border="0" cellpadding="0" cellspacing="0" align="right">
</table>Dadurch entsteht in Outlook allerdings zwischen den Tabellen ein unvorhergesehener Abstand. Hier die Vorgehensweisen, diesen Abstand zu eleminieren.
Folgende Zeile im <style> Bereich einfügen:
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }style="border:1px solid #Farbe der Tabelle" auf der Tabelle setzen
Die Breite der Tabelle um 2px verkleinern z.B. aus 350px wird 348px.
Tabellen werden nicht immer mit box-sizing:content-box gerendert, sondern teilweise auch mit box-sizing:border-box.
So kann es vorkommen, dass der 1px border nicht immer zur Breite der Tabelle dazugerechnet wird.
Eine relativ browserkonsistente Lösung ist das vergeben einer Reset CSS Klasse.
/* Chrome, Firefox Fix */
.responsive-table {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
display: block;
}
@media only screen and (max-width: 740px) {
/* Chrome, Firefox Fix */
.responsive-table {
display: table;
}
}Angepasstes Beispiel von oben:
<table width="18" border="0" cellpadding="0" cellspacing="0" class="responsive-table" style="border:1px solid #FFFFFF" align="left">
</table>
<table width="678" border="0" cellpadding="0" cellspacing="0" class="responsive-table" style="border:1px solid #FFFFFF" align="right">
</table>Durch media queries und aligned tables.
Beispiel:
@media only screen and (max-width: 700px) {
table {
width: 100%!important;
}
img {
max-width: 100%;
height: auto!important;
}
}Alle tables bekommen eine Breite von 100%. Dadurch brechen die Tables, welche wir vorher aligned haben, automatisch um.
Auch die Bilder skalieren jetzt porportional mit. Wichtig ist das setzen von !important um die inline Styles zu überschreiben.
Als nächstes setzen wir noch den Viewport für die mobilen Endgeräte. Mit folgenden Content Einstellungen ist es auch auf den meisten Android Geräten lauffähig.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />Bei responsive Newslettern kann es in Outlook auch leicht zu Verschiebungen kommen, durch den Umstand, dass Outlook nach 1790px einen Seitenumbruch erzwingt. Aligned Tables werden zu den 1790px dazugerechnet.
Also 2 gefloatete Tabellen die jeweils 400px hoch sind, erzeugen eine Gesamthöhe von 800px.
Die einzige zuverlässige Methode diesen Bug zu verhindern, ist keine Tabelle höher als 1790px werden zu lassen.
Hierfür muss die wrapper table, welche die Hintergrundfarbe vergibt durch ein span ersetzt werden.
Beispiel:
<body bgcolor="#444444" style="min-height:1000px;">
<span style="display:block; background:#444444; padding:0 30px;">
<!-- Sobald Table höher als 1790px werden droht, neue Tabelle beginnen -->
<table width="700" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#444444"></table>
<table width="700" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#444444"></table>
<table width="700" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#444444"></table>
</span>
</body>Outlook lässt sich per Conditional Comments ansprechen. Das eröffnet uns z.B. die Möglichkeit Fix1 des Outlook Table Gaps ausschließlich auf Outlook anzuwenden.
<!--[if gte mso 9]>
<style type="text/css">
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
</style>
<![endif]-->Um das Problem zu fixen, können wir Conditional Comments benutzen und nur in Outlook die Tables nochmal in einer übergeordneten table wrappen
<!--[if gte mso 9]>
<table border="0" cellpadding="0" cellspacing="0" width="660">
<tr>
<td width="330">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="328" style="border:1px solid #FFFFFF;">
<!--[if gte mso 9]>
</td>
<td width="330">
<![endif]-->
<table align="right" border="0" cellpadding="0" cellspacing="0" width="328" style="border:1px solid #FFFFFF;">
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->Für eine detailierte Übersicht, welche CSS Befehle in welchem Email Client funktionieren, die folgende Tabelle zu Rate ziehen:
Weitere sehr detaillierte Anleitung
http://www.leemunroe.com/building-html-email/