Man darf nichts aus Word, Outlook oder Office kopieren, damit keine Stylesheets von diesen Programmen übernommen werden, die in den unterschiedlichen Programmen/Geräten die Darstellung beeinflussen. Ebenfalls NICHTS am Zeilenabstand verändern, auch wenn man das im SuperMailer über rechte Maustaste Absatz festlegen kann, sollte man die Finger von lassen, das kann zu Fehldarstellungen (Zeilen überlappen sich) führen. In Tabellenzellen darf man nicht "Kein Umbruch" aktivieren, sonst bricht es bei kleineren Display nicht um, sondern muss rechts aus dem Bilderschirm rausgehen.
Alles andere ist responsive Design, damit muss man sich beschäftigen und viel testen, gibt es keine Software, die das für einen anhand einer eigenen Vorlage automatisch macht. Zu responsive Design gehört auch die Bilder zu verkleinern, damit diese auf das kleine Handy-Display passen. Aus 2spaltigen Tabellen macht man dann halt 1 spaltige Tabellen und ordnet es untereinander an.
Simples Beispiel, für Bildschirme mit kleiner als 768 Pixel Breite
* die Tabelle ist dann nicht mehr 600 Pixel, sondern wird zu 100% Breite,
* die Zellen der Tabelle werden im Block = ganzzeilig dargestellt und
* das Logobild wird nicht mehr mit 600 Pixel Breite, sondern auf 100% Breite des Bildschirms dargestellt, die Höhe steht auf automatisch, damit kann der Browser/E-Mail-Programm unter Berücksichtigung der Dimensionen das Bild verkleinern.
Code: Alles auswählen
<!doctype html>
<html>
<head>
<title></title>
<META name=viewport content="width=device-width, initial-scale=1">
<style>
/* Stylesheet fuer Bildschirme mit kleiner als 768 Pixel Breite */
@media only screen and (max-width: 768px)
{
TABLE {
WIDTH: 100% !important;
}
TR {
WIDTH: 100% !important;
}
TD {
DISPLAY: block; WIDTH: 100% !important;
}
/* Stylesheet fuer das Logo */
.logo{WIDTH: 100% !important; max-width: 600px; height: auto; float:none}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td colspan="2" width="100%">
<!-- hier das Logo -->
<IMG class="logo" alt="Newsletter Software SuperMailer"
src="http://www.supermailer.de/newsletterarchiv/newsletter_bg600.png"
width="600" height="76">
</td>
</tr>
<tr>
<td width="50%">Spalte 1 in Zeile 1</td>
<td width="50%">Spalte 2 in Zeile 1</td>
</tr>
<tr>
<td width="50%">Spalte 1 in Zeile 2</td>
<td width="50%">Spalte 2 in Zeile 2</td>
</tr>
</table>
</body>
</html>
Testen kann man das mit jedem neueren Browser, dazu muss man einfach nur das Browserfenster verkleinern, bis die Stylesheets wirken.
Siehe dazu auch
http://www.supermailer.de/faq.htm#newsl ... martphones