¿Existe un equivalente de CSS de ancho máximo que funcione en correos electrónicos HTML?


114

Estoy intentando crear un correo electrónico HTML que se muestre correctamente en todos los clientes de correo electrónico más utilizados. Estoy envolviendo todo el correo electrónico en una tabla, y me gustaría que tuviera un ancho de hasta el 98% del ancho disponible, pero no mayor de 800 píxeles. Me gusta esto: <table style="width:98%; max-width:800px;">

Pero no lo estoy haciendo de esa manera, ya que según este Outlook 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?


1
He actualizado la respuesta aceptada a la de @MarkNugent ya que parece haber atraído un consenso, incluso si llegó 4 años demasiado tarde para ser útil para mí. :)
Tim Goodman

Respuestas:


224

Sí, hay una forma de emular el max-widthuso de una tabla, lo que le brinda un diseño receptivo y compatible con Outlook. Además, esta solución no requiere comentarios condicionales.

Suponga que quiere el equivalente de un centrado divcon max-widthde 350px. Creas una tabla, estableces el ancho en 100%. La tabla tiene tres celdas seguidas. Establezca el ancho del centro TDen 350(usando el widthatributo HTML , no CSS) y listo.

Si desea que su contenido esté alineado a la izquierda en lugar de 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 el jsfiddle le doy a la tabla un borde para que pueda ver lo que está pasando, pero obviamente no querría uno en la vida real:

http://jsfiddle.net/YcwM7/


18
Esta es la mejor respuesta aquí para todos ^^^. Ignore la respuesta aceptada y la respuesta condicional.
Nick Manning

4
Solo para ahorrarle tiempo a alguien más, es necesario al menos uno de esos elementos <td> vacíos, o de lo contrario el <td> con el contenido se extenderá para llenar todo el <tr>. Pero esta es definitivamente la mejor solución de las que se ofrecen.
Chris Strickland

2
@Phyllis Sutherland Puede intentar eliminar el tamaño de img en línea y reemplazarlo por:style="max-width: 100%; height: auto; width: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;"
morespace54

5
¡Tenga cuidado de no agregar unidades al ancho interior como lo hice yo o de lo contrario no funcionará! es decir, no hagas width = "350px"
magritte

3
@PhyllisSutherland encontró una solución para las imágenes: <img src="file.jpg" "width="350" alt="" style="display:block;width:100%" /> litmus.com/community/discussions/…
cbron

34

Hay un truco que puede hacer para Outlook 2007 utilizando comentarios html condicionales.
El código a continuación 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 se extienda por 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>

6
excelente sugerencia, pero como es un selector de identificación y no una clase, ahorraría algo de escritura usando el atributo de ancho en el elemento de la tabla
Steve Wasiura

Esto es genial. Excepto por un problema, al establecer el ancho, Outlook no permitirá que el correo electrónico se reduzca más pequeño que las dimensiones dadas. Al no establecer el ancho, el correo electrónico se expandirá a toda la pantalla. Elija su veneno :)
The Coordinator

13

La respuesta corta: no.

La respuesta larga:

Los formatos fijos funcionan mejor para los correos electrónicos HTML. En mi experiencia, es mejor fingir 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 CSS (estilo = "ancho: 650 px"). Utilice anchos fijos, sin porcentajes. Una mesa de 650 píxeles de ancho es una apuesta segura. Utilice 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 plétora de clientes de correo electrónico y su capacidad limitada (y a veces deliberadamente en el caso de Gmail, Hotmail, etc.) para representar HTML.


Sí, eso es lo que esperaba, pero pensé que lo preguntaría.
Tim Goodman

35
Establecer un ancho fijo de 650 hará que sus correos electrónicos se vean terribles en los clientes de correo electrónico móviles.
DrewB

6
-1: Parece terrible porque los dispositivos móviles tienen dimensiones relativamente pequeñas en el mundo real. Esto significa que sin el zoom ni la panorámica, el texto de sus diseños será increíblemente pequeño. Eche un vistazo a la guía de Campaign Monitor Diseño de correo electrónico receptivo .
Karl Horky

1
-1 también porque acabo de lidiar con esto en clientes móviles y tener un ancho fijo era exactamente mi problema.
Brian FitzGerald

7
Es el año 2015. Los dispositivos móviles están en todas partes. ¿Estás diciendo que te olvides de los dispositivos móviles por la estúpida perspectiva? Yo digo, olvídate de las perspectivas. Y cualquier otro producto de mierda de Microsoft.
refaelio

5

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 esto 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: ¿ Correos electrónicos de confirmación de pedido receptivos para dispositivos móviles?


0

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">&nbsp;</td></tr>
     <tr>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
        <td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->

             <!-- PLACE CONTENT HERE -->

        </td>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
    </tr>
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
</table>

¿Podría proporcionar un ejemplo más conciso, hay muchas cosas allí que no son necesarias para resolver la pregunta?
EdL

@EdL la idea es que sea la forma más concisa de ser compatible con el correo electrónico max-width. Todo esto reemplazaría <div style="max-width: ...px">...</div>. Para el correo electrónico en el que estaba trabajando cuando encontré esta esencia, esta fue la única solución que hizo que las cosas se vieran bien en Outlook 2010, 2013 y 2016.
henry

@henry Me refería más a todos los atributos de tamaño de fuente de relleno de celda, etc. Las imágenes son complicadas porque, a menos que especifique width = "500" como atributo, donde 500 es el ancho en píxeles, la perspectiva hará que las imágenes sean de tamaño completo ( wrt. el archivo de imagen) esto generalmente da como resultado anchos fijos.
EdL

Dejo esto como está porque no es mi código —sólo lo estoy citando de la esencia— pero lo he convertido en una wiki comunitaria. Creo que es necesario especificar explícitamente 0px paddings y margins, así como 0 cellpaddingy cellspacing. Es posible que la especificación line-heightfuncione como un sustituto de font-sizecompletar los tiempos heightno se respetan (me gustaría probarlo en todos trlos correos electrónicos y luego en todos tdlos correos electrónicos para ver exactamente dónde se necesita). @EdL, si puede hacer que una solución más liviana funcione tan bien como esta, sería increíble, publíquela aquí y en esa esencia vinculada
henry
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.