simple - plantilla email html responsive
¿Hay un equivalente del ancho máximo de CSS que funciona en correos electrónicos HTML? (5)
Esta es la solución que funcionó para mí
https://gist.github.com/elidickinson/5525752#gistcomment-1649300 , gracias a @philipp-klinz
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->
<!-- PLACE CONTENT HERE -->
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
</table>
Intento crear un correo electrónico HTML que se muestre correctamente en todos los clientes de correo electrónico ampliamente utilizados. Estoy envolviendo todo el correo electrónico en una tabla, y me gustaría que tenga un ancho que es hasta el 98% del ancho disponible, pero no más de 800 píxeles. De esta manera: <table style="width:98%; max-width:800px;">
Pero no lo hago de esa manera, ya que según esta perspectiva 2007 no es compatible con la propiedad de ancho de CSS.
En cambio, estoy haciendo esto: <table width="98%">
¿Hay alguna forma de establecer también un ancho máximo sin depender de CSS?
Hay un truco que puede hacer para Outlook 2007 usando comentarios html condicionales.
El siguiente código se asegurará de que la tabla de Outlook tenga 800 px de ancho, no es de ancho máximo, pero funciona mejor que dejar que la tabla abarque toda la ventana.
<!--[if gte mso 9]>
<style>
#tableForOutlook {
width:800px;
}
</style>
<![endif]-->
<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
<table id="tableForOutlook"><tr><td>
<![endif]-->
<tr><td>
[Your Content Goes Here]
</td></tr>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
<table>
La respuesta corta: no.
La respuesta larga:
Los formatos fijos funcionan mejor para los correos electrónicos HTML. En mi experiencia, es mejor que pretendas que es 1999 cuando se trata de correos electrónicos HTML. Sea explícito y use atributos HTML (ancho = "650") siempre que sea posible en las definiciones de su tabla, no en CSS (style = "width: 650px"). Use anchos fijos, sin porcentajes. Un ancho de mesa de 650 píxeles de ancho es una apuesta segura. Use CSS en línea para establecer las propiedades del texto.
No se trata de lo que funciona en los "correos electrónicos HTML", sino de la gran cantidad de clientes de correo electrónico y su capacidad limitada (y en ocasiones deliberadamente, en el caso de Gmail, Hotmail, etc.) para procesar HTML.
Sí, hay una forma de emular max-width utilizando una tabla, lo que le brinda un diseño receptivo y amigable para Outlook. Además, esta solución no requiere comentarios condicionales.
Supongamos que quiere el equivalente de un div centrado con max-width de 350px . Usted crea una tabla, establece el ancho al 100% . La tabla tiene tres celdas en una fila. Establezca el ancho del centro TD a 350 (usando el atributo de width HTML, no CSS), y listo.
Si desea que su contenido se alinee a la izquierda en lugar de estar centrado, simplemente omita la primera celda vacía.
Ejemplo:
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="350">The width of this cell should be a maximum of
350 pixels, but shrink to widths less than 350 pixels.
</td>
<td></td>
</tr>
</table>
En jsfiddle le doy a la mesa un borde para que pueda ver lo que está pasando, pero obviamente no querría uno en la vida real:
Un poco tarde para la fiesta, pero esto lo hará. Dejé el ejemplo en 600, ya que eso es lo que la mayoría de la gente usará:
Similar al ejemplo de Shay, excepto que también incluye el ancho máximo para trabajar en el resto de los clientes que sí tienen soporte, así como un segundo método para evitar la expansión (consulta de medios) que se necesita para Outlook ''11.
En la cabeza:
<style type="text/css">
@media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
</style>
En el cuerpo:
<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>
main content here
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
Aquí hay otro ejemplo de esto en uso: ¿ Correo electrónico de confirmación de pedido receptivo para dispositivos móviles?