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

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

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

…оказывается все очень просто

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

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

По Аналитике результатов нескольких email рассылок можно проследить за уровнями открытия сообщений, кликов по ссылкам (ctr, ctor), отказов от рассылки для оценки предпочтений подписчиков к оформлению сообщений.

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

Несколько примеров из практики:

СПАМстиль

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

Пример 1.

Мы занимаемся рекламой больше 10 лет!

Развивайте свой бизнес с нами!!!

создание сайтов, предоставление хостинга.


Знакомо? 🙂 Да, конечно. Большинство приходящего СПАМа оформлено именно так. Из-за этого около 90% получателей, открыв сообщение с подобным оформлением, уже подсознательно воспринимают его негативно (уж очень сильно напоминает надоедливый СПАМ). Постоянным спутником таких сообщений является высокий уровень отказов от подписки.

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

Простой текст

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

Сравните восприятие одной и той же информации в примерах ниже.

Пример 2. (простой текст без логического разделения и оформления ссылок)

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. Источник http://ru.lipsum.com/

Пример 3. (простой текст с заголовком, абзацами и оформленными ссылками)

Что такое Lorem Ipsum? (подробно http://ru.lipsum.com/)

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.

Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.

источник http://ru.lipsum.com/

Пример 2 и 3 — разница для восприятия ощутима. Если цель рассылки донести информацию, а «не сам процесс» :-), то удобно форматированный текст «по делу» с разделами и заголовками принесет отправителю больше внимания.

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

Графическое оформление

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

Пример 4.

При создании такого оформления для email сообщения важно помнить, что разные почтовые системы по-разному отображают css форматирование и css стили важно «прописывать inline», иначе подобного результата добиться будет сложно.

Ловушки в оформлении или правила безопасного css форматирования

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

Далее практическая информация о том какое css форматирование будет сохранено при отображении популярніми почтовыми клиентами и сервисами:

Поддержка css настольными почтовыми клиентами

Элемент стиля Outlook ‘03 Outlook ‘07 Windows Mail Mac Mail Entourage 2004 Entourage 2008 Thunder-
bird 2
AOL 9 AOL 10 AOL Mac Notes 6
<style> in <head> Да Да Да Да Да Да Да Да Да Нет Нет
<style> in <body> Да Да Да Да Да Да Да Да Да Нет Нет
Link Element
<style> in <head> Да Да Да Да Да Да Да Да Да Нет Да
<style> in <body> Да Да Да Да Да Да Да Да Да Нет Да
CSS Selectors
e Да Да Да Да Да Да Да Да Да Нет Нет
* Да Нет Да Да Да Да Да Да Да Нет Нет
e.className Да Да Да Да Да Да Да Да Да Нет Нет
e#id Да Да Да Да Да Да Да Да Да Нет Нет
e:link Да Да Да Да Да Да Да Нет Да Нет Нет
e:active, e:hover Да Нет Да Да Да Да Да Да Да Нет Нет
e:first-line Да Нет Да Да Да Да Да Да Да Нет Нет
e:first-letter Да Нет Да Да Да Да Да Да Да Нет Нет
e > f Нет Нет Нет Да Да Да Да Нет Нет Нет Нет
e:focus Нет Нет Нет Да Да Да Да Нет Нет Нет Нет
e+f Нет Да Нет Да Нет Да Да Нет Нет Нет Нет
e[foo] Нет Нет Нет Да Нет Да Да Нет Нет Нет Нет
CSS Properties Outlook ‘03 Outlook ‘07 Windows Mail Mac Mail Entourage 2004 Entourage 2008 Thunder-
bird 2
AOL 9 AOL 10 AOL Mac Notes 6
background-color Да Да Да Да Да Да Да Да Да Да Нет
background-image Да Нет Да Да Да Да Да Да Да Да Нет
background-position Да Нет Да Да Да Да Да Да Да Да Нет
background-repeat Да Нет Да Да Да Да Да Да Да Да Нет
border Да Да Да Да Да Да Да Да Да Да Нет
border-collapse Да Да Да Да Нет Да Да Да Да Да Нет
border-spacing Нет Нет Нет Да Нет Да Да Да Нет Да Нет
bottom Да Нет Да Да Да Да Да Нет Да Да Нет
caption-side Нет Нет Нет Нет Нет Нет Да Нет Нет Нет Нет
clear Да Нет Да Да Да Да Да Да Да Да Нет
clip Да Нет Да Да Да Да Да Да Да Да Нет
color Да Да Да Да Да Да Да Да Да Да Да
cursor Да Нет Да Да Нет Да Да Да Да Да Нет
direction Да Нет Да Да Нет Да Да Да Да Да Да
display Да Нет Да Да Да Да Да Да Да Да Да
empty-cells Нет Нет Нет Да Нет Да Да Нет Нет Да Нет
float Да Нет Да Да Да Да Да Да Да Да Да
font-family Да Да Да Да Да Да Да Да Да Да Да
font-size Да Да Да Да Да Да Да Да Да Да Да
font-style Да Да Да Да Да Да Да Да Да Да Да
font-variant Да Да Да Да Да Да Да Да Да Да Нет
font-weight Да Да Да Да Да Да Да Да Да Да Да
height Да Нет Да Да Да Да Да Да Да Да Нет
left Да Нет Да Да Да Да Да Да Да Да Нет
letter-spacing Да Да Да Да Да Да Да Да Да Да Нет
line-height Да Да Да Да Да Да Да Да Да Да Нет
list-style-image Да Нет Да Да Да Да Да Да Да Да Нет
list-style-position Да Нет Да Да Да Да Да Да Да Да Нет
list-style-type Да Нет Да Да Да Да Да Да Да Да Да
margin Да Да Да Да Да Да Да Нет Да Да Нет
opacity Нет Нет Нет Да Нет Да Да Да Да Да Нет
overflow Да Нет Да Да Нет Да Да Да Да Да Нет
padding Да Да Да Да Да Да Да Да Да Да Нет
position Да Нет Да Да Да Да Да Да Да Да Нет
right Да Нет Да Да Да Да Да Да Да Да Нет
table-layout Да Да Да Да Да Да Да Да Да Да Нет
text-align Да Да Да Да Да Да Да Да Да Да Да
text-decoration Да Да Да Да Да Да Да Да Да Да Да
text-indent Да Да Да Да Да Да Да Да Да Да Нет
text-transform Да Да Да Да Да Да Да Да Да Да Нет
top Да Нет Да Да Да Да Да Да Да Да Нет
vertical-align Да Нет Да Да Да Да Да Да Да Да Нет
visibility Да Нет Да Да Да Да Да Да Да Да Нет
white-space Нет Да Нет Да Да Да Да Нет Нет Да Нет
width Да Нет Да Да Да Да Да Да Да Да Нет
word-spacing Да Нет Да Да Да Да Да Да Да Да Нет
z-index Да Да Да Да Да Да Да Да Да Да Нет
Outlook ‘03 Outlook ‘07 Windows Mail Mac Mail Entourage 2004 Entourage 2008 Thunder-
bird 2
AOL 9 AOL 10 AOL Mac Notes 6

Поддержка css web-сервисами электронной почты

Элемент стиля Old Yahoo New Yahoo Old Gmail New Gmail Live Mail Hotmail AOL Web MobileMe
<style> in <head> Да Да Нет Нет Да Нет Да Да
<style> in <body> Да Да Нет Нет Да Да Да Да
Link Element
<style> in <head> Нет Да Нет Нет Да Нет Да Да
<style> in <body> Нет Да Нет Нет Да Нет Да Да
CSS Selectors
e Да Да Нет Нет Да Да Да Да
* Да Да Нет Нет Да Да Да Да
e.className Да Да Нет Нет Да Да Да Да
e#id Да Да Нет Нет Нет Да Да Да
e:link Да Да Нет Нет Да Да Да Нет
e:active, e:hover Да Да Нет Нет Да Да Да Нет
e:first-line Да Да Нет Нет Да Да Да Нет
e:first-letter Да Да Нет Нет Да Да Да Нет
e > f Да Да Нет Нет Нет Нет Нет Нет
e:focus Да Да Нет Нет Нет Нет Да Нет
e+f Да Нет Нет Нет Нет Да Нет Нет
e[foo] Да Да Нет Нет Нет Да Да Нет
CSS Properties Old Yahoo New Yahoo Old Gmail New Gmail Live Mail Hotmail AOL Web MobileMe
background-color Да Да Да Да Да Да Да Да
background-image Да Да Нет Нет Нет Да Да Да
background-position Нет Да Нет Нет Нет Нет Да Да
background-repeat Да Да Нет Нет Нет Да Да Да
border Да Да Да Да Да Да Да Да
border-collapse Да Да Да Да Да Да Да Да
border-spacing Да Да Да Да Нет Нет Да Да
bottom Да Нет Нет Нет Нет Да Да Да
caption-side Да Нет Да Да Да Нет Да Да
clear Да Да Да Да Да Да Да Да
clip Да Нет Да Нет Нет Да Да Нет
color Да Да Да Да Да Да Да Да
cursor Да Да Нет Нет Да Да Да Да
direction Да Да Да Нет Да Да Да Да
display Да Да Да Да Да Да Да Да
empty-cells Да Да Да Да Да Нет Да Да
float Да Да Нет Да Да Да Да Да
font-family Да Да Нет Нет Да Да Да Да
font-size Да Да Да Да Да Да Да Да
font-style Да Да Да Да Да Да Да Да
font-variant Да Да Да Да Да Да Да Да
font-weight Да Да Да Да Да Да Да Да
height Да Да Нет Да Да Да Да Да
left Да Нет Нет Нет Нет Да Да Да
letter-spacing Да Да Да Да Да Да Да Да
line-height Да Да Да Да Да Да Да Да
list-style-image Да Да Нет Нет Нет Да Да Да
list-style-position Нет Да Да Да Да Нет Да Да
list-style-type Да Да Да Да Да Нет Да Да
margin Да Да Да Да Нет Нет Да Да
opacity Да Нет Нет Нет Нет Нет Да Да
overflow Да Да Да Да Да Да Да Да
padding Да Да Да Да Да Да Да Да
position Нет Нет Нет Нет Нет Нет Да Нет
right Да Нет Нет Нет Нет Да Да Да
table-layout Да Да Да Да Да Да Да Да
text-align Да Да Да Да Да Да Да Да
text-decoration Да Да Да Да Да Да Да Да
text-indent Да Да Да Да Да Да Да Да
text-transform Да Да Да Да Да Да Да Да
top Да Нет Нет Нет Нет Да Да Да
vertical-align Да Да Да Да Да Да Да Да
visibility Да Да Нет Нет Да Да Нет Да
white-space Да Да Да Да Да Да Да Нет
width Да Да Да Да Да Да Да Да
word-spacing Да Да Да Да Да Да Да Да
z-index Да Нет Нет Нет Нет Да Да Да
Old Yahoo New Yahoo Old Gmail New Gmail Live Mail Hotmail AOL Web MobileMe

по результатам исследования Campaign Monitor в 2008г.

Резюме:

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

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

3. Изучайте свою аудиторию с помощью Аналитики email рассылок. Там есть ответ на вопрос «с каким оформлением лучше читают?» и «кто читает наши сообщения?»

4. При использовании css стилей помните про безопасное форматирование (таблицы выше).

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

Андрей Сабанский

© FEEDGEE Маркетинг, 2009

Ссылка на источник для публикации: «Источник: официальный блог FEEDGEE Маркетинг <a href=»http://blog.feedgee.com»>http://blog.feedgee.com</a>«