Mobile Darstellung

Beitrag von **mirko** » 05.04.2018, 14:40

den Code mal rauskopieren, in SuperMailer über rechte Maustaste - Quelltext aufrufen, alles rauslöschen, den kopierten Code einfügen und links oben auf Speichern. Serienmailvorschau aufrufen, NICHT SPEICHERN, an den Rändern des Fenster der Serienmailvorschau das Fenster kleiner ziehen, damit man visuell sieht was da genau passiert. Das soll nur ein Beispiel sein, machen muss man das selbst oder eine Agentur beauftragen, die eine responsive E-Mail-Vorlage (keine Webseite!) erstellen soll

julianangel · Beitrag von **julianangel** » 05.04.2018, 13:35

Vielen Dank, Mirko.

Was genau kann ich mit dem "mitgelieferten" Code tun?
Ich habe als ersten versuch einmal die Tabelle von der Angabe in Pixel auf 100% gesetzt. Blieb gleich groß und am Handy kann ich alles schön groß und klein ziehen, während der Zeilenumbruch mit umspringt...

Beitrag von **mirko** » 28.03.2018, 11:26

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

julianangel · Beitrag von **julianangel** » 28.03.2018, 10:54

Hallo zusammen,

ich verwende den Supermailer seit Jahren mit Freude und Erfolg

Nun bekomme ich zur Zeit vermehrt Feedback, dass die mobile Darstellung nicht korrekt ist. Genauer gesagt, heißt das...

* mobil liegen manche Zeilen übereinander (verdecken sich also gegenseitig)
* mobil und in manchen Webmailer Programmen (also Webmailer der Internetprovider) gehen die Zeilen über den rand hinaus, die News-Mail lässt sich aber nicht hin- und herschieben.

Woran kann das liegen?

Ich gestehe folgendes:

Um Grafiken und Text in gleicher Breite darzustellen, arbeite ich mit einer Tabelle, innerhalb welcher ich schreibe und die eben den Text schön eingrenzt. Mag es daran liegen? Wenn ja, wie kann ich sonst einstellen, dass der Text nicht über die Breite der Header Grafik (525 px) hinausgeht?

Besten Dank mal wieder,
Julian

Support-Forum Mirko Böer Softwareentwicklungen

Mobile Darstellung

Re: Mobile Darstellung

Re: Mobile Darstellung

Re: Mobile Darstellung

Mobile Darstellung