Форматирование электронных писем для оптимального оформления уведомлений

Question

Итак, у нас есть несколько электронных писем, на которые пользователи подписываются и получают их.Они представляют собой электронные письма в формате HTML и хорошо выглядят в (большинстве) почтовых клиентах.Но одна проблема заключается в том, что если вы получаете электронные письма на свой телефон, вы получаете всплывающее уведомление, и они выглядят немного дерьмово.Например, в верхней части электронного письма есть логотип компании, и на iOS появляется сообщение, что он будет содержать альтернативный текст «логотип компании» в уведомлении (по крайней мере, в Gmail это делается).

Другая проблема заключается в том, что в верхней части электронного письма находится ссылка для входа в систему, что важно, потому что мы хотим поощрять людей входить в систему, но это пустое место, когда оно появляется во всплывающем уведомлении на вашем телефоне.,Вы все равно не можете нажать на нее!

Существуют ли какие-либо теги, атрибуты или CSS, которые могут управлять тем, что будет или не будет отображаться в уведомлении на iOS и Android?Например, если у вас было что-то вроде:

<div>
    <img src="http://somedomain.com/mycompanylogo.png" alt="My Company"/>
</div>
<div>
    <a href="http://somedomain.com/login">Click here to login!</a>
</div>
<div>
   <h2>Important alert title</h2>
</div>
<div>
   <!-- some important headline text that would be useful in the notification -->
</div>
<div>
   <!-- some more detailed stuff which would be fine not appearing in the notification -->
</div>

Есть ли способ хотя бы намекнуть, что изображение alt и "Нажмите здесь, чтобы войти!"должно быть частью того, что появляется во всплывающем уведомлении, когда пользователь получает от нас электронное письмо?

Answer 1

Вы можете создавать классы и @media запросы, чтобы дать вам некоторые из этих способностей. концепция состоит в том, чтобы блокировать все, если это не соответствует вашему медиа-запросу.

<style>
.outlook, .ios, .mobile, {
  display: none !important;
}
.desktop {
  display: block !important;
}
@media only screen and (max-width: 414px) {
  .mobile {
    display: block !important;
  }
  .outlook, .ios, .desktop, {
    display: none !important;
  }
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .ios {
    display: block !important;
  }
  .outlook, .desktop, .mobile, .ipad {
    display: none !important;
  }
  .desktop {
    display: none !important;
  }
}
</style>
<!--[if mso]>
<style type="text/css">
.outlook {
  display: block !important;
  font-size; 16px;
}
.ios, .mobile {
  display: none !important;
}
.desktop {
  display: none !important;
}
</style>
<![endif]-->

Отсюда вы создаете сообщения с классами для отправки настраиваемого сообщения на каждое устройство.

<p class="desktop" style="display: none;">You're using a desktop device.</p>
<p class="mobile">You're using a mobile device.</p>
<p class="ios" style="display: none;">You're using an IOS device.</p>
<p class="outlook" style="display: none;">You're using Outlook.</p>

Когда получатель получает сообщение, он получает пользовательское сообщение.

Есть предостережения. После создания это сообщение будет отображать «Это настольное устройство» для iPad шире, чем 414 пикселей. Вы можете подстроиться, но мне лень настраивать. Он будет работать неуклюже с устройствами Android, так как они не используют запросы @media, и вы не можете ориентироваться на них, как на IOS или Outlook. Наконец, если вы используете Gmail на устройстве IOS, вам может потребоваться дальнейшая настройка.

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

JsFiddle: http://jsfiddle.net/wallyglenn/0mokhayq/

Удачи.

Answer 2

так что сначала вы заявите

Например, в верхней части электронного письма есть логотип компании, и на iOS оно будет отображаться как альтернативный текст «логотипа компании» в уведомлении (по крайней мере, в Gmail так и есть).

Чтобы это исправить, вам понадобится предварительный заголовок. Предварительный заголовок - это скрытая строка, которую вы помещаете в самый верх вашего HTML-тела. Это означает, что почтовый клиент прочитает это перед получением другого содержимого (например, вашего alt-тега на вашем логотипе).

<!--[if !mso]><!-->
<span style="display:none !important; visiblility:hidden; opacity:0px; color:transparent; height:0px; width:0px; mso-hide:all; max-height:0px; max-width:0px; line-height:0px; overflow:hidden;">Type your teaser content here.</span>
<!--<![endif]-->

В приведенном выше примере с предварительным заголовком вы можете увидеть много разных вещей. Сначала у нас есть фрагмент <!--[if !mso]><!-->. Это гарантирует, что все, что заключено между этим и оператором <!--<![endif]-->, не будет отображаться в клиенте Microsoft. Это сделано из-за ограниченной поддержки CSS в Outlooks.

Далее у нас есть span stag с различными элементами CSS, чтобы скрыть содержимое внутри него. Затем в тегах span содержится содержимое, которое вы хотели бы видеть в предварительном просмотре почтового клиента.

Для проблемы со связью входа в систему, появляющейся на мобильном телефоне - вам нужно будет использовать CSS Media запросы . Они могут определять ширину устройства, на котором будет просматриваться электронная почта, и вы можете соответственно применять стили. Вот пример, который я бы использовал, чтобы скрыть вашу ссылку для входа. Это не остановит клиентов, читающих ссылку, поэтому рекомендуется использовать предварительный заголовок.

<head>
   <style>
      @media screen and (max-width: 630px) { //Selecting devices less than 630px
          .hide_on_mobile {display: none !important;} //Hiding anything that has the hide_on_mobile class
      }
   </style>
</head>
<body>
...
  <div class="hide_on_mobile"><!--Added the hide on mobile class-->
     <a href="http://somedomain.com/login">Click here to login!</a>
  </div> 
...
</body>

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