Проблемы с HTML-подписью электронной почты

Разработчики и энтузиасты!

Поскольку у меня есть небольшой опыт работы с 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>

Дайте мне знать, если вам нужна дополнительная информация. И если у кого-то есть вопросы, связанные с брендингом; не стесняйтесь спрашивать через дм, или мой сайт.

С уважением, Джорам


person IPSUM    schedule 31.12.2019    source источник
comment
Это как должен выглядеть ваш HTML-код. Используйте таблицы для столбцов, держитесь подальше от форм и JavaScript. И то, и другое может привести к тому, что ваша электронная почта попадет в папку со спамом.   -  person Syfer    schedule 01.01.2020


Ответы (1)


JavaScript не будет работать в почтовом клиенте.

Outlook игнорирует padding на изображениях.

float в основном не работает с Outlook.

Лучшим подходом было бы разделить подпись на два отдельных столбца, используя td.

Для получения дополнительной информации о том, что работает с электронной почтой, попробуйте этот удобный источник:

https://www.campaignmonitor.com/css/

Удачи.

person gwally    schedule 31.12.2019
comment
Спасибо, Гуолли. Я удалил javascript и использовал код, добавленный u/Syfer, чтобы исправить проблемы padding и float. Немного схитрили с заполнением значков социальных сетей, предоставив изображениям немного прозрачного пространства сбоку, но это работает достаточно хорошо. - person IPSUM; 02.01.2020