Вскользь он уже рассматривался, но сегодня вы узнаете о нём более подробную и дельную информацию.
Прехедер.
Сегодня о нём поподробнее. На картинке показан пример хорошего заголовка, но не самого удачного прехедера.
Интересно, что не так давно его вообще не существовало, и после темы письма шёл какой-то бессмысленный текст, вроде «banner banner banner» или «Отписаться от рассылки», а то и вовсе не было ничего. Гораздо лучше, если после темы письма вообще ничего не будет, чем набор бессмысленных букв или что-то непривлекательное.
Отсюда следует правило: если вы не уверены в цепкости придуманного прехедера, а вам очень важно, чтобы письмо открыли (то есть, тут не до экспериментов), скройте его.
Для этого можно просто выбрать цвет текста близким к цвету фона. Наиболее распространён белый фон, поэтому и текст лучше всего сделать белым, благо опция изменения цвета прехедера есть во многих сервисах рассылок.
Но есть и другая ситуация – вы видите, что предзаголовочный текст работает довольно, неплохо. При нём люди хорошо открывают письма. Тогда этот эффект можно и усилить. Для этого достаточно текст прехедера выделить. Выделение можно сделать жирным шрифтом, ярким цветом, а также их сочетанием. Естественно, что возможность тестирования никто не отменял.
Единство стиля.
В целом и общем оформление письма должно напоминать оформление вашего сайта – те же шрифты, цветовые сочетания, логотипы, межстрочные интервалы и т.д. Если у вас сайт про автомобильные шины, выполненный в брутальной серебристо-чёрной гамме, а оформление письма – радужное оранжево-зелёное, вас не поймут.
Но хочется сказать о тех случаях, когда лучше письмо оформить несколько по-другому, чем сайт.
Случай первый. У вас регулярная рассылка, которую еженедельно (раз в две недели) получают подписчики. У вас появилась акция, которую вы хотите выделить среди общего потока ваших же писем. Соответственно, вы меняете дизайн письма так, чтобы это выглядело логично.
Пример – новогодняя акция. Стоит сделать праздничное оформление ёлочками, гирляндами и т.д. Правда, сильно увлекаться не стоит, т.к. слишком необычные и забавные элементы дизайна могут лишь отвлечь пользователя. Например, меня в своё время существенно отвлекали звенящие гирлянды в mail.ru (они выглядят как наложенные на рамку письма наклейки, а при наведении на них курсора начинают звенеть новогодними звуками).
Случай второй – разные рассылки. Допустим, у вашего магазина есть типовая рассылка. Помимо неё вы сделали специальную обучающую рассылку. Соответственно, её стоит оформить по-другому (другими цветами, шрифтами и т.д.), чтобы подписчики не путали с другой вашей рассылкой, да и чувствовали, что инфоповоды разные.
Эквиваленты.
К сожалению, не всегда, получается, использовать в рассылке именно те элементы, которым изобилует дизайн вашего сайта. Например, mail.ru позволяет использовать шрифт Times New Roman, но не позволяет пользоваться близким к нему Imprint MT Shadow. Если на вашем сайте используется именно второй вариант, в рассылке лучше выбрать наиболее похожий Таймс Нью Роман, т.к. он:
- будет походить на стиль сайта;
- нормально отобразится, не вызвав никаких искажений.
Если вы выберете для писем какой-либо нестандартный шрифт, у подписчиков он может исказиться, а то и вовсе отобразиться не читаемой «кракозяброй».
Адаптация под мобильные устройства.
Самое важное правило – только одна колонка. У многих мобильных телефонов не слишком большие экраны, поэтому две, три и более колонок будут либо мелко выглядеть, либо требовать прокрутку вбок. Кроме того, всегда стоит сделать более крупным размером кнопки, шрифты, ссылки. Так они удобнее воспринимаются с мобильного устройства.
Вот пример, как отображается письмо от Actionpay (известная СРА-сеть) с мобильного устройства.
Как видите, адаптация прекрасная. Имеется всего одна колонка, крупные шрифты и особенно ссылка, по которой очень легко попасть пальцем.
Футер.
В дословном переводе – «подножник». То есть, та часть, которая находится в самом низу под «телом» письма. Обычно ему не придают особого значения. Хотя на деле он может серьёзно поднять престиж компании. Солидные организации, как правило, в футере указывают свои адреса, а также номера телефонов. И соответствующие данные филиалов, если рассылку получают жители филиальных городов.
Относительно хороший пример в этом плане у системы МобиАдс (реклама в приложениях для мобильных устройств). Вот скрин их письма.
Как видите, белым по чёрному указаны адреса, а также контакты для связи с персональным менеджером.
Осторожнее с картинками.
Лучше откажитесь от фоновых изображений, если не уверены, что у всех подписчиков они будут нормально отображаться. Например, система Outlook блокирует отображение картинок. Поэтому если у вас все письмо картинкой со ссылками, получатель просто не увидит его содержания и даже не поймёт, что вы хотели до него донести.
Если картинка является ключевым элементом фирменного дизайна, просто поставьте её в шапке письма (центре или низу – по усмотрению), а основной текст сделайте в виде документа.
Хороший пример в этом плане показывает партнёрская сеть Actionpay.
Как видите, у них есть и картинка, но основной смысл донесён в тексте под ней. Даже если такое письмо будет открыто в аутлук, под пустотой (где не отображается картинка) будет виден вполне годный текст со ссылками.
Вообще старайтесь использовать те форматы картинок, которые меньше весят – так они будут быстрее загружаться при открытии письма. По этой же причине по возможности откажитесь от гифок (анимированных изображений), т.к. они не только утяжеляют письмо, но и не всегда адекватно отображаются.
И ещё один момент – всё, что может быть кликабельным, должно быть кликабельным. Например, картинки, слова-якоря, баннеры должны быть со ссылками, если это логично. Как пример логичности – изображение определённого товара со ссылкой на страницу этого товара.
Помните, что при соблюдении требований почтовых сервисов (отсутствие слишком ярких цветов, наличие ссылки отписки, отсутствие капсы, умеренность с восклицательными знаками) в письмо можно «напихать» до 10-15 ссылок, не боясь срабатывания спам-фильтра.
Подробнее о том, как избежать попадания в спам будет сказано в одной из следующих статей.