5
Ich habe eine HTML-E-Mail-Vorlage, die reagiert werden soll. Es zeigt sich perfekt auf verschiedenen E-Mail-Clients und mobilen. Aber auf Outlook sind die Gots auf 100% gestreckt, was absolut nicht cool ist, da der Header 600 Pixel breit ist.Responsive HTML-E-Mail: Outlook
Ich weiß, dass Outlook die max-width Eigenschaft nicht unterstützt. Aber mit nur width verursacht mobile Browser, es falsch anzuzeigen.
Also bassicly meine Frage ist: Was soll ich tun/ändern Sie die Vorlage, um es reagieren und immer noch mit einer maximalen Breite von 600px anzeigen?
Hier ist der Code. Zuerst mit zusätzlichen CSS (sollte besser zu lesen sein), zweitens mit Inline-CSS (die beim E-Mail-Versand verwendet werden sollten). Verwendet http://beaker.mailchimp.com/inline-css für das Rendern inline.
<!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>
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin:0;
padding:0;
}
* { font-family:Arial, Verdana, "Times New Roman";}
img {
max-width: 100%;
}
.collapse {
margin:0;
padding:0;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%!important;
height: 100%;
background:#F4F3F4;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a { color: #2BA6CB;}
p.callout {
padding:15px;
background-color:#ECF8FF;
margin-bottom: 15px;
}
.callout a {
font-weight:bold;
color: #2BA6CB;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap { width: 100%;}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,h2,h3,h4,h5,h6 {
line-height: 1.1; margin-bottom:15px; color:#000;
font-family:Arial, Verdana, "Times New Roman";
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }
h1 { font-weight:200; font-size: 44px;}
h2 { font-weight:200; font-size: 37px;}
h3 { font-weight:500; font-size: 27px;}
h4 { font-weight:500; font-size: 23px;}
h5 { font-weight:900; font-size: 17px;}
h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;}
.collapse { margin:0!important;}
p, ul {
margin-bottom: 10px;
font-weight: normal;
font-size:14px;
line-height:1.6;
}
p.lead { font-size:17px; }
p.last { margin-bottom:0px;}
ul li {
margin-left:5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
Nuke it from orbit. It's the only way to be sure.
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display:block!important;
max-width:600px!important;
margin:0 auto!important; /* makes it centered */
clear:both!important;
padding:0!important;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
padding:0 5px 5px 5px;
max-width:600px;
margin:0 auto;
display:block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
background:#FFF;
border: solid 1px #d9d9d9;
}
/* Be sure to place a .clear element after each set of columns, just to be safe */
.clear { display: block; clear: both; }
</style>
</head>
<body>
<table class="body-wrap">
<tr>
<td></td>
<td class="container" bgcolor="#F4F3F4">
<div class="content">
<p style="color:#666; margin:0; padding:0; font-size:10px;"><a href="{email_url}" style="color:#666; margin:0; padding:0;">Klik hier</a> om deze e-mail online te bekijken.</p>
<table bgcolor="#FFFFFF" style="text-align:left;">
<tr>
<td>
<p><img src="http://topografieindeklas.nl/brandingfiles/headerAlgemeen600px.jpg" /></p>
<!-- Callout Panel -->
<p class="callout">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. <a href="#">Do it Now! »</a>
</p><!-- /Callout Panel -->
<?php if (empty($posts)) { ?>
<p style="padding: 15px;">Here you can start to write your message. Be polite with your readers! Do not forget the subsject of this message.</p>
<?php } else { ?>
<table cellpadding="5" style="padding: 15px;">
<?php foreach ($posts as $post) { setup_postdata($post); ?>
<tr>
<td><a href="<?php echo get_permalink(); ?>"><img width="75" src="<?php echo newsletter_get_post_image($post->ID); ?>" alt="image"></a></td>
<td valign="top">
<a href="<?php echo get_permalink(); ?>"><h3><?php the_title(); ?></h3></a></td>
</tr>
<?php } ?>
</table>
<?php } ?>
<br/>
<br/>
</td>
</tr>
<tr style="margin:0 15px;">
<td align="center" style="border-top: solid 1px #d9d9d9; padding:5px 0;" >
<p>
<a href="http://twitter.com/Topografie">Twitter</a> |
<a href="https://www.facebook.com/TopografieindeKlas">Facebook</a> |
<a href="{unsubscription_url}">Geen nieuws e-mails meer ontvangen</a>
</p>
</td>
</tr>
</table>
</div>
</td>
<td></td>
</tr>
</table><!-- /BODY -->
</body>
</html>
Inline CSS:
<!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" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<head style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
</head>
<body style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;height: 100%;background: #F4F3F4;width: 100%;">
<table class="body-wrap" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";width: 100%;">
<tr style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<td style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";"></td>
<td class="container" bgcolor="#F4F3F4" style="margin: 0 auto;padding: 0;font-family: Arial, Verdana, "Times New Roman";display: block;max-width: 600px;clear: both;">
<div class="content" style="margin: 0 auto;padding: 0 5px 5px 5px;font-family: Arial, Verdana, "Times New Roman";max-width: 600px;display: block;">
<p style="color: #666;margin: 0;padding: 0;font-size: 10px;font-family: Arial, Verdana, "Times New Roman";margin-bottom: 10px;font-weight: normal;line-height: 1.6;"><a href="{email_url}" style="color: #666;margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">Klik hier</a> om deze e-mail online te bekijken.</p>
<table bgcolor="#FFFFFF" style="text-align: left;margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";width: 100%;background: #FFF;border: solid 1px #d9d9d9;">
<tr style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<td style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<p style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;"><img src="http://topografieindeklas.nl/brandingfiles/headerAlgemeen600px.jpg" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";max-width: 100%;"></p>
<!-- Callout Panel -->
<p class="callout" style="margin: 0;padding: 15px;font-family: Arial, Verdana, "Times New Roman";margin-bottom: 15px;font-weight: normal;font-size: 14px;line-height: 1.6;background-color: #ECF8FF;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. <a href="#" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;font-weight: bold;">Do it Now! »</a>
</p><!-- /Callout Panel -->
<?php if (empty($posts)) { ?>
<p style="padding: 15px;margin: 0;font-family: Arial, Verdana, "Times New Roman";margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;">Here you can start to write your message. Be polite with your readers! Do not forget the subsject of this message.</p>
<?php } else { ?>
<table cellpadding="5" style="padding: 15px;margin: 0;font-family: Arial, Verdana, "Times New Roman";width: 100%;background: #FFF;border: solid 1px #d9d9d9;">
<?php foreach ($posts as $post) { setup_postdata($post); ?>
<tr style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<td style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";"><a href="<?php echo get_permalink(); ?>" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;"><img width="75" src="<?php echo newsletter_get_post_image($post->ID); ?>" alt="image" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";max-width: 100%;"></a></td>
<td valign="top" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<a href="<?php echo get_permalink(); ?>" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;"><h3 style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";line-height: 1.1;margin-bottom: 15px;color: #000;font-weight: 500;font-size: 27px;"><?php the_title(); ?></h3></a></td>
</tr>
<?php } ?>
</table>
<?php } ?>
<br style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<br style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
</td>
</tr>
<tr style="margin: 0 15px;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<td align="center" style="border-top: solid 1px #d9d9d9;padding: 5px 0;margin: 0;font-family: Arial, Verdana, "Times New Roman";">
<p style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;">
<a href="http://twitter.com/Topografie" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;">Twitter</a> |
<a href="https://www.facebook.com/TopografieindeKlas" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;">Facebook</a> |
<a href="{unsubscription_url}" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;">Geen nieuws e-mails meer ontvangen</a>
</p>
</td>
</tr>
</table>
</div>
</td>
<td style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";"></td>
</tr>
</table><!-- /BODY -->
</body>
</html>
Bin ich dies richtig zu interpretieren, dass Sie Responsive CSS inline setzen? Ihr Responsive-Code sollte in einer bildschirmgrößenabhängigen Medienabfrage in Ihrer Kopfzeile für E-Mails erscheinen. – samanthasquared
http://stackoverflow.com/a/23346010/1922144 – davidcondrey