Pull to refresh

Почтовые рассылки: письменная кухня

Reading time 12 min
Views 8.2K


Каждый день я получаю различные рассылки от многих сервисов, и по роду деятельности с удовольствием их критикую. Но на этот раз мне пришло письмо от PayPal c рекламой магазинов-партнеров, которое меня очень приятно удивило. Это натолкнуло меня на мысль «приготовить» подобную рассылку и поделиться этим с вами.

Схема рассылки



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

Основа


Для начала, не касаясь отмеченных на схеме блоков, заострим наше внимание на основе нашего макета. У некоторых почтовых систем, рассылающих письма есть одна особенность — они вырезают теги html, head и body, что в принципе ничего плохого не делает, но исходя из этого факта, оформлять нашу верстку мы можем проще.

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<table bgcolor="#f4f4f4" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;">
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
<tr><td align="center">Служебный блок "Отображение"</td></tr>
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
<tr><td align="center">Остальная часть письма</td></tr>
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
</table>

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

<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="0"/></div></td></tr>

Это 10 пиксельная распорка которая дает нам железный отступ между блоками. В качестве изображения используем прозрачный .gif файл 10х10 пикселей. Если вас крайне заботит корректное отображение в TheBat!, то фон .gif файла должен совпадать с цветом фона места, где он находится, иначе TheBat! может окрасить прозрачные пиксели в черный цвет, что не так желательно для отображения.

Служебный блок «Отображение»


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

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

Да, это было несколько категорично, и я, пожалуй перефразирую свое мнение. Если вы достаточно уверены в своей верстке, то можете опустить ссылку на просмотр в браузере. Если, все же нет, тогда смело ставьте, ведь так делают многие. Что касательно plain/text версии письма, так эта ссылка должна быть обязательно, чтобы люди, предпочитающие текстовый формат рассылок, при желании могли ознакомиться с полной версией рассылки.

Верстается этот блок в нашем случае достаточно просто:

<span style="font-family:tahoma; font-size:11px; color:#404040;">Здравствуйте, %username%. Если данное письмо отображается некорректно, включите картинки в вашем почтовом клиенте 
или перейдите <a href="%view_in_browser_link%" style="color:#0077c0 !important;" target="_blank">этой ссылке</a> для просмотра письма в браузере. Добавьте, пожалуйста адрес <a href="%mailto_link%" style="color:#0077c0 !important;" target="_balnk">mail@sampleshop.com</a> в адресную книгу,
чтобы новостные рассылки не помечались как спам.</span>

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

Остальная часть письма


Теперь поговорим о следующем объемном блоке, которые мы окрестили в коде выше как «Остальная часть письма». Этот блок содержит «шапку», «приветствие», «контент» и 2 служебных блока внизу. Привожу код блока этой части:

<table align="center" width="600" cellpadding="0" cellapscing="0" style="border-collapse:collapse;">
<tr><td><div style="line-height:0;"><img src="hut.jpg" width="600" height="88" alt="sampleshop.com" title="sampleshop.com"/></div></td></tr>
<tr><td>
<table bgcolor="#f4f4f4" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;">
<tr>
<td>
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellapscing="0" style="border-collapse:collapse; border-left:#e5e5e5 1px solid; border-right:#e5e5e5 1px solid; border-bottom:#e5e5e5 1px solid;">
<tr><td>Приветствие</td></tr>
<tr><td height="30"><div style="line-height:0;"><img src="blank.gif" width="30" height="30"/></div></td></tr>
<tr><td>Контент</td></tr>
</table>
<table width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;">
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
<tr>
<td width="10" height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td>
<td>
Служебный блок "Безопасность"
Служебный блок "Отписка"
</td>
<td width="10" height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td>
</tr>
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
</table>
</td>
</tr>
</table>
</td></tr>
</table>

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

Блок «Приветствие»


Блок приветствия не критичен, но является хорошим тоном. Мы подбираем картинку подстать ЦА. В нашем случае изображение ориентировано на «семейную» аудиторию, соответственно мы хотим продать товары для семьи, а не какие либо гиковские гаджеты или оружие ;) Верстаем так:

<table align="center" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;">
<tr>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
<td width="215"><div style="line-height:0;"><img src="family.jpg" width="215" height="130" alt="happy family"/></div></td>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
<td><span style="font-family:tahoma; font-size:12px; color:#404040;">Здравствуйте, %username%,
[br/][br/]В интернет-магазинах каждый найдет себе товар по вкусу. Исполняйте свои желания, удивляйте и радуйте семью и друзей![br/][br/]Приятных покупок! Команда %shopname%</span></td>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
</tr>
</table>

В который раз упомяну: В коде теги BR заключены в квадратные скобки потому что хабрапарсер съедает эти теги в листингах кодов.

Блок «Контент»


В контентном блоке применен классический прием привлечения внимания в соответствии с тепловой картой того самого внимания. Карта уже ранее использовалась мною в статьях, но первоисточником является Якоб Нильсен — специалист по юзабилити из SUN Microsystems.

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

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

Ах у ели, ах у елки, ах у ели злые волки. Ненужная скороговорка, дабы листинг кода не залезал под картинку.

Верстается блок по аналогии с «Приветствием», но тем не менее привожу листинг кода:

<table align="center" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;">
<tr>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
<td width="120"><div style="line-height:0;"><img src="gift.jpg" width="120" height="120" alt="happy family"/></div></td>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
<td><span style="font-family:tahoma; font-size:12px; color:#404040;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</span>[br/][br/]<img src="buy-now.jpg" width="120" height="25" alt="Купить сейчас!" title="Купить сейчас!"/></td>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
</tr>
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
<tr>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
<td width="120"><div style="line-height:0;"><img src="gift.jpg" width="120" height="120" alt="happy family"/></div></td>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
<td><span style="font-family:tahoma; font-size:12px; color:#404040;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</span>[br/][br/]<img src="buy-now.jpg" width="120" height="25" alt="Купить сейчас!" title="Купить сейчас!"/></td>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
</tr>
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
<tr>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
<td width="120"><div style="line-height:0;"><img src="gift.jpg" width="120" height="120" alt="happy family"/></div></td>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
<td><span style="font-family:tahoma; font-size:12px; color:#404040;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</span>[br/][br/]<img src="buy-now.jpg" width="120" height="25" alt="Купить сейчас!" title="Купить сейчас!"/></td>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
</tr>
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
</table>

Блоки «Безопасность» и «Отписка»


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

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

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

Ну и наконец, код верстки служебных блоков:

<table align="center" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;">
<tr><td><span style="font-family:tahoma; font-size:10px; color:#404040;"><b>Как определить, не является ли полученное Вами сообщение поддельным?</b>[br/]В сообщении, которое действительно отправлено от имени %shopname%, содержится обращение к Вам по имени и фамилии или по названию Вашей фирмы. В нем не содержится просьб раскрыть Вашу конфиденциальную информацию, например, Ваш пароль, номер банковского счета или информацию о кредитной карте. В большинстве поддельных сообщений содержатся угрозы о том, что Ваша учетная запись подвергнется риску, если Вы не предпримете срочных мер. Сообщение электронной почты, в котором от Вас требуют срочно предоставить Ваши личные сведения конфиденциального характера, как правило, является попыткой мошенничества. Также поддельные сообщения часто содержат опечатки и грамматические ошибки, либо написаны в стиле, не соответствующем содержанию Вашей учетной записи %shopname%. Не нажимайте ни на какие ссылки в подобных подозрительных сообщениях. Нажмите <a href="#" target="_blank" style="color:#0077c0 !important;">сюда</a>, чтобы узнать как защитить себя от обманных и мошеннических действий.</span></td></tr>
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
<tr><td align="center"><span style="font-family:tahoma; font-size:11px; color:#0077c0 !important;"><a href="#" target="_blank" style="color:#0077c0 !important;">Забыли пароль?</a> | <a href="#" target="_blank" style="color:#0077c0 !important;">Справка</a> | <a href="#" target="_blank" style="color:#0077c0 !important;">Центр обеспечения безопасности</a> | <a href="#" target="_blank" style="color:#0077c0 !important;">Контакты</a></span></td></tr>
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
<tr><td><span style="font-family:tahoma; font-size:10px; color:#404040;">Это сообщение электронной почты отправлено на адрес dudeonthehorse@gmail.com, поскольку в настройках электронной почты вы подписаны на получение новостной рассылки и сообщений об обновлениях %shopname%. [br/]Отказаться от рассылки вы пожете <a href="#" target="_blank" style="color:#0077c0 !important;">по  этой ссылке</a>.</span></td></tr>
</table>

В итоге получаем!




PS


Вот так вот и работаем. С виду кажется, что кода много, но при правильном использовании табуляции, код вполне читабелен. Если не осилите/нет желания сходить с ума, обращайтесь. Удачи в работе!
Tags:
Hubs:
If this publication inspired you and you want to support the author, do not hesitate to click on the button
+55
Comments 51
Comments Comments 51

Articles