Лучшие рекомендации по дизайну рассылок в 2019 году
Приступая к работе над новым дизайном емейл шаблона, вы всегда ищете новые тенденции и пытаетесь реализовать их в своем собственном примере, исследуете решения конкурентов или погружаетесь в творческие идеи, не понимая, что на самом деле люди хотят получить. Даже если вы полагаетесь на лучшие советы по разработке дизайна емейл сообщений, у вас нет гарантий, что ваша рассылка будет работать так, как вы ожидали и иметь успех в принципе.
Как быть уверенным, что ваша работа принесет наилучшие результаты? В этой статье вы найдете ответ и примеры лучших практик дизайна емейл шаблонов в 2019 году.
Как выбрать правильный шаблон для дизайна рассылки?
Фактически, структура емейл шаблона зависит от сферы деятельности компании, темы и типа письма. Многие дизайнеры емейл рассылок используют двухколонные темплейты, но есть утверждение, что лучше выбрать шаблон с одним столбцом, потому что такой емейл шаблон лучше адаптируется под мобильные устройства.
Тем не менее, если вы используете адаптивный емейл шаблон с двумя колонками, он будет автоматически адаптирован и преобразон в темплейт с одной колонкой для мобильных телефонов. Таким образом, на самом деле, не имеет значения, сколько столбцов вы будете использовать, если ваш шаблон адаптивный. Согласно статистике 67,2% пользователей проверяют электронную почту с помощью мобильных устройств, поэтому стоит позаботиться о своей мобильной аудитории.
Основным требованием при разработке шаблона электронных писем является представление контента в той форме, которую удобней всего читать, просматривать и пролистывать. Бытует мнение, что всё в дизайне как лендингов, так и емейл шаблонов, двигается от логотипа. Подбирайте цвета и формы, которые не будут нарушать структуру дизайна и будут гармонировать с вашим логотипом.
Если вы занимаетесь дизайном приветственного сообщения, попробуйте сделать дизайн электронной почты похожим на веб-концепцию, которую вы используете. Стоит обратить внимание на возможность изменения шаблона без изменения контента. Stripo позволяет это сделать.
Выберите емейл шаблон, который соответствует вашим базовым требованиям и просто добавьте недостающие блоки, используя функцию перетаскивания. Неважно выбрали ли вы правильное количество блоков, потому что их можно удалять, перемещать или добавлять, как это легко сделать в редакторе Stripo:
Оптимальная ширина для создания емейл темплейта составляет 600 пикселей для десктопов и 320 пикселей для мобильных устройств. Длина может отличаться в соотвествии с длинной самого контента. Не стоит делать рассылку, если вы создали письмо, которое никто и ни при каких обстоятельствах не дочитает до конца по причине его длины.
Если вы решили сделать оригинальное письмо, структура которого будет такой, как вы никогда и нигде раньше не видели, и ни один из ваших конкурентов не делает этого, вы должны создать свой собственный шаблон для емейл рассылки.
Лучшие практики для дизайна электронных писем, которые мы собрали для вас, безусловно, принесут новые идеи и вдохновение, поэтому их следует учитывать. Лучше создать несколько шаблонов рассылки для одной и той же цели и проверить, какой из них принесет лучшие результаты.
Как должен выглядеть хедер электронного письма?
Заголовок емейл темплейта часто содержит название компании и логотип. Это хороший выбор для идентефикации бренда вашей компании и повышения его узнаваемости среди подписчиков и новых клиентов компании.
Рекомендуется добавить панель меню или навигацию по электронной почте только в заголовке. Получатель может посещать ваш официальный сайт, даже не читая электронную почту или легко находить интересную информацию за один клик.
Не используйте декоративные шрифты в заголовке электронной почты, потому что они не будут отображаться правильно. Используйте только стандартные шрифты. Не пишите длинное предложение, а также не используйте caps lock для написания темы электронной почты. Единственное исключение для caps lock — это когда в меню на заголовке такой стиль, который не выглядит раздражающим.
Вот идеальное дизайнерское решение для меню в хедере:
Что такое прехедер и почему он так важен?
Прехедер — текстовая строка, которая содержит краткое описание темы письма, сообщает или напоминает об акциях, скидках и сроках их действия. У вас есть всего-то навсего 70-100 символов, чтобы убедить читателя открыть сообщение и прочесть его, не тратьте эту возможность напрасно.
Существует два типа прехедеров: визуальный и скрытый. Вы можете управлять настройками видимости. Скрытый прехедер все же можно прочесть перед открытием письма, но в самом сообщении его не видно. Это актуально делать только чтобы избежать тавтологии, или если вы хотите сделать письмо как можно короче и стараетесь не нагромождать кучу текста в сообщении. Хотя я очень сомневаюсь в том, что 70-100 символов способны испортить дизайн и выглядеть громоздко, но на вкус и цвет товарищей нет.
В некоторых емейл клиентах прехедеры всегда скрыты. Например, в Apple Mail. Вот пример видимого прехедера который не обязательно должен располагаться в верхнем левом углу, но это обязательно самая первая фраза вашего емейл сообщения. Вы можете воспользоваться функцией выравнивая текста для изменения расположения прехедера так, как он всегда реализуется в текстомвом формате и никогда в виде картинки.
Если вы не пишете ничего в прехедере, получатели онлайн-корреспонденции перед открытием письма увидят тот текст, который идет первым в сообщение, зачастую это предоставление возможностим просмотреть сообщение в виде веб версии, если что-то некорректно отображается, или чего хуже, в превью попадут alt первого изображения или лого. Это в худшем случае отпугивает пользователя и он даже не открывает сообщение, к тому же тогда нет ни слова, которое побудило бы читателя к прочтению сообщения.
Многие емейл маркетологи в случае, если письмо сильно длинное и велика вероятность того, что в некоторых почтовиках, как, к примеру, Gmail, оно будет урезаться, размещают в самом начале кнопку или ссылку для отмены подписки, которая обычно находиться в футере или после него. Если вы не создали текст для прехедера, ваши пользователи увидят слово “отписаться” сразу после темы сообщения, что вообще побуждает пользователей совершить отписку.
Многие интернет-магазины используют прехедер для уведомления пользователей о скидках, распродажах,акциях, конкурсах и т. д.. Фактически, прехедер является дополнением поля темы письма и призван её усилить.
Какой шрифт выбрать?
Не используйте декоративные или авторские шрифты, потому что нет никакой гарантии, что они будут отображаться надлежащим образом в разных почтовых клиентах и на разных устройствах. Чтобы использовать нестандартный шрифт, вы должны подгружать его с отдельного файла, чтоб подключить который вы пишете не одну строчку кода — всё это лишнее. Безопасных шрифтов достаточно, чтобы сделать красивый дизайн емейл шаблона любой сложности.
Не обременяйте себя лишними усилиями поиска, подбора и тестирования нестандартных шрифтов. В любом случае будут почтовые клиенты, которые будут использовать шрифт по умолчанию вместо вашего шрифта, а это может полностью испортить структуру сообщения и дизайн в целом.
Не используйте более 3-х шрифтов для создания письма. На мой взгляд, этого более, чем достаточно и, к тому же, гораздо важнее подобрать корректный размер шрифта и и не забыть о междустрочном интервале и отступах.
Вот список стандартных шрифтов, которые есть во всех почтовиках и установлены по умолчанию в любой операционной системе:
Лучшая практика HTML емейл дизайна — это использование всего лишь одного шрифта для основного контента, и другого для заголовков и подзаголовков. Это действительно работает и не перегружает ни код, ни тем более читателя, который читает сообщение. Правилу этому следуют далеко не всегда. На самом деле можно обойтись и одним шрифтом, просто делать заголовки жирными или выделять их курсивом и обязательно для таких элементов стоит брать больше шрифт.
Если вы неправильно используете шрифты, вы можете сделать свои письма практически нечитабельными. Будьте дружелюбны и лучше проявляйте свое творчество в самом контенте, но не в форматировании.
Уменьшите размер изображения
На самом деле есть два самых популярных формата используемых изображений: PNG и JPEG. Также часто емейл маркетологи используют анимированную картинку GIF, но они обычно много весят, так что редко используется более одной анимации в сообщении. Обычно GIF анимация привлекает гораздо больше внимания, чем другие статические. Не стоит также использовать более трех PNG или JPEG картинок, но это правило повсеместно нарушается.
Максимальный размер письма 100кб для Gmail, все письма, которые превышают этот размер урезаются. 100кб — это очень мало, но тем не менее, если количество ваших подписчиков использующих именно этот почтовый клиент превышает 30-40% процентов, то стоит задуматься о создании отдельной версии =письма для Gmail, которая будет иметь небольшой размер.
Вы можете использовать бесплатные онлайн-компрессоры для GiF или PNG и JPEG, чтобы уменьшить размер изображений. Таким образом вы значительно уменьшите вес письма, а значит и сократите скорость загрузки сообщения. Лучшей практикой является использование емейл редакторов, которые автоматически оптимизируют изображения при загрузке. Емейл редактор Stripo позволяет также редактировать изображения прямо в редакторе.
Вам не нужно использовать Photoshop или какой-либо другой инструмент для редактирования изображений. Вы можете юзать встроенный редактор фотографий и экономить время, сократив и оптимизировав рутинные процессы. Вот как фоторедактор выглядит в Stripo:
Следующий важный нюанс заключается в том, что всегда обязательно добавлять альты для изображений. Почтовые клиенты, которые не отображают изображения, все еще существуют. Если картинки не отображаются — вместо них будут выведены альты в текстовом формате. Без них человек не сможет догадаться, что в этом месте сообщения предусмотрена картинка и стоит перейти в веб версию письма, чтобы увидеть емейл таким, как его отправили.
В емейл дизайне существует крутая практика, которая рекомендует использовать иконки вместо изображений, поскольку иконки весят мало, размер письма значительно сокращается, но текст, тем не менее, остается структурированным.
Вот пример, где эта практика используется:
Выглядит отлично, не правда ли?
Персонализация
Создание персонализированной емейл маркетинговой кампании — это старая и весьма известная практика, используемая в емейл маркетинге издревле. Статистика гласит, что персонализированные сообщения имеют open rate на 26% выше по сравнению с обычными сообщениями.Еще один статистический факт заключается в том, что персонализированная рассылка приносит в 6 раз больше прибыли по сравнению с любыми другими видами рассылок. Кликабельность же возрастает на 14% у персонализированных писем.
Единственный совет по персонализации рассылки — собирать только ту информацию, которую вы действительно используете. Не тратьте время на сбор и анализ аналитики, которую вы никогда не будете использовать в рассылках.
Мы рекомендуем вам собрать такую информацию как:
- Имя;
- Возраст;
- Пол;
- Семейное положение;
- Город и страна;
- Интересы;
- История продаж (только для интернет-магазинов);
- История сессий;
- и т.д.
Весь этот набор данных вам помогает получить сам емейл подписчик. Существует два способа узнать эту информацию, используя опросы/анкеты и отслеживая активность пользователей на вашем веб-сайте с помощью аналитики.
Советуем предоставить небольшой бонус за предоставление информации в опросах и анкетах. Например, предоставьте возможность скачать эксклюзивный контент или предоставьте небольшую скидку. Таким образом пользователи более активно будут участвовать в опросах. Обязательно поместите информацию о бонусе в прехедер, чтобы пользователь заинтересовался и открыл письмо.
Советуем использовать Google Tag Manager, и уже внутри менеджера подключить Google Analytics. Тег менеджер предоставляет больше возможностей в плане создания ивентов и аналитика получается более точной.
Персонализация — это больше, чем просто использование имени клиента в рассылке, это понятие заключается больше в том, чтобы предоставить информацию, которая соответствует ожиданиям пользователей.
Баннеры в емейл дизайне
Основная цель баннеров — привлечь внимание и увеличить интерес к чтению письма. Одной из лучших практик дизайна шаблонов электронной почты является использование баннеров в начале вашей электронной почты сразу после заголовка.
Классический баннер — это картинка с несколькими приветственными словами, которые интригуют и/или привлекают внимание пользователя. Это действительно хорошая практика, разбавить сплошное полотно текста несколькими баннерами для удобства чтения. Тогда визуально кажется, что текста не так-то и много.
Чем принципиально отличается баннер от простой картинки? А отличие это в том, что баннеры обязательно содержат призыв к действию (СТА) в текстовом формате, но чаще в виде ссылок или кнопок. Вы можете поместить СТА кнопку в емейл сообщение, и ваша целевая страница получит приток посетителей, а товар обязательно найдет своего покупателя.
Чаще всего емейл дизайнеры помещают кнопки на баннер, и обязательно в конце письма перед или вместо футера.
Вот примеры хорошего дизайна баннера для вашего вдохновения:
Вот минималистическое решение для дизайна баннера:
Кнопки и призыв к действию
Существует правило для создания электронной рассылки, которое гласит, что одно сообщение должно иметь одну тему. Невозможно создать емейл сообщение, которое раскрывало бы сразу несколько ни с чем не связанных между собой тем. В первую очередь это вызвало бы некоторый диссонанс в сознании получателя почты. Во-вторых, такое сообщение дезориентировало бы читателя и он не среагировал бы ни на один призыв к действию. В-третьих, сообщение раскрывающее сразу несколько тем было бы просто бесконечным по своей длине.
Существует аналогичное правило и для призыва к действию: одно сообщение — один призыв к действию. Кнопки привлекают больше внимания, чем ссылки. Если вы в любом случае используете ссылки, оформляйте их только в виде анкоров. Слова-маркеры “здесь”, “тут”, ”ссылка” не несут в себе описания контента, который будет доступен по ссылке, к тому же первые два 100% вообще не будут заметны в тексте.
Если вы в одном сообщении попросите пользователя что-то купить, оформить премиум аккаунт на вашем сайте и одновременно прочитать новую статью, получатель, вероятно, не выполнит ни одно из этих действий. Это действительно раздражает, когда вы многократно дублируете призыв к действиям: «Купите это, купите это, купите сейчас!». По крайней мере, единственное, что пользователь хочет сделать, это попрощаться с этой подпиской.
Формулируйте четко свой призыв к действию и располагайте его в теле письма по контексту. Это будет странно, если вы прерываете посередине текст сообщения невнятным призывом перейти на сайт до того, как человек еще понял зачем ему это делать. Еще один вариант: вы предлагаете человеку посетить определенный раздел сайта и выбрать себе товары, а позже в том же письме предлагаете на товары из этого раздела скидку. Это весьма странно, но такие ошибки допускаются очень часто. Соблюдайте последовательность и ничто не должно противоречить здравому смыслу и логике.
Ниже приведен пример четкого призыва к действию в практике дизайна емейл рассылок:
В этом шаблоне все понятно благодаря краткому описанию и визуально выделяющейся кнопке с коротким и запоминающимся призывом к действию. Если вы создадите свой призыв к действию по тому же принципу, он без сомнений сработает!
Этот баннер имеет классный дизайн, но призыв к действию заметить крайне сложно, что плохо:
Футер VS Подпись: Что выбрать?
У вас может возникнуть вопрос, что лучше использовать персонализированную подпись или футер при создании дизайна шаблона электронной почты. Вы можете подумать, что если вы делаете персонализированную рассылку, вы должны использовать подпись, но это неверно. Футер выполняет больше функций, чем просто показывает, от кого было отправлено это сообщение.
Все рекламные сообщения, информационные, триггерные, промо или ивентные письма должны иметь футер с кнопками шеринга через социальные сети, контактной информацией и опцией отмены подписки. Хорошая практика — показать меню со ссылками на высококонверсионные страницы.
Судя по результатам практических экспериментов пользователи с большей вероятностью будут использовать панель меню в футере, чем в хедере, потому что они сложили свое мнение о ценности предложения, да и рассылки в принципе, только к концу сообщения.
Используйте подпись только в личной переписке по электронной почте. Для всех остальных ситуаций используйте футеры, вот пример для вашего вдохновения классического варианта футера, который предоставляет полную информацию о компании (контактное данные, адрес, социальные медиа), ссылки на информационные страницы сайта и возможность отписки:
Довольно большой, не так ли? Если вы хотите сэкономить место, не указывайте адрес компании и сделайте минималистический футер:
Вот пример, где все правила дизайна были проигнорированы:
На мой взгляд, написать много текста после футера, который является маркером конца письма, является одним из худших приемов в дизайне емейл шаблонов.
Вывод
Несомненно, что после прочтения этой статьи у вас будет план по редизайну старых шаблонов электронных писем и созданию новых. Если эта статья принесла вам вдохновение, мы добились своей цели.
Создайте несколько шаблонов по одной и той же теме и настройте A/B тестирование, чтобы определить, какое сообщение работает лучше. Помните не только о бесконечном творчестве и оригинальном подходе, но также об оптимизации размера емейл сообщения и релевантности контента. Надеюсь, что наши рекомендации дизайна емейлов помогут вам как можно скорее достичь наилучших результатов.