Как сделать так, чтобы Outlook был подписью электронной почты? - PullRequest
Новая
       10

Как сделать так, чтобы Outlook был подписью электронной почты?

0 голосов
/ 07 января 2019

Я устанавливаю новую подпись электронной почты для моего клиента, которая должна быть отзывчивой.

Я опробовал один макет, который включает в себя div, таблицы и т. Д., Который хорошо работает на настольных компьютерах, но не на мобильных устройствах.

Ниже приведен один из таких примеров, но электронная почта выглядит так же, как и на настольном компьютере, и на мобильных устройствах, причем ячейки / элементы div смещаются одна под другой.

В рамках своего исследования я попытался использовать этот шаблон электронной почты, который закончился таким же образом. - https://github.com/seanpowell/Email-Boilerplate

<!--[if gte mso 9]>
    <table cellspacing=0><tr><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
    <strong>Administrator</strong><br>Phone {qwfqwfcqwdqwfqfgqwfqwbfjqnwjkfqnwjfbqiwnf qwnfiquwnqwnfiqnwifjnqwfinqwifnqwjinfqjiwnfijqwnf}<br>Email <a href="mailto:{E-mail}" style="color: #fff; text-decoration: none;">{qwfqwfqwcqwfqwfqwfdqwcrqwrqwcrqwrqwrcqwrxqwrqwcxqrwqxrqwxqwx}</a>
</div>
<!--[if gte mso 9]>
    </td><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
    <strong>qwfqwfqwdqw fqwfqwfqwdfqwdqwfqwfqwdqwdqwdqw</strong> ​
</div>
<!--[if gte mso 9]>    
</td></tr></table>
    <![endif]-->

https://jsfiddle.net/623y57p1/1/

Взгляните на демонстрацию, которую я сделал. Это отзывчиво в браузерах, но не в перспективе.

1 Ответ

0 голосов
/ 07 января 2019

Я создал пример кода, который работает с Outlook. Два столбца этого нижнего колонтитула электронной почты будут отображаться рядом, если окно просмотра шире, чем 580 пикселей. Если он опустится ниже этой ширины, он вернется к двум сложенным столбцам. Вы можете установить точку останова ширины, настроив <td width="290">. 

<table align="center" role="contentinfo" cellspacing="0" cellpadding="0" border="1" width="100%" style="margin: 0 auto;">
  <tr>
    <td width="290" style="direction: ltr !important; display: inline-block;">
      Column A
    </td>
    <td width="290" style="direction: ltr !important; display: inline-block;">
      Column B
    </td>
  </tr>
</table>

Пожалуйста, имейте в виду несколько предостережений:

  • Outlook 2007-2019 не поддерживает адаптивную электронную почту. @media запросов не поддерживается.

  • Ширина для table должна быть установлена ​​на <table width="100%">.

  • Ширина ячеек таблицы равна 290, поскольку максимальная ширина окна просмотра Outlook составляет 580 пикселей.

  • Вы можете отключить <table border="1"> Он включен в демонстрационных целях.

  • <table role="contentinfo"> поддерживает программы чтения с экрана. Пожалуйста, оставьте это, чтобы помочь слабовидящим пользователям узнать о структуре вашего электронного письма.

  • https://jsfiddle.net/wallyglenn/w0s4xmc0/60529/

Удачи.

...