Разработчики и энтузиасты!
Поскольку у меня есть небольшой опыт работы с HTML, я подумал, что было бы интересно попробовать создать подпись электронной почты в формате html, и это было так! Пока не проверил результат на Лакмусе. Так много мелких недостатков, что я не могу понять, как исправить:
• личная информация частично или полностью отображается под логотипом в Outlook на ПК, а не рядом с логотипом.
• значки социальных сетей не видны в почте Apple, только перед отправкой.
• правильное расстояние между значками социальных сетей в браузерах, почте iPad и iPhone, но не в Outlook на ПК (или при запуске кода здесь).
Это проблемы совместимости, которые нельзя исправить? Если они могут, мне нужна ваша помощь!
Вот как должна выглядеть подпись (логотип представляет собой анимацию).
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>
Дайте мне знать, если вам нужна дополнительная информация. И если у кого-то есть вопросы, связанные с брендингом; не стесняйтесь спрашивать через дм, или мой сайт.
С уважением, Джорам