Скрыть HTML-баннер из предварительного просмотра электронной почты на мобильном устройстве - PullRequest
Новая
       7

Скрыть HTML-баннер из предварительного просмотра электронной почты на мобильном устройстве

0 голосов
/ 25 сентября 2018

У меня есть 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>

Может кто-нибудь указать, что я делаюнеправильно?

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

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

Чтобы получить настраиваемый текст предварительного просмотра для вашего электронного письма, это должен быть первый текст, который появляется в разделе 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-код электронной почты не очень хорош.Это делает скрытый элемент в верхней части вашей электронной почты, который клиент будет отображать в виде текста предварительного просмотра, но на самом деле он не будет отображаться конечному пользователю, когда он откроет электронную почту.

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

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

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

0 голосов
/ 26 сентября 2018

Одна вещь, которую я вижу, это опечатка в вашем атрибуте стиля: 

<div class="”mobileHide”">

... имеет две двойные кавычки.Должно быть так: 

<div class="mobileHide">
...