texto template simple plantilla para mensaje llegan formato example electronico correos correo codigo cambiar html css outlook

template - plantilla email html responsive



Formato de correo html para Outlook (3)

Tengo un boletín html que funciona en la mayoría de los clientes de correo electrónico, pero el formato está desordenado en 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 muestre correctamente en Outlook?

Definitivamente, deberías revisar el MSDN sobre lo que Outlook admitirá con respecto a 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 necesita actualizar, ya que existen grandes diferencias entre 2007 y las ediciones anteriores. También intente guardar el correo electrónico resultante en un archivo y examinarlo con Firefox; verá lo que Outlook está cambiando y posiblemente tendrá una pregunta más específica que formular. 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 se están / no están aplicando).

Para poder brindarle ayuda específica , tiene que explicar qué partes en particular se "ensucian" o quizás ofrecer una captura de pantalla. También es útil saber en qué versión de Outlook se encuentra el problema.

De cualquier manera, la guía CSS de CampaignMonitor.com a menudo me ha ayudado a depurar las inconsistencias del cliente de correo electrónico.

Desde esa guía, puedes ver varias cosas que simplemente no funcionan bien o en absoluto en Outlook , aquí hay algunos puntos destacados de los más importantes:

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

En resumen: combinar CSS y Outlook puede ser un dolor . Esté preparado para utilizar muchas soluciones feas.

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