I made a design of an email, they look good in gmail and outlook web, I did it with divs and online styles, do you know if it's time to place something special? or inspect that mail by the microsoft outlook software?, I use phpmailer to send mail .
I show the code of how I made the mail design:
<?php $route = 'url'; ?>
<body>
<div style="background: #a0d3d7;max-width: 650px;margin:0 auto;">
<div style="margin: 40px 0 0 0;">
<div style="float: right; width: 171px; margin: 33px 36px 0 0;">
<img src="'.$route.'images/mailin/logo.png" alt="logo" style="width: 100%;" />
</div><!-- logo -->
</div><!-- div logo -->
<div style="position: relative;top: -42px;">
<div style="width: 588px; margin: 0 auto;">
<img src="'.$route.'images/mailin/titulo-cum.png" alt="titulo" style="width: 100%;" />
</div><!-- imagen titulo -->
</div><!-- div titulo -->
<div style="color:#002f86;margin-top: -77px;">
<h1 style="text-transform: uppercase;letter-spacing: 0px;text-align: center;">'.$usuario.'</h1>
<p style="margin: 5px auto 0 auto;line-height: 27px;position: relative;font-size: 21px;top: -14px;text-align: center;width: 90%;">
Te deseamos un año lleno de felicidad y nuevas experiencias.
Por eso tenemos un regalo para ti en <b>Experiencias Allianz</b>,
porque no necesitas esperar 364 días para disfrutar
de momentos especiales. <br>
<b>Codigo: </b>'.$codigo.'
</p>
</div><!-- div texto -->
<div style="margin: 16px 0 0 0;">
<a href="'.$route.'" target="_blank">
<div style="width: 183px; margin: 0 auto;">
<img src="'.$route.'images/mailin/boton.png" alt="boton" style="width: 100%;" />
</div><!-- imagen boton -->
</a>
</div><!-- div botton -->
<div style="margin: 0;">
<div style="width: 100%; margin: 0 auto;">
<img src="'.$route.'images/mailin/imagen.jpg" alt="cumpleaños" style="width: 100%;" />
</div><!-- umpleaños -->
</div><!-- div cumpleaños -->
<div style="margin: -4px 0 0 0;">
<div style="width: 100%; margin: 0 auto;">
<img src="'.$route.'images/mailin/footer.png" alt="footer" style="width: 100%;display: block;" />
</div><!-- footer -->
</div><!-- div footer -->
<!--div style="margin: 0;">
<div style="width: 100%; margin: 0 auto;">
<img src="'.$route.'images/mailin/imagen-footer.jpg" alt="footer" style="width: 100%;" />
</div>
</div>< div footer -->
</div><!-- section -->
</body>
gmail image
outlook web image
image microsoft outlook
When you make code for mass mailing, use "ancient code", that is, all in-line styles, as handcrafted as possible.
In the following link you will find reference to compatible HTML: https://templates.mailchimp.com/resources/email-client-css-support/
If you are looking for a CSS framework to do this better: http://zurb.com/playground/responsive-email-templates where it shows you a compatibility table.
As fredyfx tells you, take a look at those links, they are very interesting. There will always be a bit of variation between gmail, outlook, thunderbird... etc etc, but hey, the more "standard" you go, the better.
Look at the size of the images, you have it in width: 100%, change it to the size of the image because it seems that outlook does not take the size of the div. Also define the font and size to prevent it from jumping in outlook, for example:
This is a personal matter but mailings with tables give much less problems... unfortunately many users still go with obsolete email clients... Greetings!