1. Inicio
  2. Pregunta y respuesta
  3. Cómo formatear el correo electrónico html para Outlook

Cómo formatear el correo electrónico html para Outlook

2011-05-02 16 views
25

Tengo un boletín html que funciona en la mayoría de los clientes de correo electrónico, pero el formato está mal en Outlook.Cómo formatear el correo electrónico html para Outlook

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<style type="text/css"> 
    body { 
    background-color: #98AFC7; 
    } 
</style> 
<title></title> 
</head> 
<body> 
<table border="1px solid" cellspacing="0" cellpadding="10px" width="600" style="margin-left: auto; margin-right: auto; height:auto; background-color: #ffffff; margin-top: 60px;"> 
    <tr> 
     <td align="top" style="padding: 10px; font-family: arial; font-size: 12px;" ><center>Email not displaying correctly?<a href="#"><strong> View it in your browser</strong></a></center></td> 
    </tr> 
    <tr> 
     <td style="border: 1px solid; height: 80px; text-align: center; padding: 10px;"><img src="http://demo.frostmiller.com/email/img/banner.jpg" alt="Banner will go here" align="middle" style="border: 1px solid;"></td> 
    </tr> 
    <tr> 
     <td> 
      <table style="border: 0; cellspacing: 0; cellpadding: 10px; height: auto;"> 
       <tr> 
        <td valign="baseline" style="padding: 10px; width:400px; border: 1px solid; halign: top;"> 
        <h3>Top Stories</h3> 
         <ul> 
          <li>Topic 1</li> 
          <li>Topic 2</li> 
          <li>Topic 3</li> 
         </ul> 
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
        </td> 
        <td valign="baseline" style="padding: 10px; border: 1px solid;"> 
         <h3>Latest News</h3> 
         <p> 
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, 
         </p> 
        </td> 
       </tr> 
      </table>     
     </td> 
    </tr> 
    <tr> 
     <td cellpadding="10px" style="border: 1px solid; cellspacing: 0; width: 100%; height: auto; text-align: center;"> 
      <strong>Copyright &copy 2011 Frost Miller Group </strong> 
     </td> 
    </tr> 
    <tr> 
     <td style="border: 1px solid; cellspacing: 0; cellpadding: 10px; width: 100%; height: auto"> 
      <center> 
      <a href="#">Contact Us</a> 
      &nbsp; 
      <a href="#">Terms of Use</a> 
      &nbsp; 
      <a href="#">Trademarks</a> 
      &nbsp; 
      <a href="#">Privacy Statement</a> 
      &nbsp; 
      <a href="#">Site Feedback</a> 
      </center> 
     </td> 
    </tr> 
    </table> 
</body> 
</html>

¿Qué cambios debo hacer para que se muestren correctamente en Outlook?

Fuente

2011-05-02 user544079

Respuesta

36

Para ser capaz de darle específica ayuda, usted tiene que explicar de qué partes particular, específicamente "llegar en mal estado", o tal vez ofrecer una captura de pantalla. También ayuda saber en qué versión de Outlook se encuentra el problema.

De cualquier manera, CampaignMonitor.com's CSS guide me ha ayudado a menudo a eliminar las incoherencias del cliente de correo electrónico.

A partir de ese guía se puede ver varias cosas simplemente no funcionan bien o del todo en Outlook, aquí están algunos ejemplos de los más importantes:

  • Varios tipos de selectores más sofisticados , p.ej E:first-child, E:hover, E > F (combinador de niños), E + F (combinador de hermanos adyacentes), E ~ F (combinador de hermanos general). Desafortunadamente, esto significa recurrir a soluciones alternativas como estilos en línea.
  • Algunas propiedades de fuente, p. Ej. white-space no funcionará.
  • La propiedad background-image no funciona.
  • Existen varias cuestiones con las propiedades del Modelo de caja, lo más importante es height, width, y las versiones max- no son utilizables o tienen errores para ciertos elementos.
  • Problemas de posicionamiento y visualización (por ejemplo, display, float sy position son todos).

En resumen: combinar, CSS y Outlook puede ser un dolor. Prepárate para usar muchas soluciones feas.

PS. En su caso específico, hay dos problemas menores en su html que pueden causarle un comportamiento extraño. Hay "align=top" donde probablemente quiso utilizar vertical-align. También: cell-padding para td s no existe.

Fuente

2011-05-02 20:01:19 Jeroen

+0

Muchos años después, Microsoft Outlook 2013 todavía tiene el mismo motor de renderizado HTML como Outlook 2007. :( – Zarepheth

+1

@Zarepheth Sí, me gustaría volver a mi propia respuesta también cada 6 a 18 meses, a veces incluso me tierra aquí en Google. – Jeroen

+9

Una adición útil que encontré: para probar realmente cómo se procesa un correo HTML en Outlook, puede abrir el archivo HTML en Word, ambas aplicaciones de MS Office usan el mismo motor de representación. – Paul

11

Debería consultar MSDN en lo que Outlook admite en relación con css y html. El enlace está aquí: http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx. Si no tiene al menos office 2007, realmente debe actualizar ya que existen grandes diferencias entre las ediciones 2007 y anteriores. También intenta guardar el correo electrónico resultante en un archivo y examinarlo con Firefox. Verás qué está cambiando por Outlook y posiblemente tengas una pregunta más específica. También puede usar Word para ver el correo electrónico como una especie de vista previa (pero no obtendrá información sobre qué estilos están/no están siendo aplicados.

Fuente

2011-05-02 20:15:41 scrappedcola

+2

Guardar como HTML y luego examinarlo en un navegador es una gran recomendación (y simplemente me ayudó enormemente) - gracias – hobailey

Cuestiones relacionadas

 Cuestiones relacionadas