[Erledigt] HTML - Newsletter - Design zerschossen

Destruction · 21.07.2010, 14:38

Moin,

habe einen HTML-Newsletter geschrieben.

=>

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* { margin:0px; padding:0px; font-family:arial; }
#background {
background:url('http://newsletter/nlhg.jpg');width:700px;
}
#newsletter {
font-size:25px;float:right;color:black;margin:30px 20px;
}
.textbox1 {
background:url('http://newsletter/hgsmall.jpg');width:450px;height:200px;margin-top:10px;padding:10px;font-size:14px;float:left;
}
.textbox2 {
background:url('http://newsletter/hgsmall.jpg');width:450px;height:200px;margin-top:10px;padding:10px;font-size:14px;float:right;
}
.headline1 {
background-color:black;
color:white;
clear:both;
margin-top:10px;
padding-left:10px;
font-size:12px;
font-weight:bold;
height:14px;
}
.headline2 {
background-color:black;
color:white;
margin-top:10px;
padding-right:10px;
font-size:12px;
font-weight:bold;
text-align:right;
height:14px;
}
#content {
margin:10px;
}
#logo {
float:left;margin-top:10px;
}
#info {
font-size:11px;
text-align:center;
margin-top:10px;
clear:both;
background-color:#5C5C5C;
color:white;
}
.image2 {
float:right;
height:220px;
width:199px;
margin-top:10px;
margin-right:10px;
}
.image1 {
float:left;
height:220px;
width:199px;
margin-top:10px;
margin-left:10px;
}
.clear {
clear:both;
}
#footer {
margin-top:10px
}
</style>
</head>
<body>
<div id="background">
<div id="content">
<img src="http:///newsletter/headernl.jpg" alt="" style="margin-top:10px"/>
<div class="headline'.$hl.'">'.$this->headlines[$i].'</div>
<div class="textbox'.$hl.'">'.$this->text[$i].'</div>
<img src="http://newsletter/nlpics/'.$this->files[$i].'" class="image'.$hl.'" alt=""/>
<div class="clear"></div>
<img src="http:///newsletter/footer.jpg" alt="" id="footer"/>
<p id="info"><a href='http://www..com'>Link zur Homepage</a>  l  Tel.   l  Bitte klicken Sie <a href="http://www/newsletter-abmelden22.html">hier</a> , um den Newsletter abzubestellen</p>
</div>
</div>
</body>
</html>

Im Thunderbird wird bei mir alles korrekt dargestellt, habe aber nun eine Meldung von jemandem bekommen, dass das Design total zerschossen aussieht ( Float scheint nicht zu klappen ).

Ist das normal das manche ( viele ? ? ) E-Mail Programme kein float kennen ?

Die schwarzen Linien mit den Überschriften gehen einfach über die ganze Länge und nicht wie vorgesehen nur in dem 700px großen Bereich, die Bilder sind unter dem Text, der Text hat keinen Hintergrund / keine feste Größe.

Würde mich über Hilfe freuen.

Danke
MfG
Destruction

Wolla · 21.07.2010, 20:21

Verschiedene Mailclients können keinen CSS code, der mit <style> </style> definiert ist interpretieren. Um alle Clients zu erreichen, musst du den CSS-Code direkt in den HTML-Code integrieren (mir fällt grade der Fachbegriff nicht ein, ich meine sowas: <p style="....">)
Die HTML-Mails, die ich bekomme, haben alle ein Tabellendesign.

Destruction · 21.07.2010, 20:23

Zitat:

Zitat von Wolla

Verschiedene Mailclients können keinen CSS code, der mit <style> </style> definiert ist interpretieren. Um alle Clients zu erreichen, musst du den CSS-Code direkt in den HTML-Code integrieren (mir fällt grade der Fachbegriff nicht ein, ich meine sowas: <p style="....">)
Die HTML-Mails, die ich bekomme, haben alle ein Tabellendesign.

Das hatte ich schon vermutet / gehofft !
Ja das mit dem Tabellendesign wäre dann meine 2. Option gewesen die ich jetzt eigentlich umsetzen wollte.

Also biste dir sicher dass das so klappen sollte mit style= "" ?

Danke
Grüße

ChrisB · 21.07.2010, 20:30

Zitat:

Zitat von Destruction

Also biste dir sicher dass das so klappen sollte mit style= "" ?

Wenn überhaupt, dann so.

Aber auch da kannst du nicht davon ausgehen, dass alle Eigenschaften überall unterstützt werden.
Und wenn die Mail über ein Webmail-Interface angezeigt werden, dann filtern die Anbieter da noch rigoroser, weil du ja nicht mit dem Layout deiner Mail das Layout der darum liegenden Seite zerstören können sollst ...

HTML-E-Mail ist sowieso eine Unsitte - text/plain ist da das wesentlich angenehmere Format, m.E.
Wer doch unbedingt Produktinfos o.ä. „stylisch“ präsentieren will, der kann in der Mail einen Link auf eine entsprechende Seite einbauen.

Destruction · 21.07.2010, 20:41

Zitat:

Zitat von ChrisB

HTML-E-Mail ist sowieso eine Unsitte - text/plain ist da das wesentlich angenehmere Format, m.E.
Wer doch unbedingt Produktinfos o.ä. „stylisch“ präsentieren will, der kann in der Mail einen Link auf eine entsprechende Seite einbauen.

Habe ich versucht demjenigen auch zu sagen, aber der wollte nicht hören und will das so haben :/ :/

litterauspirna · 21.07.2010, 20:42

Ich glaube der Fachbegriff dafür nennt sich inline CSS. Das heist die CSS Codes direkt in die HTML Tags zu schreiben also so hier.

Code:

<div style="float: left;">

</div>

Und so eiter das durch alle Tags.

Gruß litter

Destruction · 21.07.2010, 20:51

Jop... habs jetzt mal so gemacht.
Mal schauen obs jetzt bei allen klappt. Werde euch morgen noch mal bescheid geben.

Vielen Dank für die Tipps.

cu
Grüße
Destruction

Manko10 · 21.07.2010, 21:01

HTML in E-Mails ist eh so eine Sache. Thunderbird ist da noch mit einer der Besten, die meisten anderen verstehen aber kaum CSS, vor allem mit floats hast du so deine liebe Mühe, ob inline oder nicht. So rendert Outlook z.B. (ja, sogar in der neuen Version 2010) sein HTML immer noch über den Word-HTML-Parser und nutzt nicht die Rendering-Engine des IE.
Wenn du wirklich E-Mails layouten willst, dann musst du Tabellen nutzen, so grausam und unsäglich es ist (das ist auch ein Grund, warum ich keine HTML-E-Mails verschicke neben dem, dass ich bunte E-Mails sowieso nur in sehr wenigen Fällen ausstehen kann).
Hier mal ein CSS-Tricks-Video über HTML-E-Mails: #30: Creating and Sending HTML Email

Flor1an · 21.07.2010, 21:11

Was oft gemacht wird ist, eben nur der Link zum entsprechenden Newsletter in einer Textemail zu versenden. Das hat nicht nur den Vorteil, dass es ne ganze normale Webseite ist und man die Inhalte des Newsletters noch NACH versenden verändern kann (kann einem manchmal den Arsch retten) sondern bringt dir die Möglichkeit die Newsletter auch zu tracken, also zu sehen WER ruft den Newsletter auf (über den Cookie der sowieso bei der Webseite gesetzt ist) und du die Zugriffszahlen sicher mitloggen kannst.

Sind alles Vorteile ... vlt. kannst du deinen Auftraggeber noch überzeugen.

Destruction · 21.07.2010, 21:13

Zitat:

Zitat von Flor1an

Was oft gemacht wird ist, eben nur der Link zum entsprechenden Newsletter in einer Textemail zu versenden. Das hat nicht nur den Vorteil, dass es ne ganze normale Webseite ist und man die Inhalte des Newsletters noch NACH versenden verändern kann (kann einem manchmal den Arsch retten) sondern bringt dir die Möglichkeit die Newsletter auch zu tracken, also zu sehen WER ruft den Newsletter auf (über den Cookie der sowieso bei der Webseite gesetzt ist) und du die Zugriffszahlen sicher mitloggen kannst.

Sind alles Vorteile ... vlt. kannst du deinen Auftraggeber noch überzeugen.

Stimmt das ist eine sehr gute Begründung!
Danke auch Manko10 für deinen Link.

Schaue mir das gerade an.

Sehr gut gemacht das Video.

Vielen dank euch allen

Grüße

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Doppelter E-Mail versand	include21	PHP Tipps 2010	3	06.05.2010 15:47
Problem mit HTML Newsletter	AnnyKey	PHP Tipps 2009	22	30.09.2009 13:18
Lotus Notes \| HTML Newsletter Tester gesucht	beist	HTML, Usability und Barrierefreiheit	0	22.09.2009 08:57
Foxmail + HTML Newsletter	beist	HTML, Usability und Barrierefreiheit	4	18.09.2009 15:53
php script mit html script verbinden	Bimbo-01	PHP Tipps 2009	2	21.02.2009 14:11
Design und Code Trennen	TeazY	PHP Tipps 2008	29	21.05.2008 12:08
html newsletter?	$$$ ThiKool $$$	HTML, Usability und Barrierefreiheit	5	21.11.2005 10:49
Design		Beitragsarchiv	26	04.06.2005 20:56
Frage zum Design: HTML Formular		HTML, Usability und Barrierefreiheit	11	27.01.2005 22:17
html newsletter bild mitschicken		PHP Tipps 2005	1	17.01.2005 09:42
Automatischer HTML Newsletter??		PHP Tipps 2004	1	26.09.2004 17:49
Validitor (HTML 4.01) = Schwachsinn?	Filewalker	Off-Topic Diskussionen	19	03.08.2004 15:27
newsletter problem	wizzardxx	PHP Tipps 2004	0	17.07.2004 13:58


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

21.07.2010, 20:21
Wolla Moderator Registriert seit: 06.06.2008 Beiträge: 4.847 PHP-Kenntnisse: Fortgeschritten	Verschiedene Mailclients können keinen CSS code, der mit <style> </style> definiert ist interpretieren. Um alle Clients zu erreichen, musst du den CSS-Code direkt in den HTML-Code integrieren (mir fällt grade der Fachbegriff nicht ein, ich meine sowas: <p style="....">) Die HTML-Mails, die ich bekomme, haben alle ein Tabellendesign. __________________ Warum denkt mein Hund eigentlich immer dann, wenn es an der Tür klingelt, es sei für ihn?

21.07.2010, 20:42
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.070 PHP-Kenntnisse: Anfänger	Ich glaube der Fachbegriff dafür nennt sich inline CSS. Das heist die CSS Codes direkt in die HTML Tags zu schreiben also so hier. Code: <div style="float: left;"> </div> Und so eiter das durch alle Tags. Gruß litter __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de

21.07.2010, 20:51
Destruction Erfahrener Benutzer Registriert seit: 05.02.2009 Beiträge: 1.356 PHP-Kenntnisse: Fortgeschritten	Jop... habs jetzt mal so gemacht. Mal schauen obs jetzt bei allen klappt. Werde euch morgen noch mal bescheid geben. Vielen Dank für die Tipps. cu Grüße Destruction __________________ "Dummheit redet viel..Klugheit denkt und schweigt.." [Amgervinus]

21.07.2010, 21:01
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.425 PHP-Kenntnisse: Fortgeschritten	HTML in E-Mails ist eh so eine Sache. Thunderbird ist da noch mit einer der Besten, die meisten anderen verstehen aber kaum CSS, vor allem mit floats hast du so deine liebe Mühe, ob inline oder nicht. So rendert Outlook z.B. (ja, sogar in der neuen Version 2010) sein HTML immer noch über den Word-HTML-Parser und nutzt nicht die Rendering-Engine des IE. Wenn du wirklich E-Mails layouten willst, dann musst du Tabellen nutzen, so grausam und unsäglich es ist (das ist auch ein Grund, warum ich keine HTML-E-Mails verschicke neben dem, dass ich bunte E-Mails sowieso nur in sehr wenigen Fällen ausstehen kann). Hier mal ein CSS-Tricks-Video über HTML-E-Mails: #30: Creating and Sending HTML Email __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems” Geändert von Manko10 (21.07.2010 um 21:05 Uhr).

21.07.2010, 21:11
Flor1an ¯\_(ツ)_/¯ Registriert seit: 18.06.2008 Beiträge: 8.814 PHP-Kenntnisse: Fortgeschritten	Was oft gemacht wird ist, eben nur der Link zum entsprechenden Newsletter in einer Textemail zu versenden. Das hat nicht nur den Vorteil, dass es ne ganze normale Webseite ist und man die Inhalte des Newsletters noch NACH versenden verändern kann (kann einem manchmal den Arsch retten) sondern bringt dir die Möglichkeit die Newsletter auch zu tracken, also zu sehen WER ruft den Newsletter auf (über den Cookie der sowieso bei der Webseite gesetzt ist) und du die Zugriffszahlen sicher mitloggen kannst. Sind alles Vorteile ... vlt. kannst du deinen Auftraggeber noch überzeugen. __________________ ▇█▓▒░◕‿‿◕░▒▓█▇