Anlagen in HTML-Mail

Grummel13 · 12.05.2011

Hallo liebes Forum.

Ich habe eine Idee, nur fehlt es an dem Wissen für die Umsetzung und dazu möchte ich Euch um Eure Meinung und Rat fragen…

Es geht um Folgendes:

Ich möchte per Mail eine einfache Form von Newsletter verfassen (erste Gehversuche).

Dazu möchte ich die Mail in HTML verfassen. Habe leider wenig HTML und CSS, bitte Eure Antworten dementsprechend einfach und verständlich formulieren. Werde die Seite in HTML schreiben und dann im Safari mit Apfel-I in Mail einbinden. Wie verfahre ich dabei z.B. mit den CSS-Files?
Einige Infos sollen als PDF abrufbar sein. Dazu möchte ich in der (HTML-)Mail links darauf setzen.

Nun meine Frage… Die PDF’s müssen ja irgendwo fest gespeichert sein. Wo speichere ich solche vertraulichen Daten am besten ab? Ich könnte sie auf meiner privaten Homepage-Server in einem separaten Verzeichnis speichern. Dieses Verzeichnis müsste dann natürlich für Suchmaschinen gesperrt werden. Finde diese Lösung nicht ganz glücklich. Auch die Nutzung von Filehostern fällt somit raus, oder?

Am besten wäre natürlich, wenn man die PDF’s als Anlage mitschickt und in dem HTML-Code darauf verweisen könnte. Dann lägen die Files nicht irgendwo im Netz herum.

Wie kann ich mein Vorhaben am besten umsetzen? Oder gibt es noch bessere Ansätze oder Möglichkeiten?
Die Mail soll nicht aufwendig sein. Einfach ein Drop-Menu auf der linken Seite und eine Überschrift mit ein wenig Anredetext.

Bin für jeden Rat/Tipp sehr dankbar!

Schöne Grüße

leveler · 12.05.2011

AW: Anlagen in HTML-Mail

Werde die Seite in HTML schreiben und dann im Safari mit Apfel-I in Mail einbinden. Wie verfahre ich dabei z.B. mit den CSS-Files?

Css kann man
1. auslagern
2. im Kopfbereich (head) des html-Dolumentes schreiben
oder
3. gleich inline in den html-Tag schreiben

Punkt 1 ist für Dein Vorhaben somit wohl uninteressant

Grummel13 · 12.05.2011

AW: Anlagen in HTML-Mail

Danke leveler.
Das hilft schon enorm weiter. Werde mich heute Abend gleich an die Umsetzung machen.

Bleibt nur noch das Problem der Anhänge...

Schöne Grüße

nickido · 12.05.2011

AW: Anlagen in HTML-Mail

typischerweise wird beim Newsletter die css in den <head> Bereich geschrieben

Die pdfs würde ich auf deinem Homepage-Server ablegen.
Wenn sie nur kurze Zeit zur Verfügung stehen sollen, würde ich mir um die Suchmaschinen keine Gedanken machen, ansonsten kannst du ihnen auch verbieten auf deinen Ordner zuzugreifen, entweder über .htaccess oder robot.txt

Drop-Down-Menü würde ich auf keinen Fall machen, denn richtig schön wird so etwas nur mit JavaScript und das hat im Newsletter nichts zu tun.

Außerdem musst du mit Tabellen-Strukturen arbeiten, damit auch ein Outlookuser dein Newsletter lesen kann

Viel Erfolg!

Grummel13 · 12.05.2011

AW: Anlagen in HTML-Mail

@nickido: Vielen Dank für Deine sehr ausführliche Antwort!

Außerdem musst du mit Tabellen-Strukturen arbeiten, damit auch ein Outlookuser dein Newsletter lesen kann

Heißt das, dass ich kein CSS verwenden soll, sondern ausschließlich Tabellen?

Das Menü werde ich dann nicht verwenden, sondern nur einfache Links in Aufzählungen setzen.

Grüße

Myhar · 12.05.2011

AW: Anlagen in HTML-Mail

Man kann auch Tabellen mit CSS stylen...

Code:

table td.klassenname{background-color:green;}

Nur muss man für einen Newsletter heutzutage trotzdem immer noch tabellen und keine div Layouts verwenden, da Outlook das sonst nicht korrekt darstellen kann.
Auch die externe Einbettung der Stylesheets kann in Outlook Probleme machen, also muss man die Styles auch direkt einbinden.

Auch ich würde die PDF Files direkt einbinden, da sich deine Kunden sicher nicht freuen, wenn ihre Posteingänge mit unter Umständen riesigen PDFs zugemüllt werden. (btw. vielleicht kann man die Infos im PDF ja auch im HTML darstellen ;-) )

L. G.

Grummel13 · 13.05.2011

AW: Anlagen in HTML-Mail

Hallo zusammen.

Auch ich würde die PDF Files direkt einbinden, da sich deine Kunden sicher nicht freuen, wenn ihre Posteingänge mit unter Umständen riesigen PDFs zugemüllt werden.

Meiner laienhaften Meinung nach widerpricht sich diese Aussage. Wenn ich PDF's einbinde, wird die Mail doch größer? Oder verstehe ich dabei etwas miss?

(btw. vielleicht kann man die Infos im PDF ja auch im HTML darstellen ;-) )

Leider nicht möglich, da es sich tlw. um Scans handelt.

Bis jetzt habe ich folgenden Code zusammen. Dürfte ich darum bitten, einmal zu prüfen, ob dieser Mail-HTML tauglich ist und von den gängisten Mail-Prg. verstanden wird? Für Profis vlt. ein wenig gräuselig, aber als Beginner bin ich froh drum... Es gibt bestimmt vieles, was man zusammen- und vereinfachen kann. Für Tipps wäre ich sehr dankbar!

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
 
a:hover, a:active, a:focus {
 text-decoration: none;
 font-size:13px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}
a {
 font-size:13px;
}
a:link {
 color: #42413C;
 text-decoration: underline;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
a:visited {
 color: #6E6C64;
 text-decoration: underline;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
p {
 font-size:13px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
 font-size:22px;
 line-height:0px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
body {
 font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
 background: #42413C;
 margin: 0;
 padding: 0;
 color: #000;
}
 
.container {
 background: #42413C;
 width: 800px;
 background: #FFF;
 margin: 0 auto; 
}
.header {
 background: #f3fcd9;
 width:535px;
 padding-left:15px;
 padding-top:10px;
 float:right;
 display: table-cell;
 vertical-align: middle;
 min-height: 35px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}
.content {
 width: 515px;
 float: left;
 padding-top:10px;
 padding-left:15px;
 }
 
.footer {
 padding: 10px 0;
 background: #f3fcd9;
 position: relative;
 clear: both; /
}
 #navlist {
  list-style-type: none;
  color: darkgray;
  margin-left: -0px;
  width:100px;
  }
 
 #subnavlist {
  list-style-type: circle;
  color: blue;
  width:300px;
  margin-left: -30px;
  }
 
 #active:hover li { display: block; }
 #active li { display: none; }
 
 #navcontainer {
  float: left;
  width: 250px;
  height:295px;
  background: #f3fcd9;
  padding-bottom: 10px;
  padding-top:50px;
  }
 
 #navcontainer a {
  color: black;
  */background-color: #green;*/
  width: 200px;
  display: block;
  height:auto;
  }
 
 #navcontainer a:visited {
  color: '000;
  */background-color: blue;*/
  }
 
 #navcontainer a:active {
  color: grey;
  */background-color: gray;*/
  }
 
 #navcontainer a:hover {
  color: grey;
  */background-color: gray;*/
  }
 
</style></head>
<body>
<div class="container">
  <div class="header"><h1>Newsletter</h1>
</div>
 
  <div id="navcontainer">
  <ul id="navlist">
  <li><a href="Doc1.pdf">Doc1</a></li>
  <li><a href="Doc2.pdf">Doc2</a></li>
  <li><a href="Doc3.pdf">Doc3</a></li>
  <li id="active"><a href="#" id="current">Anlagen</a>
  <ul id="subnavlist">
   <li id="subactive">
    <a href="Anlage1.pdf">Anlage1</a></li>
   <li><a href="Anlage2.pdf">Anlage2</a></li>
   <li><a href="Anlage3.pdf">Anlage3</a></li>
   <li><a href="#">Subitem four</a></li>
   <li><a href="#">Subitem four</a></li>
  </ul></li>
 </ul>
</div>
 
 
  <div class="content">
    <p>Sehr geehrter Herr ...</p>
 
    <p>bla bla</p>
    <p>Mit freundlichen Grüßen<br>
 
  </div>
  <div class="footer">
</body>
</html>

Vielen Dank schon jetzt.
Grüße

Myhar · 13.05.2011

AW: Anlagen in HTML-Mail

Grummel13 schrieb:
Meiner laienhaften Meinung nach widerpricht sich diese Aussage. Wenn ich PDF's einbinde, wird die Mail doch größer? Oder verstehe ich dabei etwas miss?

Verzeihung, da fehlt ein nicht in dem Satz:
Auch ich würde die PDF nicht Files direkt einbinden ...
Danke für den Hinweis

Wegen deinem Code:
Wie gesagt, meine Erfahrung ist, dass man in Mails am Besten mit Tabellen arbeitet. Aus dem Grund, dass Outlook nicht mehr die Render Engine vom IE sondern die von Word verwendet.

L. G.

Grummel13 · 13.05.2011

AW: Anlagen in HTML-Mail

Hallo.

Wie gesagt, meine Erfahrung ist, dass man in Mails am Besten mit Tabellen arbeitet.

Sorry, wenn ich noch einmal Nachfrage...
D.h. ich soll nicht mit einem Header, Navileiste und Content arbeiten, sondern diese durch eine Tabelle ersetzen? Zum Verständnis, dürfte ich um ein kleines Beispiel bitten?

Wäre der Code sonst so Mail tauglich?

Verzeihung, da fehlt ein nicht in dem Satz:
Auch ich würde die PDF nicht Files direkt einbinden ...
Danke für den Hinweis

Kein Problem, kann passieren ;-))

Grüße

P.S. Wie bekomme ich beim Zitat den Hinweis eingeblendet, vom wem das Zitat stammt? (Ist zwar OT, aber mir fehl eben der Unterchied zw. meinen Zitaten und den von Myhar auf)

bsnow · 13.05.2011

AW: Anlagen in HTML-Mail

Wie meine Vorgänger schon geschrieben haben, würde ich persönlich keine CSS Datei auslagern und auch keine PDFs via DropDown Menu einbinden. Du bekommst mehr ärger als es dir später nutzt. Das du das Layout via Tabellen machen solltest, stimme ich auch zu. Je nach Einstellungen rendert der Outlook via Word Engine oder mit der integrierten Engine. Auch gibt es mehr E-Mail Anwendungen als Outlook, wie z.B. die ganzen Web-Platformen (GMail, GMX, usw.), die es je nach Browser und Sicherheitseinstellungen in der E-Mail Anwendung anders darstellen könnten.

Da ich nicht weiß was du mit dem Newsletter erreichen willst, behaupte ich einfach mal das du je nach Auswahl im DropDown Menu eine andere PDF bereitstellen willst.

Da würde ich dir eher ein Formular auf deiner Internetseite raten oder als Text:

Falls 1. dann Anhang namens x usw. usf.

Alles andere wird dir eher Probleme machen.

Grummel13 · 13.05.2011

AW: Anlagen in HTML-Mail

@bsnow: Die CSS-Angaben sind nicht ausgelagert, sondern stehen im Head. Oder macht das keinen Unterschied?
Werde das Ganze heute Abend auf eine Tabelle umstellen. Für ein kurzes Beispiel wäre ich trotzdem sehr dankbar, damit ich weiß, wo es lang geht.

Ich möchte mit jedem Link (in der Nav-Leiste) auf eine andere PDF verlinken, die dann auf einem Server liegt und somit zum Download bereitsteht.

SG

Myhar · 16.05.2011

AW: Anlagen in HTML-Mail

Grummel13 schrieb:
Sorry, wenn ich noch einmal Nachfrage...
D.h. ich soll nicht mit einem Header, Navileiste und Content arbeiten, sondern diese durch eine Tabelle ersetzen? Zum Verständnis, dürfte ich um ein kleines Beispiel bitten?

Natürlich darfst du darum bitten. Und nachdem ich nicht warten will, bis du darum bittest, nehme ich dir die Antwort schon vorweg:

HTML:

<html>
 <head>
  <style>
   <!-- Deine styles-->
  </style>
 </head>
 <body>
  <table>
   <!-- Deine Tabelle -->
  </table>
 </body>
</html>

Ja, das ist etwas verkürzt (kein doctype etc.) aber das solltest du auch selbst hinbekommen

Grummel13 schrieb:
P.S. Wie bekomme ich beim Zitat den Hinweis eingeblendet, vom wem das Zitat stammt? (Ist zwar OT, aber mir fehl eben der Unterchied zw. meinen Zitaten und den von Myhar auf)

Indem du auf zitieren klickst (Findest du unter jedem einzelnen Beitrag)

L. G.

Grummel13 · 16.05.2011

AW: Anlagen in HTML-Mail

Hallo zusammen.

Glaube jetzt ist mein gedankliche Knoten geplatzt.

Ich war immer in dem Irrglauben, dass die Tabelle CSS-Formatierungen ersetzt.
Die Tabelle ersetzt lediglich nur die Container-Anordnungen. Die Schriftformatierungen erfolgen weiterhin mit eingebundenem CSS.

Ein GROßES Danke für Eure Mithilfe den Knoten zu lösen.

Werde mich heute Abend mal ans Werk machen und Euch berichten, ob es funktioniert hat.

Myhar schrieb:
Ja, das ist etwas verkürzt (kein doctype etc.) aber das solltest du auch selbst hinbekommen

Ich gebe mein Bestes

. Versuch macht klug. Manchmal möchte ich Dinge auf die Beine stellen, von denen ich relativ wenig Ahnung habe und "beiße" mich daran fest, bist es klappt.

Myhar schrieb:
Indem du auf zitieren klickst (Findest du unter jedem einzelnen Beitrag)

Danke, wieder was dazugelernt.