HTML Newsletter und Outlook 2007

tomtom69 · 14.04.2011

Hola,

wir alle wissen ja, wie toll html Emails in Outlook2007 funktionieren ... aber es muss doch möglich sein, das folgende, doch recht rudimentäre Layout auch in Outlook 2007 zum laufen zu kriegen, oder?

BTW: In den diversen anderen Clients sieht's aus, wie es sein soll!

Hier ein Screenshot (richtig):

... nicht richtig (Outlook 2007):

Hier der Code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Coffenco Newsletter</title>
<style type="text/css">
<!--
body {
	font: 100% Arial, Helvetica, sans-serif;
	background: #FFF;
	margin: 0;
	padding: 0;
	color: #000;	
}

/*td {
	border:1px dashed red;
}*/

td {
	vertical-align:top;
}

.hinweis {
	text-align:center;
}

.t_left {
	width:10px;
	background:url(http://www.coffenco.de/newsletter/2011/1/shadow_left.jpg) repeat-y;
}

.t_right {
	width:10px;
	background:url(http://www.coffenco.de/newsletter/2011/1/shadow_right.jpg) repeat-y;
}

.t_header {
	background:url(http://www.coffenco.de/newsletter/2011/1/streifen_header.jpg) no-repeat;
	height:47px;
	vertical-align:middle;
}

.t_opener {
	background:url(http://www.coffenco.de/newsletter/2011/1/fond_soft.jpg) no-repeat rgb(253,240,213);
	height:300px;
}

p {
	font-size:12px;
}

.d_content {
	padding:32px 0;
	border-bottom:2px solid rgb(86,9,16);
}

.grey {
	background-color:rgb(231,226,217);
}

.txt_indent {
	padding:32px 0;
}

p {
	padding:0 20px;
	color:rgb(86,9,16);
}

.hinweis {
	padding:0;
	margin:0;
}

h1 {
	padding:0 20px;
	font-size:14px;
	color:rgb(86,9,16);
}

.footer {
	background:url(http://www.coffenco.de/newsletter/2011/1/fond_footer.jpg);
	height:15px;
}

.t_left_corner {
	background:url(http://www.coffenco.de/newsletter/2011/1/shadow_left_bottom_corner.jpg);
	height:10px;
	width:10px;
}

.t_right_corner {
	background:url(http://www.coffenco.de/newsletter/2011/1/shadow_right_bottom_corner.jpg);
	height:10px;
	width:10px;
}

.t_bottom {
	background:url(http://www.coffenco.de/newsletter/2011/1/shadow_bottom.jpg);
	height:10px;
}

.t_left_top {
	background:url(http://www.coffenco.de/newsletter/2011/1/shadow_left_bottom_corner_top.jpg);
}

.t_bottom_left {
	background:url(http://www.coffenco.de/newsletter/2011/1/shadow_bottom_left.jpg);
	width:22px;
	height:10px;
}

.t_right_top {
	background:url(http://www.coffenco.de/newsletter/2011/1/shadow_right_bottom_corner_top.jpg);
}

.imprint {
	font-size:9px;
	text-align:center;
	vertical-align:middle;
}

-->
</style></head>

<body class="oneColFixCtrHdr">

<!-- Tabelle zum zentrieren -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td align="center">
<!-- Tabelle f&uuml;r den Inhalt -->
            <table width="740px" border="0" cellpadding="0" cellspacing="0">       
                <tr>
                	<td class="t_left"></td>
                    <td class="t_header"><p class="hinweis">Sollte der Newsletter fehlerhaft angezeigt werden, nutzen Sie bitte den folgenden Link:<br /><a href="http://www.coffenco.de/newsletter/2011/1/cx_nl_2011-01.php" target="_blank">Newsletter &uuml;ber Browser aufrufen</a></p></td>
                    <td class="t_right"></td>
                </tr>
                <tr>
                	<td class="t_left"></td>
                    <td><img src="http://www.coffenco.de/newsletter/2011/1/keyvis_index_070310.gif" height="360" width="720" /></td>
                    <td class="t_right"></td>
                </tr>
                <tr>
                	<td class="t_left"></td>
                    <td class="t_opener" align="center">
                    
                    	<table border="0" cellpadding="0" cellspacing="0" style="padding:0 24px;">
                        	<tr>
                            	<td width="443px" class="d_content"><h1>Liebe Mitarbeiter und Mitarbeiterinnen,</h1><p>

es gibt immer wieder Neuigkeiten und Themen, &uuml;ber die es sich lohnt, zu informieren. Um die Kommunikation untereinander und &uuml;ber interessante und wichtige Themen zu verbessern, werden wir Sie ab sofort &uuml;ber aktuelle Coffenco-Themen via eMail-Newsletter informieren. 
Freuen Sie sich also auf interessante Neuigkeiten von Coffenco!
<br /><br />
Mit freundlichen Gr&uuml;&szlig;en<br />
Udo Leunissen</p></td>
                                <td width="231px" class="d_content"><img src="http://www.coffenco.de/newsletter/2011/1/logo_intro.gif" width="210" height="210" /></td>
                            </tr>
                            <tr>
                            	<td width="443px" class="d_content grey"><h1>Cafitesse 60 Promotion</h1><p>
Am 01.04.2011 hat die vierte Cafitesse 60 Preis-Promotion begonnen. Die Maschine wird zum Kaufpreis von &euro; 999 zzgl. MwSt. und zu einem Mietpreis von &euro; 39 zzgl. MwSt. pro Monat angeboten. Die Promotion unterst&uuml;tzt die Verkaufsberater bei der Neukundenakquise. Werblich wird die Aktion &uuml;ber einen digitalen Flyer im PDF-Format und &uuml;bers Internet (<a href="http://www.coffenco.de" target="_blank">www.coffenco.de</a>) forciert. Die Aktion l&auml;uft bis zum 30.06.2011.</p></td>
                                <td width="231px" class="d_content grey"><img src="http://www.coffenco.de/newsletter/2011/1/c60_promo.jpg" width="210" height="210" /></td>
                            </tr>
                            
                            <tr>
                            	<td width="443px" class="d_content grey"><h1>Cross Selling Flyer</h1><p>
Der Cross Selling Flyer ist ein Instrument zur Steigerung des Nebenartikelsortiment-Absatzes. Er dient zur Unterst&uuml;tzung der Kundenbetreuer bei Gespr&auml;chen mit Bestandskunden.  Der Cross Selling Flyer ist nun &uuml;berarbeitet und neu produziert worden. Beim Geb&auml;ck, bei den Tees und beim Zubeh&ouml;r haben sich folgende &auml;nderungen ergeben: Bahlsen First Class wurde entfernt und einzeln verpackte Butterherzen kamen hinzu. Die drei neuen Teekanne-Tees von Rewe wurden hinzugef&uuml;gt und der Verkaufspreis der Teekiste ver&auml;ndert. Beim Pappbecher sind  &auml;nderungen bei Gr&ouml;&szlig;e, Verkaufspreis und Abpackung erfolgt. In KW 14 wurde der Cross Selling Flyer an alle Coffenco-Niederlassungen geschickt.  </p></td>
                                <td width="231px" class="d_content grey"><img src="http://www.coffenco.de/newsletter/2011/1/c-selling.jpg" width="210" height="210" /></td>
                            </tr>
                            
                            <tr>
                            	<td width="443px" class="d_content grey" style="border:none"><h1>Cafitesse 60 mit M&uuml;nzpr&uuml;fer</h1><p>
Unsere Kunden gehen dazu &uuml;ber die Kaffeeversorgung ihrer Mitarbeiter nicht mehr vollst&auml;ndig zu &uuml;bernehmen. Kaffeemaschinen mit integriertem Bezahlsystem sind daher gefragt. Als Antwort auf diesen Kundenwunsch, haben wir Michael Orth gebeten, einen M&uuml;nzpr&uuml;fer f&uuml;r die Cafitesse 60 zu entwickeln. Die zweite Version des M&uuml;nz-pr&uuml;fers ist zwischenzeitlich in der Zentrale in Mainz eingetroffen. Wir testen derzeit die Kompatibilit&auml;t des M&uuml;nzpr&uuml;fers mit verschiedenen Wertmarken-Typen.</p></td>
                                <td width="231px" class="d_content grey" style="border:none"><img src="http://www.coffenco.de/newsletter/2011/1/cafitesse_60_muenzer.jpg" width="210" height="210" /></td>
                            </tr>
                            
                        </table>
                    
                    </td>
                    <td class="t_right"></td>
                </tr>
                 <tr>
                	<td class="t_left_top"></td>
                    <td class="footer imprint">&copy; 2011 Coffenco International GmbH  |  <a href="http://www.coffenco.de/datenschutz.html" target="_blank">Datenschutz</a>  |  <a href="http://www.coffenco.de/impressum.html" target="_blank">Impressum</a>  | <a href="http://www.coffenco.de/kontakt.html" target="_blank">Kontakt</a>  |</td>
                    <td class="t_right_top"></td>
                </tr>
                <tr>
                	<td class="t_left_corner"></td>
                    <!-- <td class="t_bottom_left"></td> -->
                    <td class="t_bottom"></td>
                    <td class="t_right_corner"></td>
                </tr>
                
            </table>
          <!-- Ende Tabelle Inhalt -->
		</td>
	</tr>
</table><!-- Ende Tabelle zentrieren -->
<br /><br />
</body>
</html>

Wäre toll, wenn mir einer den Weg zeigen könnte

THX und sonnige Grüße,

Tom

sokie · 14.04.2011

AW: HTML Newsletter und Outlook 2007

stylebereiche im header für newslettermails sind sowieso problematisch bei denen, die ihre mails bei Anbietern im Browser lesen.
wenn du Tabellen benutzt und dazu grundsätzlich inlinestyles gehts auch im outlook.

tomtom69 · 14.04.2011

AW: HTML Newsletter und Outlook 2007

Naja, Tabellen hab ich ja benutzt ... dann werde ich das mal auf Inline-Styles umbauen und dann mal schauen ... melde mich.

Danke,

Tom

tomtom69 · 15.04.2011

AW: HTML Newsletter und Outlook 2007

Moin,

tja, selbst mit inline styles funktioniert es nicht. Das Einzige, was annähernd geht, ist: Online im IE7 o. 8 aufrufen und Seite per E-Mail versenden. Allerdings werden Hintergrundbilder und Padding ignoriert. Bei den BG-Bilder habe ich gelesen, dass die Eigenschaft nicht unterstützt wird (was für eine Überraschung

) ... aber dafür werde ich diesen Fix probieren:

Padding wird aber voll unterstützt - zumindest lt. dieser Liste:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)

Wie machen es denn die Anderen, die wunderschöne HTML Emails gestalten und verschicken ... z. B. NH Hotels?

Sonnige Grüße,

Tom