Developers and enthusiasts!
Since I have a little experience with HTML I figured it would be fun to try to create an html email signature, and it was! Until I checked the result on Litmus. So many tiny flaws I can not figure out how to fix:
• personal information appears partly or completely under the logo in Outlook on PC, instead of next to the logo.
• social media icons not visible in Apple mail, only before sending.
• correct space between social media icons in browsers, iPad mail and iPhone mail but not in Outlook on PC (or when running the code on here).
Are these compatibility problems that can not be fixed? If they can, I need your help!
This is how the signature is supposed to look (the logo is an animation).
And this is the code:
<table border="0" cellpadding="0" cellspacing="0" width="800"><tbody><tr><td border="0" cellpadding="0" cellspacing="0"><p style="line-height: 11px; padding: 0px; font-family: Helvetica; font-size: 12px;"><a href="http://www.joramipsum.com" target="_blank"><img src="https://joramipsum.com/wp-content/uploads/2019/11/email_animatie-7.gif" width=116 border="0" style="float: left; padding: 0 15px 0 0;" alt="IPSUM logo" title="click for portfolio, testimonials and free consult!"> </a><a style="font-style: bold; color: #333333;"><strong>Joram Esveld</strong></a><br><a style="line-height: 18px; color: #017d85">branding specialist</a><br><br><a href="https://www.joramipsum.com/" onMouseOver="this.style.color='#017d85'" onMouseOut="this.style.color='#333333'" target="_blank"
style="text-decoration: none; color:#333333;">www.joramipsum.com</a><br><a href="tel:+31612345678" onMouseOver="this.style.color='#017d85'" onMouseOut="this.style.color='#333333'" target="_blank" style="line-height: 18px; text-decoration: none; color: #333333;">+316 12 34 56 78</a><br><br><a href="https://www.facebook.com/joramipsum" target="_blank"><img src="https://joramipsum.com/wp-content/uploads/2019/12/facebook.png" width=24 border="0" style="float: left; padding: 0 3 0 0;" alt="Facebook" title="Facebook"> </a><a href="https://www.instagram.com/joramipsum" target="_blank"><img src="https://joramipsum.com/wp-content/uploads/2019/12/instagram.png" width=24 border="0" style="float: left; padding: 0 3 0 0;" alt="Instagram" title="Instagram"> </a><a href="https://www.twitter.com/joramipsum" target="_blank"><img src="https://joramipsum.com/wp-content/uploads/2019/12/twitter.png" width=24 border="0" style="float: left; padding: 0 3 0 0;" alt="Twitter" title="Twitter"> </a><a href="https://www.linkedin.com/company/joramipsum" target="_blank"><img src="https://joramipsum.com/wp-content/uploads/2019/12/linkedin.png" width=24 border="0" style="float: left; padding: 0 3 0 0;" alt="LinkedIn" title="LinkedIn"> </a></p></td></tr></tbody></table>Let me know if you need more information. And if anyone has any branding related questions; feel free to ask thrue dm, or my website.
Kind regards, Joram