Повышаем эффективность рассылки. Изображения в письме. Часть 1: Альтернативный текст

Форма поиска

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

А сегодня перейдем к теме изображений в письме.

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

Итак, картинки.

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

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

 

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

Что в таких случаях делать? Для этого есть уже давно хорошо отлаженная практика, которую, судя по наблюдениям, не так уж и много кто использует. Это прописка альтернативного текста alt-text в атрибутах изображения.

Что такое alt-text?

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

 

 

Где изображения блокируются автоматически, а где — нет?

Автоматически отображают изображения:

Это наша русская тройка — Mail.RuYandexRambler, а также частично Outlook.com, тот что бывший Hotmail ,Gmail.

 

Автоматически блокируют изображения:

Это касается некоторых почтовых сервисов, таких как Yahoo, и почтовых клиентов, например Outlook, Thunderbird и пр.

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

Как установить alt-text

Атрибут alt-text можно прописать вручную, в коде Вашего шаблона:

 

<img alt=«Выбор региона на карте»  src=«http://smartresponder.ru/user/files/…/map.png» width=«220» height=«220» />

 

Или установить в html-редакторе Smartresponder:

«Свойства изображения» → Вкладка «Данные об изображении» → Графа «Альтернативный текст»

 

 

А так этот текст увидит получатель с заблокированными изображениями:

 

 

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

А теперь переходим к веселой части.

 

Как разнообразить alt-text (и сделать его более симпатичным с помощью кода)

Просто прописать текст в атрибутах изображениях — это скучно. Заполнить визуальные пустоты можно и более эффективно, используя стили CSS: цвет фона, цвет текста, шрифт, размер шрифта и т. д. К тому-же, если этого не прописать, то почтовый сервис или email-клиент оформит по дефолту: текст – черным, ссылки – ярко-голубым.

 

Базовые стили атрибута alt-text

font-family — шрифт (Arial, Times New Roman, Verdana и т. д.)
font-size — размер шрифта (в пикселях)
color — цвет шрифта (например #156bad)
font-style — стиль шрифта (нормальный или курсив)
background-color — цвет фона

 

Как установить стили атрибута alt-text

Стили атрибута alt-text можно прописать вручную, в самом коде:

 

<img alt=«Скачать е-руководство» src=«http://smartresponder.ru/user/files/…/ebook.png» width=«200» height=«284» style=«background-color: #156bad; color: #ffffff; font-family: Trebuchet MS, Helvetica, sans-serif; font-size: 14px; font-style: italic; border: 1px solid #c1c1c1; display: block;»/>

 

Или в html-редакторе Smartresponder:

«Свойства изображения» → Вкладка «Дополнительно» → Графа «Стиль»

 

 

И для сравнения.

Так ее видит получатель с заблокированными изображениями без прописанного стиля:

 

 

А так — с прописанным стилем:

 

 

Разница, как видите, есть.

 

Про шрифты

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

Вот список самых популярных:

 

  Обычный Курсив
Arial Скачать книгу быстро Скачать книгу быстро
Arial Black Скачать книгу быстро  Скачать книгу быстро
Arial Helvetica Скачать книгу быстро Скачать книгу быстро
Comic Sans MS Скачать книгу быстро Скачать книгу быстро
Courier New Скачать книгу быстро  Скачать книгу быстро
Georgia Скачать книгу быстро Скачать книгу быстро
Lucida Console Скачать книгу быстро Скачать книгу быстро 
Palatino Linotype Скачать книгу быстро Скачать книгу быстро
Tahoma Скачать книгу быстро Скачать книгу быстро
Times New Roman Скачать книгу быстро Скачать книгу быстро
Trebuchet MS Скачать книгу быстро Скачать книгу быстро
Verdana Скачать книгу быстро Скачать книгу быстро 

 

Про длину alt-текста

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

Как определить превосходит или нет длина текста ширину изображения? На глаз. И тестами, разумеется.

 

Но и даже тут не все так гладко…

Например, не всеми любимый веб-браузер Internet Explorer из всех прописанных стилей будет отображать только цвет фона и шрифта. Аналогично, и в случае с email-клиентом Outlook. Увы.

 

 

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

 

 

А вот у email-клиента Apple Mail c этим проблем нет. Ровно как и у Yahoo,Outlook.com (почт. сервис) и других почтовых сервисов, которые автоматически грузят изображения (Gmail, Yandex, Mail.ru, Rambler и др).

 

Про атрибут title

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

 

 

Так как это отдельный атрибут, этот текст не обязательно должен быть идентичен с текстом ссылки или alt-текстом изображения. Все на Ваше усмотрение.

Можно прописать это вручную, в коде:

 

<img alt=«Скачать е-руководство» title=«Скачать е-руководство «Повышаем открываемость рассылок. Как создать эффективную тему письма»» src=«http://smartresponder.ru/user/files/…/ebook.png» width=«200» height=«284» style=«border: 1px solid #c1c1c1; display: block; background-color: #156bad; color: #ffffff; font-family: Trebuchet MS, Helvetica, sans-serif; font-size: 14px; font-style: italic;» />

 

Или в html-редакторе Smartresponder:

Для изображений: «Свойства изображения» → Вкладка «Дополнительно» → Графа «Заголовок»

 

 

Для ссылок: «Ссылка» → Вкладка «Дополнительно» → Графа «Заголовок»

 

 

И если к атрибуту title подойти с умом (и с юмором), то подобные подсказки могут повлиять на клики и конверсию. Стоит попробовать!

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

 

А Вы прописываете атрибуты в Ваших изображениях? Или забиваете?

eMail Маркетинг