Главное Свежее Вакансии Образование
1 795 5 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Что нужно знать о поддержке текста превью в почтовых клиентах

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

tE3LsNlHxIyy0CKZur5CThWapmxF3nEW8msfzT6u

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

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

Оптимизация этого текста может приносить отличные результаты и значительно увеличивать процент открытых писем (иногда, до 45%).

Данный материал является переводом поста из блога Litmus.

Что такое текст превью

Текст превью (или прехедер) — это небольшой кусочек текста, который «подтягивается» из тела сообщения, и обычно он отображается под полями с именем отправителя и темой сообщения.

216oR0y5M16Zd6CFYHSZ0g5N-KyjOeIUj_mWgGok

Концепция текста превью это современная адаптация понятия «Блока Джонсона» (Johnson Box) —блока с продающим предложением, который размещался в самом верху бумажных рекламных посланий. Идея совершенно та же — текст превью может привлечь внимание получателя сообщения и сподвигнуть человека на открытие письма.

Кроме того, прехедер также может влиять на поведение пользователя —например, если заинтересовать человека упоминанием какого-то интересного объекта (название статьи), то он затем будет искать его в тексте сообщения. Пример такой манипуляции — компания Wedding Wire стала упоминать в тексте превью «вдохновляющие свадебные идеи этой недели», что вызывало интерес у читателей. Процент открытий сообщений в ходе тестов увеличился на 30%.

ajDk6JPOM3iyRXlJHxwpXhEDkgqdJFeHG2X_2UsZ

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

Добавляем текст превью в сообщение

Текст превью «вытягивается» из первых нескольких строк текста письма. В теле текста сообщения его можно также отображать или скрывать. Можно просто начинать письмо со слов, которые будут дополнять тему сообщения и поле «от кого»:

Uj2ARlaNTNoeTFuhUY9-4IT3d0dlEilkTgbWKeE9

cju2mMduKssqW9CL6VWR7aiXC3H31NhWoWZ3BGE1

Видимый текст превью

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

wBE5ryxq31DWNJp05lPpF2I0J-Emot4_83eMmn4h

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

Можно не только показывать в превью первые фразы письма, но и конкретно указывать, какой текст должен попасть в прехедер. Делается это с помощью пары тегов, которые нужно разместить после тега body:

<body> <div> Вот так выбирается текст для превью. </div></body>

Скрытый текст превью

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

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

zeOrWZGmWw9JsuxJYWyUeIrc8j5lqGeGlAwRCOq4

R7IQ8zsQQIxxfajmeiruP00b3vjGfY9lxS-_KEo-

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

Для скрытия текста превью можно использовать несколько разных способов. Например, с помощью CSS можно подсказать тексту, что он не должен отображаться. Поскольку опция display:none работает не во всех почтовых программах (да-да, речь о тебе, Gmail), можно добавить к ней еще пару моментов — например, указать, что текст должен совпадать с цветом фона и быть высотой всего один пиксель:

<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"> Здесь текст превью. </div>

Подобные методы иногда вызывают обсуждения того, могут ли возникнуть проблемы при доставке такого сообщения. Однако если не злоупотреблять ими и в целом иметь хорошую репутацию у спам-фильтров, то все должно быть нормально.

Какие почтовые клиенты поддерживают текст превью

Как и с любой другой вещью, связанной с email, поддержка прехедеров от приложения к приложению отличается. Даже если программа поддерживает данную функцию, все равно в каждой папке входящие письма будут выглядеть по-разному — отличается и расположение и число отображаемых символов.

b_55891443b44af.jpg

* может отличаться в зависимости от темы и длины.

Использованные устройства:

Samsung Galaxy S3 – Android 4.3

BlackBerry Z10

iPhone 6

Nokia Lumia 520 – Windows Phone 8

Расположение текста превью

Большинство почтовых программ отображают текст превью на новой строке, отделенной от темы сообщения и поля «от кого». В случае приложений Apple Mail и iOS Mail часто показываются две или даже три строки текста:

Ps9cyvSl-q8edgaNsmdghrm_dyNZXjEZM6PtvXLg

В случае других приложений (напримел AOL Mail), показывается строго одна строка текста:

hyPovxmQIGFkJ_oJvLYf8IqlMzRaVJvq-PBKN8Iu

Почтовое приложение iPhone 6 отображает три строки текста превью.

xPKWFlmH5IX4V1WJtKduPyJbPEnEBOt7qdT4oWo1

В Gmail (и Yahoo!) прехедер показывается сразу после темы письма:

l-HcgdrWYwX_ryY-j1WLSZNzSnIjUQkU38hkgAX5

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

В случае Gmail для Android тема письма и текст превью сливаются в две строки непрерывного текста:

423JkwFSOiabD-fUE1f0cyPMrLXrbvb9Qsf4-sO0

Подсчет символов в прехедере

Ширина окна браузера, почтовое приложение, длина темы сообщения — все это может влиять на то, сколько символов текста превью будет отображено в папке входящих писем. Например, iOS Mail может отобразить примерно 90 символов текста превью, а Windows Phone не более примерно 40 символов перед тем, как обрезать строку.

ebkuHBoGDPPCKQ9Tex-tzCKHaftqpemgLg6lDElV

Нативное почтовое приложение iOS

TxYBN51X02N5HvL4tYREAZFzQ7hUm55kS1iHBvPI

Windows Phone

В Gmail, Yahoo и Gmail для Android длина прехедера зависит от длины темы письма, поэтому текст превью в этих случаях может составить и ноль и несколько десятков символов.

Какие приложения не поддерживают текст превью

BlackBerry, Outlook.com, Lotus Notes и ранние версии Outlook не поддерживают прехедеры. Если эти почтовые программы популярны среди целевой аудитории почтовой рассылки, то следует больше времени уделить работе над оптимизации темы сообщения и поля «от кого».

6WdCBw49yjLEbygEbR2T33srSfQpe_5twRG1fur4

BlackBerry

r7l4cfqXLBxDUvhpK9_H4BkHGtyMtFjsKlCOw8ps

Outlook 2010

Как оптимизировать текст превью

Вторая тема письма

О прехедере нужно думать, как о «второй теме» и использовать похожие подходы к его оптимизации. В нем должна содержаться полезная, конкретная и, если это уместно, срочная информация. Текст превью — отличное место для экспериментов с юмором, различными символами и другими вещами, которые боязно выносить в саму тему.

Ключевые слова в начале

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

Следует избегать повторений

Идея еще раз использовать тему может быть соблазнительной, но искушению нужно противостоять, поскольку никто не любит два раза в течение пары секунд читать одно и то же. Дополнительное место в прехедере лучше использовать, чтобы дополнить тему сообщения и стимулировать получателей сообщения открыть его. A/B тесты помогут определить, какие варианты текста работают лучше.

Еще несколько советов:

  • Персонализация: Если в других email-кампаниях бизнеса использование персонализации оказалось удачным решением, стоит применить его и в случае текста превью.
  • Резюме послания: Если в теме сообщения используется призыв к действию, то с помощью прехедера можно дать потенциальному клиенту больше информации. Например, если тема звучит как «Скидка 50% на новые поступления», то в прехедере можно раскрыть, какие типы одежды поступили на склад.
  • Призыв к действию или вторичный призыв: Если в теле письма есть призывы к действию, которые хорошо сочетаются с темой сообщения, то вполне можно вынести одно из них в текст превью.
  • Честность: Не нужно обманывать пользователей, заставляя их любой ценой открыть сообщение. Имя отправителя, тема письма и превью должны однозначно давать человеку понять, от кого он получил письмо, и что в нем содержится.
  • Поощрение прокрутки: Если в прехедере упомянуть что-то важное, о чем говорится в середине сообщения, то многие пользователи захотят долистать сообщение до этого момента.

Читайте также другие материалы от «Печкина»:

+2
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Dmitry Kolodin
Бывают и совсем неожиданные случаи. Мы отправили недавно рассылку с неверной ссылкой и на следующий день отправили еще одну с извинениями. Темой письма было "Упс!", что дало нам более 50% опенрейта и 11% кликрейта (это куда больше обычного).
Ответить
Артём 20372
Печкин сервис рассылок скопировал у майлчимпа, а теперь статьи копирует у литмуса. Дайте ребятам еще, что-то присвоить себе.
Ответить
Smile Bright Media
Контент-продвижение на зарубежных и российских ресурсах
Alexander Lashkov
Есть же ссылка на первоисточник, да и сам сервис «Печкин» уже очень давно существует и умеет многое из того, что не умеет в Рунете Мейлчимп
Ответить
Артём 20372
Очень смелое заявление, что печкин умеет, что-то, чего нет на майлчимпе :) Вообще очень опрометчивое сравнение.
Ответить
Smile Bright Media
Контент-продвижение на зарубежных и российских ресурсах
Alexander Lashkov
Там доставка, заточенная под Рунет и отечественные сервисы, имелось в виду это.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.