TOPIC:

Test-Newsletter mit den enthaltenen BW-Vorlagen werden auf meinem Iphone7 nicht korrekt dargestellt.
Gibt es responsive Newsletter-Vorlagen oder einen einfachen workaround?

Habe jz im Handbuch gelesen, dass die Vorlagen responsive sind, bei mir klappt's jedoch nicht fehlerfrei.
Muss ich den Bildern eine bestimmte Klasse zuweisen oder dürfen sie physisch nur eine bestimmte Breite aufweisen - wenn ja, weiviele Pixel?
Habe das Template auf 600 px - wie vorgeschlagen - belassen. Meine Bilder weisen auch 600 px auf - ist das das Problem?

Hallo Groing,

was genau verstehst Du unter nicht korrekt dargestellt? Was erwartest Du und was bekommst du zu sehen?

Grundsätzlich sind Bilder in responsive immer ein ekliges Problem. Auf Webseiten werden für die verschiedenen Auflösungen verschieden große Bilder vorgehalten, oder sie werden per Javascript nach bearbeitet, wenn die Webseite weiß, wie groß die Fläche ist, die dargestellt werden soll. Beides ist bei Newslettern (=Mails) nicht möglich, da diese erstellt werden, bevor klar ist, wie groß die Fläche ist.

Das nächste große Problem sind die Mailclients. Kaum einer kann wirklich sauber mit HTML und vor allem CSS umgehen, von HTML5 und CSS3 ganz zu schweigen. So ziemlich jeder interpretiert es gerade so, wie er Lust hat.

Das dritte sind dann die (vor allem Empfänger-)Provider, die Mails teilweise verstümmeln, weil sie Dinge enthalten, die der Provider für gefährlich oder unerwünscht hält. Extrem ist das in den Webclients zu beobachten.

Für Mails und damit Newsletter behilft man sich damit, dass man versucht, einen gemeinsamen Kontext über alle Browser und Provider zu bekommen. Doch alle kann man nicht komplett abdecken. Leider habe ich auch nicht unbedingt die Zeit und Möglichkeit, alle neuen Geräte durch zu testen und die vorhandenen Vorlagen dann darauf wieder anzupassen.

Aber um Dich nicht im Regen stehen zu lassen: Hast Du schon probiert, was heraus kommt, wenn Du das Bild kleiner als die maximal zur Verfügung stehenden 600px machst?

Ich hoffe, Karl liest mit und kann hier vielleicht besser helfen. Er kennt sich mit den Vorlagen deutlich besser aus als ich.

Hth

Romana

Hallo Groing,
probiere bitte mal das "neue" Template, dass du hier unter Downloads->BwPostman->Newsletter-Templates herunterladen kannst.
Im Adminbereich deiner Seite, unter Erweiterungen->BwPostman->Templates, kannst du dieses Template dann nachinstallieren.
Das "Standard Basic" ist das am einfachsten gehaltene Template und sollte deshalb für alle Mail-Clienten am leichtersten zu interpretieren sein.
Du kannst auch eigenes CSS in der Vorlage einfügen.

Solltest du weitere Hilfe benötigen, dann würde es sehr helfen, wenn du den Quelltext deines Newsletters hier im Forum anhängst und dein Problem genau beschreibst.

Gruß Karl

Hallo Romana,
hallo Karl,

danke für die rasche und ausführlichen Rückmeldungen.
Ich werd's mit dem "Standard Basic" probieren und die Ergebnisse mitteilen.
Vorab mal ein Screen-Shot vom Iphone, dass die Darstellung aktuell zeigt.

Gruß Thomas

<p> </p>
<!-- article -->
<table class="wrapper" style="border-collapse: collapse; border-spacing: 0; background-color: #ebebeb; width: 100%; min-width: 620px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; table-layout: fixed;">
<tbody>
<tr>
<td style="vertical-align: top; padding: 0;"><center>
<table class="lightest" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; padding: 0;" align="center">
<table class="one-col" style="background-color: #ffffff; border-collapse: collapse; border-spacing: 0; margin-left: auto; margin-right: auto; width: 600px;">
<tbody>
<tr>
<td class="column" style="vertical-align: top; text-align: left; padding: 0;">
<div>
<div class="column-top" style="font-size: 32px; line-height: 32px;"> </div>
</div>
<table class="contents" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<tbody>
<tr>
<td class="padded" style="vertical-align: top; padding: 0 20px 0 20px;">
<h1 style="margin-top: 0; font-weight: 400; letter-spacing: -0.02em; font-family: sans-serif; font-size: 36px; line-height: 42px; margin-bottom: 24px; color: #870d88; text-align: center;">Märchen: Teil unserer Phantasie und vielleicht auch der Realität</h1>
<div style="margin-top: 0; font-weight: 300; font-family: sans-serif; font-size: 16px; line-height: 26px; text-rendering: optimizeLegibility; margin-bottom: 26px; color: #5c5c5c; text-align: justify;">Hallo [FULLNAME],</div>
<div style="margin-top: 0; font-weight: 300; font-family: sans-serif; font-size: 16px; line-height: 26px; text-rendering: optimizeLegibility; margin-bottom: 26px; color: #5c5c5c; text-align: justify;">die Darsteller und Darstellerinnen sind hervorragend in Ihren Rollen geschlüpft und haben ihr Talent im Zusammenspiel bewiesen. Zu Kreativität beim Bühnenbau und dem Spaß am Spiel gesellten sich in der Reflexionsphase neben tollen Ideen zur Umsetzung für unsere Alltagsrollen auch nachdenkliche Gedanken.<br /><br />Hier ein paar Eindrücke vom kreativen Schaffen und einer Menge Spass ...</div>
<div style="margin-top: 0; font-weight: 300; font-family: sans-serif; font-size: 16px; line-height: 26px; text-rendering: optimizeLegibility; margin-bottom: 26px; color: #5c5c5c; text-align: justify;">
<p><img title="maerchenspiel-nachlese" src="images/beratung-coaching/maerchenspiel/nachlese-1/maerchenspiel-1-1.jpg" alt="maerchenspiel-nachlese" /></p>
<p>Eveline liest die Geschichte "Die zwölf wilden Schwäne" vor</p>
<p><img title="maerchenspiel-nachlese" src="images/beratung-coaching/maerchenspiel/nachlese-1/maerchenspiel-1-0.jpg" alt="maerchenspiel-nachlese" /></p>
<p>Lebhaftes Wühlen in der "Schatzkiste"</p>
<p><img title="maerchenspiel-nachlese" src="images/beratung-coaching/maerchenspiel/nachlese-1/maerchenspiel-1-3.jpg" alt="maerchenspiel-nachlese" /></p>
<p>Erste Charaktäre bilden sich raus</p>
<p><img title="maerchenspiel-nachlese" src="images/beratung-coaching/maerchenspiel/nachlese-1/maerchenspiel-1-2.jpg" alt="maerchenspiel-nachlese" /></p>
<p>Bühne und Kulisse sind geschaffen</p>
<p><img title="maerchenspiel-nachlese" src="images/beratung-coaching/maerchenspiel/nachlese-1/maerchenspiel-1-4.jpg" alt="maerchenspiel-nachlese" /></p>
<p>Die "Heldin" der Geschichte ...</p>
<p><img title="maerchenspiel-nachlese" src="images/beratung-coaching/maerchenspiel/nachlese-1/maerchenspiel-1-5.jpg" alt="maerchenspiel-nachlese" /></p>
<p>... wird von ihrem Zukünftigen entdeckt ...</p>
<p><img title="maerchenspiel-nachlese-bad-voeslau" src="images/beratung-coaching/maerchenspiel/nachlese-1/maerchenspiel-1-6.jpg" alt="maerchenspiel-nachlese-baden-bei-wien" /></p>
<p>... und mit auf's Schloss genommen</p>
<p><img title="-bei-wien" src="images/beratung-coaching/maerchenspiel/nachlese-1/maerchenspiel-1-7.jpg" alt="-bei-wien" /></p>
<p>Ein kurzer Tod</p>
<p><img title="maerchenspiel-reflexion" src="images/beratung-coaching/maerchenspiel/nachlese-1/maerchenspiel-1-8.jpg" alt="maerchenspiel-reflexion" /></p>
<p>Reflexion des Durchlebten und Transfer in die Alltagsrollen</p>
</div>
<div style="margin-top: 0; font-weight: 300; font-family: sans-serif; font-size: 16px; line-height: 26px; text-rendering: optimizeLegibility; margin-bottom: 26px; color: #5c5c5c; text-align: justify;">
<h3>Kontaktmöglichkeit</h3>
<figure><img class="img-left img-polaroid" title="eveline-raditsch-märchenspiel-Bad-Vöslau-Baden-bei-Wien-Niederösterreich" src="images/beratung-coaching/eveline-raditsch.jpg" alt="eveline-raditsch-märchenspiel-Bad-Vöslau-Baden-bei-Wien-Niederösterreich" width="150" height="200" /></figure>
<p><strong>Eveline Raditsch</strong><br />0699/12340848<br /><span id="cloaka57646713e8a2dba98842fa44e95cf43"><span id="cloak2f68bfebb603d533738157998eae9233"><a href="This email address is being protected from spambots. You need JavaScript enabled to view it.">This email address is being protected from spambots. You need JavaScript enabled to view it.
NLP-Master, Lebens- und Sozialberaterin

<div style="clear: both;"> </div>
<figure><img class="img-left img-polaroid" title="thomas-groinig-märchenspiel-Bad-Vöslau-Baden-bei-Wien-Niederösterreich" src="images/beratung-coaching/thomas-groinig-2017.jpg" alt="thomas-groinig-märchenspiel-Bad-Vöslau-Baden-bei-Wien-Niederösterreich" width="150" height="200" /></figure>
<p><strong>Thomas Groinig</strong><br />0699/19415920<br /><span id="cloak1d4096a83950f262e01197fd2f8028f2"><span id="cloakd137d36551e4013a4ade84c54b2865aa"><a href="This email address is being protected from spambots. You need JavaScript enabled to view it.">This email address is being protected from spambots. You need JavaScript enabled to view it.
Dipl. Ehe-, Familien- und Lebensberater

<div style="clear: both;"> </div>
<h3>Nächster Märchenspiel-Termin</h3>
<p><strong>20. Mai 2017</strong> von <strong>10 Uhr bis 13 Uhr</strong></p>
<h3>Spielort</h3>
<p><strong>Studio zeit.raum<br /></strong>Hanuschgasse 1/4/4, 2540 Bad Vöslau</p>
<h3>Kosten</h3>
<p><strong>Eur 30,– </strong><em>(</em><em>10% des Gewinns gehen als Spende an die Gruft Wien.)</em><br /><img title="maerchenspiel-für-gruft" src="images/beratung-coaching/maerchenspiel-gruft.jpg" alt="maerchenspiel-für-gruft" width="260" height="91" /></p>
<h3>Anfragen bzw. verbindliche Anmeldung</h3>
<p>Entweder bei <strong>Eveline Raditsch </strong>per email: <span id="cloak2388786bb2e8f3d9872cf0f94cef722c"></span><span id="cloak8320facc568239908f1b123265925ec2"><a href="This email address is being protected from spambots. You need JavaScript enabled to view it.">This email address is being protected from spambots. You need JavaScript enabled to view it.
oder Thomas Groinig per email: This email address is being protected from spambots. You need JavaScript enabled to view it.">This email address is being protected from spambots. You need JavaScript enabled to view it.
oder mit dem Märchenspiel-Onlineformular

<p> </p>
<p><em>Die Teilnahme am Märchenspiel gilt als Fortbildungsveranstaltung lt. Standes- und Ausübungsregel für das Gewerbe des Lebens- und Sozialberaters §1 Abs. 2, somit wird <strong>eine Stunde Fortbildung für Lebens- und SozialberaterInnen </strong>bestätigt. </em><em>Weiteres wird die Teilnahme mit <strong>zwei Einheiten Gruppenselbsterfahrung</strong> bestätigt.</em></p>
</div>
</td>
</tr>
</tbody>
</table>
<div class="column-bottom" style="font-size: 26px; line-height: 26px;"> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center></td>
</tr>
</tbody>
</table>
<div class="spacer" style="font-size: 10px; line-height: 20px; background-color: #ebebeb;"> </div>
<!-- /article -->