Correo electrónico HTML en Outlook

Estoy haciendo una plantilla para el correo electrónico en html, funciona bien en Apple email clients, gmail, hotmail y Windows mail 2006. No funciona en Outlook, se estira, la familia de fonts no funciona y porque se extiende no se centra en la página.

Este es mi código;

      Untitled Document  body { margin: 0; padding: 0; width: 100% !important; overflow-y: hidden; background-color: #ffffff; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: Helvetica; vertical-align: top; border-spacing: 0px; } ul, ol, dl { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; padding-right: 0px; padding-left: 0px; } a img { border: none; } a:link { color: #42413C; text-decoration: underline; } a:visited { color: #6E6C64; text-decoration: underline; } a:hover, a:active, a:focus { text-decoration: none; } .container { width: 600px; background: #FFF; margin: 0 auto; } .content { padding: 0px; padding-left: 10px; border: none; background-color: #E9E9E9; line-height: 16px; font-size: 14px; width: 590px; } .footer { padding: 0px 0; background: #000000; text-align: center; color: white; font-size: 12px; margin-bottom: 10px; height: 45px; width: 600px; } .actie { background-color: #69696D; } .icons { font-size: 12px; } .contact { text-align: center; } .table { border-spacing: 0px; } .contact a { color: white; } .devices { background-color: #2f2f31; height: 253px; border: 0; } .header { background-color: #2f2f31; height: 87px; border: 0; } p { font-color: black; }   

Werkt u al met apps?

Het gebruik van applicaties, oftewel apps, is namelijk booming! Steeds meer merken en bedrijven zien het gemk van een app in. Het is de ideale optie voor het versterken van uw merk, zowel extern als intern, of het opzetten van een geheel nieuw product. Ook de enorme groei in gebruik van mobiele apparaten zorgt er voor dat een sterk merk niet meer kan achter blijven.

Mocht u geïnteresseerd zijn in onze service, van op maat gemakte applicaties en backend oplossingen, neem dan gerust contact met ons op. U bent van harte welkom voor een kop koffie bij ons in de Suikersilo's, tijdens een verkennend gesprek of een demonstratie van de mogelijkheden van apps voor mobiel, tablets, tv en het web.

Alvast bedankt en hopelijk tot ziens.

No matter what device.
We build natively.

Apple iOS is the operating
system that powers the
iPhone, iPad and iPod touch.
With partners like Google,
HTC and Motorola, Android is
the fastest growing mobile OS.
Together Microsoft and Nokia
support conventional users
with Windows Phone.
Looking for other platforms
like BlackBerry, Samsung
Bada or HTML5 & CSS3?
We can build it!

¿Alguien puede ayudarme a arreglar esto para la perspectiva? ¿He usado algún elemento que no sea compatible con Outlook? ¿Necesito más css en línea?

Sugeriría echar un vistazo a http://www.emailology.org . Lo encontré muy útil al crear correos electrónicos para Outlook. Como regla para los correos electrónicos HTML, los construyo puramente en tablas y con estilos en los elementos. Es horrible y como construir sitios web malos hace años, pero desafortunadamente parece ser la mejor solución disponible.

Por ejemplo, cambiaría

a

y así sucesivamente. Constrúyelo y péguelo como lo haría normalmente, pero cuando esté lo suficientemente satisfecho como para probarlo, copie todos los estilos en línea.

Sin embargo, eche un vistazo a Emailology. Es un gran recurso.

Este sitio ofrece una buena visión general de la tabla (descarga de PDF posible) de la cual los atributos de CSS funcionarán con qué clientes de correo electrónico, qué selectores CSS son compatibles y dónde definir su estilo CSS (etiqueta de estilo vs. estilo de cabeza vs. en línea):

http://www.campaignmonitor.com/css/

Esta publicación proporciona fonts adicionales: https://stackoverflow.com/a/1019166/1143126

hay una gran cantidad de guías que te ayudarán con esto, ya que las perspectivas son realmente escamosas con HTML, por ejemplo, es compatible con dosificadores que estás usando.