style - Correo electrónico html receptivo: outlook
css style mail (2)
He creado una plantilla de correo electrónico html que se supone que responde. Se muestra perfecto en diferentes clientes de correo electrónico y dispositivos móviles. Pero en Outlook se estira al 100%, lo cual no es nada agradable, ya que el encabezado es de 600 píxeles de ancho.
Sé que Outlook no admite la propiedad de max-width . Pero usar solo el width hace que el navegador móvil lo muestre mal.
Entonces mi pregunta es: ¿qué debo hacer / cambiar a la plantilla para que sea receptiva y se muestre con un ancho máximo de 600px?
Aquí está el código. Primero con css adicional (debería ser mejor leer), segundo con css en línea (que se debe usar cuando se envía por correo electrónico). Usé http://beaker.mailchimp.com/inline-css para representarlo en línea.
<!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>
CSS en línea:
<!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>
Intente envolver su plantilla en una tabla cuyo width esté configurado en 100%, con tres celdas ( TD s) dispuestas horizontalmente, con la celda central configurada como width="600" (estableciendo anchos utilizando atributos HTML, no CSS). Las dos celdas de cada lado se dejan vacías sin ningún ancho de información. Esta es la forma html-only de obtener el comportamiento de max-width .
Ejemplo: http://jsfiddle.net/YcwM7/
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="350">This cell should be a maximum width of
350 pixels, but shrink to widths less than 350 pixels.
</td>
<td></td>
</tr>
</table>
Ha habido varias preguntas sobre esto, y el consenso general para el mejor resultado entre clientes es restringirse a HTML2 sin depender realmente de CSS cuando se trata de estilo de correo electrónico. Los enlaces a continuación son todas las preguntas SO del pasado respondidas:
¿Hay un equivalente del ancho máximo de CSS que funciona en correos electrónicos HTML?
CSS Styling no funcionará en Outlook 2010?
Sin embargo , Outlook tiene su propia declaración condicional, por lo que podría crear un conjunto separado de reglas de diseño para Outlook: