У меня есть HTML-баннер, который применяется к электронным письмам, которые приходят в нашу среду от внешнего отправителя. После тестирования выяснилось, что баннер блокирует возможность предварительного просмотра полученного письма на мобильном устройстве. У меня нулевые знания HTML или CSS. То, что у меня есть, это то, что я собираю по кусочкам здесь и там. В текущих статьях, которые я читаю, мне предлагается использовать следующий код:

<style type="text/css">
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){  .mobileHide { display: none;}}
</style>

Я изменил свой HTML на это:

<html><head><style type="text/css">
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){  .mobileHide { display: none;}}
</style></head><body><div class="mobileHide"><table style="border: 1px 
solid black;border-collapse: collapse">
<tbody>
<tr bgcolor="#ffac59">
<td>
<small>CAUTION: This is a test.</small>
</td>
</tr>

</tbody></table><h1></h1>
<br />
<mc type="body">

</div></body></html>

Может кто-то указать, что я делаю не так?

1
Tar Heel 25 Сен 2018 в 23:51

2 ответа

Лучший ответ

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

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

С сайта litmus.com:

Текст для предварительного просмотра извлекается из первых нескольких строк текста в электронном письме.

Итак, происходит то, что почтовый клиент читает первые несколько строк вашего письма, чтобы определить, что показывать в качестве текста предварительного просмотра, но, поскольку ваш заголовок является первым, текст предварительного просмотра электронного письма представляет собой тарабарщину из раздела заголовка, а не маркетинговую речь. что вы хотите, чтобы это было. Насколько я могу судить, на анализ предварительного просмотра электронной почты не влияют стили CSS, такие как display: none, хотя я могу ошибаться в этом.

Litmus рекомендует вам добавить дополнительный скрытый элемент перед заголовком электронного письма (сразу после открывающего тега body), который содержит текст предварительного просмотра, который вы хотите отобразить в почтовом клиенте. Вы захотите использовать этот код:

<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
  Insert preview text here.            
</div>

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

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

Является ли это спамом или вводящим в заблуждение поведением? Это повредит вашей доставляемости? Litmus говорит, что по их опыту это нормально:

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

1
Maximillian Laumeister 25 Сен 2018 в 22:02

Я вижу опечатку в атрибуте стиля:

<div class="”mobileHide”">

... имеет две двойные кавычки. Должно получиться так:

<div class="mobileHide">
2
Maximillian Laumeister 25 Сен 2018 в 21:03