I am working on some newsletters for my company, and we are dealing with some problems with different email clients eg. gmail, online outlook, app outlook, mobile versions for these clients.
In each of them, text looks diffent. Also the problem is, that outlook app doesnt support <div> nor <p> correctly. So I had to convert it to table and spans.
Are there any suggestions, how to make the disgn by some code to look it identical in the most of email clients?
The current code looks like
<div style="background-color: white; margin-right: 9px; margin-left: 9px; padding-bottom:1px; margin-bottom:10px;">
<table style="background-color: white; border-color: black;padding-bottom:1px; margin-bottom:10px;">
<tbody>
<tr>
<td>
<h3 style="color: #000000; font-family: 'Open Sans', Verdana, Arial, sans-serif; font-size: 16px; font-style: normal; line-height: 24px; letter-spacing: normal; text-align: left; display: inline-block;"> Hello, </h3>
<br />
<span style="font-family: 'Open Sans', Verdana, Arial, sans-serif; font-size: 13px; line-height: 18px; font-style: normal; font-weight: normal; color: #787878;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla turpis magna<br /> cursus sit amet, suscipit a, interdum id, felis. Ut tempus purus at lorem. <br /> Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. <a href="https://blog.inpage.cz/obrazek/2/kitten-jpg/">here</a>.<br /> <br /> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</span>
</td>
</tr>
<tr>
<td><img style="text-align: left; width: 275px; height: 105px; margin: 10px; border-width: 0px; border-style: solid; float: left;" src="https://blog.inpage.cz/obrazek/2/kitten-jpg/" alt="CAD" /></td>
</tr>
<tr>
<td>
<h2 style="color: #f26503; font-family: 'Open Sans', Verdana, Arial, sans-serif; font-size: 24px; line-height: 36px; text-align: center;"><u>here, lorem</u></h2>
</td>
</tr>
</tbody>
</table>
</div>
<span style="line-height: 0.1; padding:1px; margin:10px;">
</span>email providers unfortunately do not support most elements in html and css. I know of solid documents that can help you on this subject. You can find the supported elements and css by browsing them and change your template accordingly.