¿Debo utilizar imágenes espaciadoras al codificar correos electrónicos HTML?

Question

Entiendo que los correos electrónicos HTML necesitan diseños realmente antiguos: según muchas otras respuestas en SO (por ejemplo, HTML email: tables or divs?, HTML Email using CSS).

Sin embargo, parece haber cierto debate sobre si todavía es una buena idea usar los gifs de spacer en el correo electrónico.

Por ejemplo, comparar estos tres diseños:

dimensiones:

<table cellpadding="0" cellspacing="0" border="0" width="100"> 
    <tr> 
    <td width="100" height="10"></td> 
    </tr> 
</table> 

CON GIF ESPACIADOR:

<table cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
    <td><img src="spacer.gif" width="100" height="10"></td> 
    </tr> 
</table> 

CON GIF espaciador y dimensiones:

<table cellpadding="0" cellspacing="0" border="0" width="100"> 
    <tr> 
    <td width="100" height="10"><img src="spacer.gif" width="100" height="10"></td> 
    </tr> 
</table> 

Cómo ¿Yo? se les con las dimensiones? ¿Hay algún cliente de correo electrónico que todavía requiera gifs espaciadores? ¿Hay algún daño hecho de cualquier manera?

Answer 1

Personalmente, nunca utilizar GIF espaciadores, porque destruyen la disposición de bloqueo cuando la imagen se apaga, por tres razones:

1. Si ellos no hacen en absoluto, cualquier diseño que requiere la imagen de espaciador está perdido.
2. Si se procesan incorrectamente (por ejemplo, volviendo a su tamaño original o proporcionalmente a su tamaño original) rompen el diseño.
3. Incluso si se procesan correctamente y el diseño funciona, todos los marcadores de posición de imagen que se muestran cuando se activa el bloqueo de imagen distraen del mensaje de correo electrónico.

Para evitar el problema # 2, puede guardar cada imagen con sus dimensiones reales. Sin embargo, esto obviamente aumenta:

• Tiempo para construir
• Número de imágenes para ser descargados por el cliente

y no resuelve los problemas # 1 y # 3.

La razón para usar gifs espaciadores es porque algunos clientes (Outlook 2007, Outlook 2010, Lotus Notes, Hotmail/Live Mail) no representarán una celda vacía. Es muy difícil tener una precisión absoluta sobre las dimensiones de un nodo de texto, por lo que basta una imagen de espaciador. Sin embargo, incluso aquellos clientes mencionados representarán una celda vacía que tiene un ancho definido.

Así que mientras definas anchuras de píxeles en cualquier celda vacía, estás bien.Para volver a los ejemplos en la pregunta:

• dimensiones de sólo - funciona con y sin imagen de bloqueo en todos los clientes de correo electrónico
• Imágenes de espaciador sólo - sólo funciona cuando la imagen-bloqueo está desactivado
• Las dimensiones y las imágenes de espaciador - sólo funciona cuando la imagen-bloqueo está desactivado

Debido a esto, usted debe utilizar dimensiones y no espaciadores gIF.

Diversos artículos hablan sobre esta cuestión, así (búsqueda de 'espaciadores imágenes' en las páginas)

• http://www.banane.com/workblog/?p=61
• http://www.campaignmonitor.com/design-guidelines/

Answer 2

Definitivamente, usted puede evitar el uso de espaciadores GIF.

Me parece que el siguiente código funciona en todos los clientes. En general, o bien especifico el ancho o la altura de estas celdas vacías. Este ejemplo específico es lo que utilizo para crear espacio vertical:

<tr> 
<td style="line-height: 0; font-size: 0;" height="10">&nbsp;</td> 
</tr> 

Answer 3

Nota: Perspectivas 2007/2010 trata celdas vacías como espacios. Y les aplica atributos predeterminados de texto y color de fondo. (por lo tanto, si a su usuario le gustan los fondos morados, las celdas sin color salen con un fondo morado).

Para compensar este formato su célula del separador vacío de esta manera:

<td width=(a percentage or a pixel width) height=(optional unless needed) bgcolor="#FFFFFF(always use 6 digit hex!)" style="font-size:1px; line-height:1px;")>&nbsp;</td> 

Answer 4

Si mantiene sus células superior a 19px (la altura mínima predeterminadas de Outlook), que no será necesario utilizar la línea de altura, y una simple <td height="20">&nbsp;</td> funciona muy bien. Ejemplo:

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"> 
    <tr> 
    <td align="center"> 
     top 
    </td> 
    <tr> 
    </tr> 
    <td height="20"> 
     &nbsp; 
    </td> 
    <tr> 
    </tr> 
    <td align="center"> 
     bottom 
    </td> 
    </tr> 
</table> 

Pero, para el espaciamiento vertical, en la mayoría de los casos es probable que pueda evitar hacer eso y agregar relleno en la fila superior o inferior a:

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"> 
    <tr> 
    <td align="center"> 
     top 
    </td> 
    <tr> 
    </tr> 
    <td align="center" style="padding-top:20px;"> 
     bottom 
    </td> 
    </tr> 
</table> 

o como esta, sin relleno:

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"> 
    <tr> 
    <td align="center"> 
     top 
    </td> 
    <tr> 
    </tr> 
    <td align="center"> 
     &nbsp;<br> 
     bottom 
    </td> 
    </tr> 
</table> 

Nota sobre el último ejemplo que usé &nbsp;<br> en lugar de solo <br>. Esto se debe a que Outlook colapsará cualquier línea o celda que no contenga contenido. Esa es la misma razón por la que el ejemplo original también tiene un   en la celda espaciadora. Si se va a añadir varias filas o relleno debajo, se vería así:

<td align="center"> 
    &nbsp;<br> 
    &nbsp;<br> 
    &nbsp;<br> 
    bottom 
    <br>&nbsp; 
    <br>&nbsp; 
    <br>&nbsp; 
</td> 

Hay un par de beneficios de las dos opciones sin la célula del separador. Primero es que es más rápido y contiene menos código. El segundo es que rinde de manera más consistente cuando alguien reenvía su correo electrónico desde Outlook. El fabuloso motor MS Word de Outlook lo envuelve todo en las etiquetas <p>, que añaden una brecha inevitable entre las filas. Tener una fila menos mantendrá su correo electrónico más cerca de su diseño original.