Инструкция по HTML верстке писем email рассылки
Верстка HTML-письма с нуля – работа не из легких. Основная задача – создать универсальный код, который будет понятен различным почтовым клиентам и одинаково красиво будет отображаться на всех устройствах.
Как правило, чем «древнее» код, тем выше вероятность, что он будет корректно работать. И хотя сегодня существуют конструкторы HTML писем, которые упрощают верстку писем, в основе их работы заложены всё те же старые принципы разработки HTML шаблонов.
В этой статье мы расскажем, как создать HTML письмо, которое пользователи оценят по достоинству.
Создание HTML письма: Базовые знания
Существуют два основных правила, о которых всегда стоит помнить, приступая к верстке письма:
- Используйте таблицы HTML кодов при создании дизайна шаблона. Это будут огромные таблицы с большим количеством вложенных таблиц. Но такой подход помогает сохранить нужный дизайн на любом устройстве и в любом почтовом клиенте.
- Используйте внутренние CSS стили. Некоторые почтовые клиенты будут удалять всё, что находится в тегах <head> и <body>, включая CSS. Поэтому, для изменения стилей различных элементов письма — цвет, фон, шрифты — рекомендуется прописывать параметры отдельно для каждого элемента в теле письма.
А теперь давайте разбираться детальнее в такой сложной, но интересной теме как верстка email писем.
Один из самых распространенных вопросов среди новичков: Где писать код шаблона HTML письма? Не в Microsoft Word же, правда? Удобно и понятно, когда сразу видишь, как выглядит написанный код HTML письма и в каком виде его получит клиент. Программа для массовых email рассылок ePochta Mailer имеет прекрасный функционал для параллельного написания кода и просмотра созданного шаблона в режиме реального времени. Поэтому здесь и далее все примеры по созданию, редактированию и отправке письма будут представлены с ее помощью.
Cкачайте софт для массовых Email рассылок бесплатную демо-версию программы и читая статью, сразу тренироваться в сотворении своего email шаблона.
Формат шаблона html-писем
Чаще всего одноколоночный макет включает в себя:
- Хедер (шапку), что содержит логотип и навигационные ссылки с родительского вебсайта.
- Основное тело письма с контентом, картинками и ссылками на веб-страницы с полной информацией, обзор которой подан в письме.
Те же элементы содержит и двухколоночный макет, с той лишь разницей, что колонки у него две и при отображении письма на мобильном устройстве колонки могут сдвигаться одна под другую (принцип респонсивности), а могут масштабироваться согласно размеру экрана (что не всегда удобно, если шрифт получается слишком мелким).
Как сверстать HTML шаблон письма: Создание документа
HTML код любого email сообщения состоит из двух частей:
- Шапка (Header). Всё, что будет обернуто в тег <head> и </head>, почтовый клиент будет принимать за шапку письма.
- Тело (Body). Код, размещенный внутри тега <body> и </body> будет использован для создания структуры вашего email сообщения.
Создание HTML письма начинается с создания документа типа XHTML:
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.
w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6. </head>
7. </html>
<!DOCTYPE> объясняет почтовому, какие HTML-теги ожидать в дальнейшем, и какому набору правил HTML и CSS вы придерживались, создавая письмо. Несмотря на то, что некоторые почтовые клиенты (Gmail, Google Apps, Yahoo! Mail и Outlook.com) заменят ваш хедер на собственный, мы рекомендуем включить данный код в документ.
<meta http-equiv=»Content-Type» /> указывает, как обрабатывать текст и специальные символы в вашем письме.
«text/html» дает понять механизму, что рассматривать следующие строки текста нужно как html.
<meta name=»viewport»/> указывает устройство, на котором просматривается электронное письмо, чтобы установить видимую область сообщения в соответствии с шириной экрана.
Заголовок email сообщения записывается внутри тега <title>. В таком случае, если получатель выберет «Просмотр в Интернете», заголовок сообщения будет отображаться на вкладке браузера.
Верстка тела email писем. Создание таблицы
Общая структура письма создается с использованием тега <body>.
Прежде всего, устанавливаем нулевое значение для отступов (теги <margin> и <padding>), чтобы избежать лишнего пустого пространства в шаблоне.
Ширина главной таблицы должна быть 100% (table width=»100%»). Она выступает фактически основным каркасом, «телом» email сообщения. В отличие от тега <body>, работая с таблицей, вы можете работать со стилями: например, чтобы задать общий цвет фона для всего письма, его нужно прописать в параметрах этой главной таблицы.
Значения тегов <cellpadding> и <cellspacing> тоже должны равняться нулю, опять же, во избежание ненужного пустого пространства. Данные теги отвечают за отступы от границ ячейки таблицы.
Примечание. Здесь и далее мы оставим значение тега border для границы всех таблиц как 1: border=»1″. Так вам будет проще отследить структуру макета. В конце, значение можно убрать, используя функцию «Найти и заменить».
1. <body>
2. <table border="1" cellpadding="0" cellspacing="0">
3. <tr>
4. <td>
5. Привет!
6. </td>
7. </tr>
8. </table>
9. </body>
Пока что наше письмо выглядит следующим образом:
(наличие рамки – результат работы тега border=»1″)
Максимально возможная и удобная ширина для электронного сообщения, которое просматривается в почтовых клиентах на персональном компьютере – 600px. Чтобы письмо не растягивало на весь экран, нужно внутри уже созданной главной таблицы создать еще одну вложенную, строго прописав значение её ширины: width=»600″.
Золотое правило в создании HTML кода email сообщения: если нужный атрибут (тег) существует в HTML, используйте его, и не нужно обращаться к CSS.
Этот код вложенной таблицы следует вставить вместо слова «Привет!»
1. <table border="1" cellspacing="0" cellpadding="0" align="center">
2. <tbody>
3. <tr>
5. </tr>
6. </tbody>
7. </table>
Теперь письмо выглядит вот так:
Вы заметили, что для вложенной таблицы использован атрибут <border-collapse> со значением «collapse»? Он указывает почтовым клиентам на правильность отображения границ вокруг ячеек таблицы. Если этого не сделать, более новые версии Outlook, например, в процессе обработки письма, добавят небольшое ненужное пространство между границами двух таблиц.
Мы уже говорили о том, что любой шаблон email сообщения состоит из трёх логических частей: хедер, тело письма с основным контентом, футер.
Теперь нужно отобразить это структурно в уже созданном нами шаблоне. Добавим еще две строки.
1. <tr>
2. <td>
3. Привет!
4. </td>
5. </tr>
и продублируем его несколько раз, заменив приветствие на порядковый номер строки.
Должно получиться следующее:
1. <table align="center" border="1" cellpadding="0" cellspacing="0">
2. <tr>
3. <td>
4. Строка 1
5. </td>
6. </tr>
7. <tr>
8. <td>
9. Строка 2
10. </td>
11. </tr>
12. <tr>
13. <td>
15. </td>
16. </tr>
17. </table>
Визуально:
Давайте добавим цвет фона отдельно для каждой строки. Так как в HTML существует для этого специальный тег <bgcolor>, следует использовать его вместо CSS стилей. Обратите внимание, что выбирая цвет, нужно указывать все 6 символов кода, так как сокращенные три символа могут попросту не сработать.
1. <table align="center" border="1" cellpadding="0" cellspacing="0">
2. <tr>
3. <td bgcolor="#ffa500">
4. Строка 1
5. </td>
6. </tr>
7. <tr>
8. <td bgcolor="#ffffff">
9. Строка 2
10. </td>
11. </tr>
12. <tr>
13. <td bgcolor="#1e90ff">
14. Строка 3
15. </td>
16. </tr>
17. </table>
Сосредоточимся на первой строке – это будет хедер письма.
Строка 1. Верстка хедера HTML писем
В планах – разместить в первой строке изображение с логотипом и названием компании. Но для начала нужно настроить отступы, которые будут со всех сторон изображения до внутренних границ ячейки. За это отвечает тег — <padding>.
Работая с <padding>, важно помнить о необходимости указывать каждое значение отступа (сверху, снизу, слева, справа), иначе результаты могут оказаться непредсказуемыми.
Прописывая параметры, вполне допустимо использовать краткий вариант записи, типа padding: 10px 10px 5px 5px;.
Если же возникают проблемы, их решит длинный вариант записи, типа padding-top: 10px; padding-right: 10px; padding-bottom: 5px; padding-left: 5px;.
В случае, когда почтовый клиент удаляет ваш инлайновый CSS или вносит свои правки в ваше письмо, можно пойти на хитрость. Вместо того, чтобы использовать тег <padding>, добавляйте пустые ячейки в таблице, тем самым создавая нужное пространство. Такие дополнительные ячейки будут пустыми (с кодом внутри), но с четко установленной высотой или шириной.
Например:
<tr><td> </td></tr>
Обращаем ваше внимание, что стили правильнее будет прописывать внутри тега <td>, но не внутри <p> или <div>, последние ведут себя более непредсказуемо.
В случае с нашим примером письма, мы применяем внутренний CSS для настройки отступов для изображения.
После вставки изображения, необходимо прописать alt текст, который будет видеть получатель на месте картинки, если картинки отключены почтовиком. И важно добавить параметр style=»display:block;», наличие которого гарантирует, что почтовый клиент не добавит лишних пробелов под картинкой. При необходимости, можно отцентровать изображение, добавив align=»center» в тег <td>.
Примечание. Помните, что большинство почтовых клиентов по умолчанию блокируют изображения. Поэтому напишите в alt тексте подсказку клиенту, картинка на какую тематику должна быть вместо пустого места. К тому же, не стоит на картинках писать важную уникальную информацию, которая не дублируется в письме. Ведь тогда в случае блокировки изображений, ваше письмо будет абсолютно бесполезным.
Пример кода Строки 1 с вставленным изображением:
1. <td align="center" bgcolor="#ffa500">
2. <img alt="СМС и Email маркетинг" src="E:\epochta\БЛОГ\mailer_html_img.
png">
3. </td>
Визуально:
Строка 2. Работа с контентом в HTML шаблоне письма
Для начала следует указать отступы внутри средней ячейки (второй строки), чтобы новая вложенная в неё таблица с контентом красиво смотрелась, не сливаясь с ней основными границами. Вы уже знаете, что такие отступы от сторон элемента, что будет внутри ячейки, задаются с помощью тега <padding>. Приступайте! 😉
Визуально должно получиться:
Теперь нужно подготовить место для контента. Как упоминалось выше, нужно добавить еще одну вложенную таблицу. Это будет таблица с тремя строками:
- одна – для заголовка,
- вторая – для краткого описания статьи,
- третья – для строки с двумя столбцами.
Поехали!
Ширина таблицы, которая будет во второй строке должна стоять не в пикселях, а в процентах (100%). Это нужно, если хотите, чтобы письмо было респонсивным.
Код Строки 2 с вложенной таблицей:
1.
<td bgcolor="#ffffff">
2. <table border="1" cellpadding="0" cellspacing="0">
3. <tr>
4. <td>
5. Строка 1
6. </td>
7. </tr>
8. <tr>
9. <td>
10. Строка 2
11. </td>
12. </tr>
13. <tr>
14. <td>
15. Строка 3
16. </td>
17. </tr>
18. </table>
19. </td>
Визуально:
Пишем заголовок статьи и её краткое описание. В строке с описанием можно добавить отступы для красивого отображения текста. Обратите внимание, что программа ePochta Mailer позволяет добавлять и изменять текст непосредственно в визуальном редакторе, без перехода на вкладку HTML кода.
Вложенная таблица с текстом:
1. <table border="1" cellspacing="0" cellpadding="0">
2. <tbody>
3. <tr>
4. <td>
5. Продвижение бренда в Вайбер: массовые рассылки в мессенджерах
6. </td>
7. </tr>
8.
<tr>
9. <td>
10. Cейчас Viber — это не только приложение для личных переписок, но и эффективный канал коммерческого продвижения товаров и услуг.
11. Только ленивые не говорят о том, что вайбер для бизнеса — это действительно эффективный и дешевый инструмент. Так ли это? Предлагаем проверить эти утверждения на соответствие действительности.
12. </td>
13. </tr>
14. <tr>
15. <td>
16. Строка 3
17. </td>
18. </tr>
19. </tbody>
20. </table>
Визуально:
Для последней строки таблицы мы подготовили две колонки с картинкой и текстом.
Давайте по порядку.
Во-первых, так как нам нужно расстояние между столбцами таблицы, а атрибут <margin> мы использовать не можем, то немножко схитрим и создадим таблицу с тремя столбцами. Просто средний столбец будет пустым и узким.
Основной параметр столбца – ширина. В данном случае мы будет ориентироваться на ширину картинки, которая будет размещена в нем.
Её ширина 260px. И чтобы не запутаться, высчитывая, какой же процент составляют 260 пикселей из таблицы на 540px* (а это будет 48,1%), проще будет указать известную ширину.
*Ширина вложенной таблицы 540px – это ширина основной таблицы в 600px минус отступы, по 30px с каждой стороны.
Итого, два столбца по 260 пикселей + средний пустой столбец на 20px.
Укажем также для обоих столбцов значение valign=»top», что выровняет текст по вертикали, по верхнему краю строки, независимо от количества текста в каждом столбце. По умолчанию, значение valign считается middle; не забудьте его изменить.
1. <table border="1" cellpadding="0" cellspacing="0">
2. <tr>
3. <td valign="top">
4. Колонка 1
5. </td>
6. <td>
7.
8. </td>
9. <td valign="top">
10. Колонка 3
11. </td>
12. </tr>
13. </table>
Визуально:
Добавляем изображения и контент.
Поскольку, нам снова нужны две строки, вставляем еще одну таблицу в каждую из колонок, не забывая об отступах.
1. <table border="1" cellspacing="0" cellpadding="0">
2. <tbody>
3. <tr>
4. <td valign="top">
5. <table border="1" cellspacing="0" cellpadding="0">
6. <tbody>
7. <tr><td>
8. <img alt="Картинка для колонки 1" src="E:\epochta\БЛОГ\битые картинки на блоге\iStock_000004384999XSmall.jpg"> </td>
9. </tr>
10. <tr>
11. <td>
12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
13. </td>
14. </tr>
15. </tbody> </table>
16. </td>
17. <td>
18.
19. </td>
20. <td valign="top">
21.
<table border="1" cellspacing="0" cellpadding="0">
22. <tbody> <tr>
23. <td>
24.
25. <img alt="Картинка для колонки 3" src="E:\epochta\БЛОГ\битые картинки на блоге\greed.jpeg"> </td>
26. </tr>
27. <tr>
28. <td>
29. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
30. </td>
31. </tr>
32. </tbody> </table>
33. </td>
34. </tr>
35. </tbody> </table>
Визуально:
Строка 3. Создание кода футера HMTL письма
Основные компоненты футера – контакты компании и ссылка отписки. Как видите, это два разных элемента и нам снова нужно разделить строку на две колонки с помощью дополнительных таблиц.
Чтобы не забыть, сначала добавим отступы, а после – таблицы.
Отступы:
<td bgcolor="#1e90ff ">
Строка 3
</td>
Визуально:
Разделяем строку на две колонки с помощью дополнительной таблицы.
1. <table border="1" cellpadding="0" cellspacing="0">
2. <tr>
3. <td>
4. Колонка 1
5. </td>
6. <td>
7. Колонка 2
8. </td>
9. </tr>
10.</table>
В данном шаблоне первая колонка будет для контактных данных компании, вторая – для ссылки отписки. Вы можете добавлять иконки соцсетей, изменять количество колонок и расположение информации абсолютно в любом формате.
Дополнительная таблица с информацией футера:
1. <table border="1" cellspacing="0" cellpadding="0">
2. <tbody><tr>
3. <td>
4. <p>Компания ePochta<br>
5. [email protected]</p>
6. </td>
7. <td align="right">
8. Вы получили это письмо как клиент нашей компании.
Чтобы отписаться от рассылки, нажмите на ссылку ниже.
9. </td>
10. </tr>
11. </tbody></table>
Визуально:
Вы заметили, что текст во второй колонке футера выровнен по правому краю? Это возможно благодаря атрибуту align=»right» для тега <td>.
Шаблон готов!
Верстка дизайна шаблона email рассылки
Первая часть статьи касалась структуры макета электронного сообщения. Сейчас же мы немного поговорим об оформлении и дизайне.
Возможностями встроенного CSS вы можете изменять параметры шрифта – использовать тег <b> или <strong> для жирного шрифта, прописывать размер и название непосредственно семейства шрифта.
Возьмем для примера заголовок статьи «Продвижение бренда в Вайбер: массовые рассылки в мессенджерах» в уже созданном шаблоне и зададим ему следующие параметры:
1. <td><p align="center">
2. Продвижение бренда в Вайбер:<br>массовые рассылки в мессенджерах
3. </p></td>
Посмотрите, как изменился текст:
Теперь уберем границы таблиц, которые мы оставляли, чтобы было визуально легко отследить изменения в структуре. Для этого на вкладке HTML код нажмите CTRL+F или перейдите в меню Правка – Найти. В открывшемся диалоговом окне выберите функцию Заменить и задайте значение border=»1″ заменить на тег border=»0″. Перейдите во вкладку Сообщение – все границы пропали, перед вами чистый готовый макет email сообщения.
При желании, можно оставить границу для основной таблицы в 600px, сделав её мало заметной, например:
<table align="center" cellspacing="0" cellpadding="0">
Добавим небольшой отступ в самой первой строке, чтобы фон не прилипал к самому верху страницы: 1. <table border="0" cellspacing="0" cellpadding="0">
2. <tbody>><tr>
3. <td>
А теперь – проба пера: отправляем письмо на тестовый email адрес.
Вы можете как создать список из десятка адресов на различных почтовых клиентах и запустить тестовую рассылку, так и отправить одно письмо с помощью меню Проба, указав один адрес получателя сообщения.
Вот так созданный шаблон выглядит в Gmail
Создавайте собственные брендовые email шаблоны, тестируйте и радуйте клиентов красочными рассылками. ePochta Mailer обладает мощнейшим функционалом для создания сообщений. В статье основной задачей было самостоятельно написать код шаблона, поэтому мы не затрагивали возможности программы. Детальнее о ePochta Mailer вы можете прочитать на нашем сайте.
И пусть клиенты с удовольствием читают ваши рассылки!
11 правил верстки email-рассылок
Email-рассылка до сих пор стоит в лидерах по самым эффективным способам общения с клиентами. С помощью рассылки можно донести информацию о важных изменениях, акциях и самое приятное — можно вернуть старых клиентов.
В этой статье я хочу поделиться важными вещами на которые стоит обратить внимание при работе с рассылкой.
В ходе работы я сталкивался с различного рода проблемами, на решение которых мне приходилось тратить немало времени. Одна из самых основных проблем, с которой я столкнулся — обилие почтовых клиентов (Outlook, Yandex, Gmail, Mail.ru и другие).
У почтовых сервисов нет общих правил отображения html писем, поэтому одно и то же письмо может отображаться по-разному.
- Первое, на что следует обратить внимание — это ширина email-рассылки. Для того чтобы письмо гарантированно поместилось в рабочее поле без прокрутки, рекомендуется устанавливать максимальную ширину в 600 пикселей.
-
Также не стоит забывать и о мобильной версии. Процент писем открываемых с мобильных устройств уже составляет 50% и постоянно растет.
-
Для мобильной версии необходимо учитывать дизайн так, чтобы письмо выглядело валидно при размере в 320 пикселей.
-
Ширина в Gmail считается немного иначе. Если контент письма будет больше 320 пикселей, то на маленьких экранах он будет вылазить за границы, что приведет к малоприятным последствиям.
- При работе следует использовать только стандартные шрифты, которые установлены на всех устройствах — Arial, Helvetica, Tahoma, Verdana, Georgia и др. Это обусловлено тем, что в email-рассылках нельзя подключить другие файлы, а многие почтовые клиенты не воспринимают тег <style>.
-
Для корректного отображения письма нужно использовать встроенные (inline) стили и прописывать их каждому взятому элементу. Это поможет предотвратить последующие проблемы с добавлением стилей другими почтовыми клиентами.
- Малопривлекательная картина складывается и с отступами. Они также везде воспринимаются по-своему. Некоторые почтовики видят отступы только в теге <td>, поэтому предлагаю делать их с помощью свойства padding, вписывая его в тег <td>, т.к. margin воспринимается меньше, чем padding. Такой вариант отступов воспринимается во всех клиентах.
-
Если вы хотите, чтобы ваши изображения везде отображались одинаково, включая мобильные устройства, указывайте размеры изображения через свойства width и height. В противном случае, вы рискуете увидеть фактический размер изображения, что может неблагоприятно сказаться на всем письме.
- К большому сожалению, при работе с email-рассылками мы ограничены небольшим рядом инструментов. Это касается и фона в виде картинок. Рекомендую отказаться от него, ведь в большинстве мейл-клиентов и интерфейсах он просто не поддерживается.
- Чтобы получить кнопку с красивым фоновым изображением, которая будет стабильно отображаться на всех платформах, изначально сделайте её с текстом в виде изображения.
- Для того чтобы ссылка в вашем письме везде выглядела одинаково, оберните её в тег <span> и продублируйте ему стили данной ссылки. Так вы сможете избежать определенного вмешательства от почтовиков.
Подходя к итогу хочу отметить, что в дизайне и разработке email-рассылок есть огромное количество тонкостей и нюансов, которые следует учитывать. Соблюдая приведенные в статье правила можно минимизировать вмешательство различных платформ и привести email-рассылку к валидному отображению.
Учимся правильно верстать письма: рекомендации и требования
Верстка писем для email-рассылок может стать серьезным испытанием даже для тех, кто отлично знаком с HTML. Некоторые почтовые сервисы будут некорректно отображать тело письма, в мобильной версии все может «разъехаться», а некоторые письма отправятся в спам. Рассказываем, что нужно для грамотной верстки.
Основные правила верстки рассылок
- Таблицы HTML. В случае с email-рассылками не так важно, что это устаревший метод верстки. Новые версии HTML не поддерживаются некоторыми почтовыми сервисами. Поэтому для создания функционального тела письма, которое будет без ошибок открываться на всех устройствах, нужно использовать таблицы. Главную таблицу, которая формирует контент письма, нужно поделить на ячейки, внутри которых можно поместить другие таблицы с необходимыми блоками (текстом, картинками, ссылками и т.д.).
- Inline-CSS. Это встроенные стили языка, который отвечает за внешнюю часть нашего письма. Если использовать новые версии CSS, дизайн письма может отображаться некорректно при просмотре в некоторых почтовых сервисах. Чтобы этого избежать, нужно описать CSS в качестве атрибута внутри HTML. Это займет больше времени у верстальщика, зато такой метод признан самым надежным.
Вот несколько советов по CSS: не стоит использовать элемент link, сократите частоту употреблений тегов и следите за тем, чтобы данные об основном шрифте постоянно располагались рядом с контентом.
- Ширина письма. Она не должна превышать 600 px. В ином случае ваше письмо будет растянуто некоторыми почтовыми клиентами, а у пользователя снизу появится полоса для прокрутки страницы в сторону.
- Универсальные теги. Часть сервисов не воспринимает некоторые теги. К примеру, не читается всеми почтовыми клиентами, где-то возникают проблемы даже с . Поэтому используйте в верстке универсальные теги, с которыми хорошо взаимодействуют все сервисы.
«Едет» верстка. Что делать?
Совершенно нормально, если на стадии проверки в почтовом сервисе будут проблемы с футером (подвалом письма) или в другом клиенте съедет вбок хедер (верхушка письма). Это происходит из-за того, что почтовые сервисы используют различные требования для рендеринга писем. Именно для того, чтобы верстка никуда не «съехала», нужно четко следовать правилам из предыдущей главы. Чаще всего проблему решит использование таблиц HTML и встроенные стили CSS.
Выбираем безопасные шрифты
Проблема все та же – почтовые сервисы могут не воспринимать, например, авторские шрифты, из-за чего пострадает верстка. Для письма стоит выбирать из ограниченного списка проверенных шрифтов. Tahoma, Georgia, Helvetica являются безопасными для email-рассылок. Новые или креативные шрифты при необходимости используйте сразу на изображениях – размещайте прямо на картинки перед заливкой в верстку.
Источник reallygoodemails.comВерстка для телефонов и планшетов
Большое письмо, использующее всю ширину десктопа, в мобильной версии может превратиться в не читаемый кошмар. Поэтому стоит сделать некоторые подстройки для верстки.
Основную часть проблем решит использование запроса @media. С его помощью можно настроить размер блоков внутри письма. Они будут уменьшаться в зависимости от разрешения экрана, на котором будет открываться письмо. Медиа-запросы работают только для приложений и мобильных версий, почтовые сервисы на ПК их проигнорируют. Чтобы блоки в вашем письме не налезали друг на друга, нужно аккуратно подойти к дизайну письма.
Для простоты можно придерживаться двухколоночной модели. При верстке распределяйте блоки таким образом, чтобы при делении письма на две колонки ни один элемент не ломался посередине. Каждую колонку поместите в отдельную HTML-таблицу, а для неделимого блока используйте медиа-запрос. В таком случае в мобильной версии блоки вашего письма выстроятся друг под другом, а неделимый элемент уменьшится.
Не забывайте, что для мобильных устройств и планшетов нужно также прописать уменьшение кегля.
Верстка под почтовые сервисы – Gmail, Outlook 2007
Эти почтовые клиенты пользуются устаревшими методами рендеринга, поэтому на них нужно особенно внимательно тестировать свои письма. Например, Gmail будет убирать прописанные CSS-стили, которые найдет между тегами стилей. Поэтому нужно заранее прописать их внутри HTML-таблиц. Также для фона письма нужно пользоваться bgcolor, а не доверять CSS. Этот язык особенно плохо воспринимается в Outlook 2007. В Gmail все тело письма может немного уехать в правую сторону, поэтому нужно отрегулировать размер ячеек. Десяти пикселей вполне хватит, чтобы текст не вышел за рамки левой части фона письма. В остальном же использование универсальных тегов и безопасных шрифтов поможет правильной верстке на этих сервисах.
Как не попасть в спам?
Нужно проследить, чтобы в вашем письме был не только HTML, но и plain text. То есть письмо в виде только текста. Большая часть сервисов, которые помогают делать email-рассылки (например, Sendbox от Mail.ru для бизнеса), автоматически добавляют plain text. Но лучше всегда проверять его наличие. Также спам-фильтры почтовых клиентов не любят, когда тело письма состоит из одной картинки или когда туда встроены Flash или JavaScript. С помощью последних элементов злоумышленники могут отправлять вирусы, поэтому почтовые службы очень строго следят за их использованием.
Редиректы и укороченные ссылки также увеличивают шансы попасть в спам, как и частое использование Caps Lock. Никакой почтовый сервис не пропустит письмо, если в нем не будет кнопки, с помощью которой можно отказаться от рассылки.
Как тестировать письма?
Существует достаточно сервисов для проверки визуального вида письма (например, litmus.com). Удобно, что в одном месте можно увидеть, как письмо будет смотреться в различных почтовых клиентах и при любых разрешениях экрана. Однако ручной метод проверки – самый надежный. В таком случае можно «пощупать» письмо и лично убедиться, что все в порядке.
Правила верстки email-рассылки | DashaMail
Несмотря на прекрасный онлайн-редактор, который мы последовательно улучшаем и дополняем на ДашаМейл, некоторые наши клиенты предпочитают использовать собственные html-макеты. Иногда это связано с жесткими правилами бренд-бука, иногда – с наследством, оставшимся от предыдущих маркетологов. В любом случае, это право мы уважаем и стараемся помогать нашим клиентам делать email-рассылки адаптивными и прекрасно выглядящими в различных почтовых клиентах и браузерах. Ведь, как известно, существует множество почтовых клиентов и программ:- веб-версии почтовиков (Gmail, Yandex, Mail, Yahoo итд.)
- десктопные программы (Outlook, Mail, Mozilla Thunderbird и даже Bat)
- мобильные почтовые клиенты (Iphone, Ipad, различные версии Android итд)
1. Верстка таблицами
Если вы хотите простого и надежного решения, то таблицы – это самый очевидный выбор. Он однозначно убережет вас от проблем со старыми почтовыми клиентами. Не стоит забывать и о браузерах, которыми открывают веб-версии почтовиков, некоторые из них могут оказаться IE7 или даже, боже упаси, IE6.2. Проверять универсальность поддержки аттрибутов у HTML-тегов и CSS-свойств
Мы подготовили специальную таблицу, которая позволит вам быстро и просто проверять поддержку различных аттрибутов и свойств в 10-ти самых популярных почтовых клиентах. Если вы не уверены в чем-то, то не стесняйтесь, загляните в нее и проверьте свои предположении о корректности вашей верстки.3. Забудьте про блочные CSS
Использование CSS рекомендуется строго inline. Конечно, это может вызывать мучения при ручном формировании html-кода, поэтому ДашаМейл предлагает использовать данный инструмент автоматически – сразу после загрузки html-кода на 2-м шаге создания рассылки.4. Ширина письма в 600 пикселей
Многие десктопные почтовые клиенты имеют максимальную область просмотра письма примерно равную 600px, что позволяет нам вместить письмо, оставив небольшие поля. 600 также кратно 1-2-3-4-5-6, что позволит вам реализовать нормальную адаптивную мультиколоночную структуру без использования “говна и палок”. Если 600 разделить на 9, то получится дофига шестерок. Это, в принципе, никак не применимо, но просто прикольно. В общем, как говорится, “не рефлексируйте – распространяйте”.5. Media-query не очень круто.
Поддержка media queries в большинстве почтовых клиентов ограничена, например, она тупо отключена в почтовых клиентах Gmail, как в браузере, так и в мобильных приложениях. Достигнуть адаптивности без использования этого компонента CSS можно, хоть и немного заморочено. Но я верю в вас, мои юные падаваны. Использование этих 5-ти правил позволит вам создать корректный html-код, универсально отображаемый во всех почтовых клиентах и браузерах, а это значит, что все ваши подписчики будут испытывать глубочайшее удовлетворения от ее созерцания у себя в почтовом ящике. Да будет так! С любовью, Даша.Поделитесь статьёй со своими друзьями:
Даша Савицкая
Поставьте оценку
4/5
Загрузка…Подпишись на рассылку новостей
Только полезная и актуальная информация без спама
Дизайн и верстка писем для рассылки
Безграничные возможности креативной верстки email рассылки, применение графических элементов и интересного наполнения — привлекают внимание клиента. Подобные письма не отправляют в спам.
Создание письма для рассылки
Для успешного применения системы Email-маркетинга недостаточно простой логики рассылки и письма с предложением. Для привлечения внимания информация должна подаваться в красивой «обертке», с нужными ссылками и привлекательными изображениями. Первое впечатление от письма — это внешняя оболочка, наполнение вторично.
Продающие письма для рассылки это дополнительный канал коммуникации и продаж для клиентов. Пользователям ежедневно приходит около сотни писем, вы должны привлечь внимание аудитории «ярким» и захватывающим заголовком и предложением внутри. Для успешной реализации дизайна и верстки писем для рассылки вы должны продумать стратегию реализации проекта:
- продумать идею и грамотно выстроить серию писем;
- выделить главное, завоевать доверие клиента, предоставив интересный продукт;
- письма должны побуждать к действию, мотивировать на приобретение продукта;
- привлекательный дизайн, профессионалы сделают html верстку писем для рассылки.
Специалисты позаботятся об адаптивной верстке email писем, чтоб дизайн великолепно смотрелся на любом девайсе. Если у вашего интернет-магазина нет фирменного стиля, то мы сделаем общий брендированный макет письма, который будет основой для рассылки. Маркетинг — это умение вызывать эмоции у человека, формировать желание что-либо купить. Мы профессионалы в данном направлении, поэтому результат работы всегда превосходный.
Верстка html писем
Работа по созданию email рассылки делится на 4 этапа:
- Идея продвижения продукта/услуги и ее реализация в текстовом формате.
- Дизайн письма для рассылки.
- Верстка электронных писем.
- Тестирование результата на всех платформах и почтовых сервисах.
Максимального эффекта писем можно достичь, если каждое звено процесса будет четко и качественно выполнять поставленную задачу. Профессиональные верстальщик и дизайнеры возьмут на себя настройку функционала и техническую основу письма с учетом верстки для конкретных почтовых клиентов. Письмо будет корректно отображаться на всех платформах — это называется кроссмейлерной версткой.
Простые узнаваемые шаблоны, правильная ширина, информация о компании и форма отписки — если все это учесть, ваша рассылка будет вызывать доверие, и у клиента не возникнет и мысли нажать кнопку “спам”.
Что вы получите?
- Сверстанные по всем правилам кроссмейлерные письма
- Точное красивое оформление
- Высокий CTR
- Малый показатель отписок, добавления в спам
- Продуманный текст, таргетирование рассылок
- Эффективную сегментацию
- Корректное отображение писем в большинстве почтовых клиентов
- Правильную техническую настройку процесса рассылок
Верстка email-рассылки: Чек-лист для маркетолога
Нарисовать макет и сверстать email-рассылку не так сложно: дизайнеров с хорошим вкусом предостаточно. Для тех, кто хочет разобраться самостоятельно, в сети полно контента, как по графическим редакторам, так и по техническим аспектам верстки. Сложность в другом: как сверстать максимально эффективную рассылку с точки зрения маркетинга?
Однозначно гарантировать результат невозможно: все зависит от контента и ценностного предложения рассылки. Но улучшить пользовательский опыт и повысить ключевые показатели, так любимые маркетологами, реально. Только придется плотно поработать с элементами верстки. В данной статье собран чек-лист наиболее важных деталей рассылки с практическими советами из опыта DigiVox.by.
Полноценная верстка email-рассылки включает:
Тему письма
Хедер
Заглавный баннер
Текст
Изображения
Кнопки и ссылки
Футер
Блок ссылок на аккаунты
Тема письма
На первый взгляд, тема сообщения – вовсе не элемент верстки, а простой текст, который вводится в соответствующее поле. Но при тестировании рассылки часто происходит так, что тема не умещается в строку почтового сервиса. Особенно это касается PUSH-уведомлений на мобильных устройствах. А от этого во многом зависит, откроют ваше письмо или нет.
Поэтому, хороший заголовок – один из самых важных элементов верстки. Не стану вдаваться в детали, подробный материал о заголовках в email-рассылках читайте здесь. Отмечу лишь 3 главных правила хорошей темы письма: лаконичность, персонализация и отчетливость информационного послания.
Материал по теме: Тема письма в email-рассылках
Хедер
Хедер рассылки (по аналогии с сайтом) – самый верхний блок, в котором содержится общая информация. В хедере размещается логотип, слоган, контакты или панель быстрых ссылок.
Хедера в рассылке может и не быть, это не критично. Но так пользователи лучше запомнят вашу компанию и вероятность повторных открытий увеличится. В современных рассылках лучше не злоупотреблять с количеством деталей в хедере. Кликабельность ссылок крайне низкая, а макет серьезно нагружается. Логотипа и слогана вполне достаточно.
Главный баннер
Главный баннер – графическое изображение, которое раскрывает тему письма и носит рекламный характер. Как правило, главный баннер рассылки является адаптированной версией баннеров для сайта или контекстно-медийной сети. Но также может быть и отдельным макетом, если вы делаете уникальные предложения через email.
2 наиболее популярных вида баннеров в email-рассылке: статичные и анимированные (с использованием GIF-анимации). Какой из них выбрать? Однозначно, GIF-баннеры значительно лучше привлекают и удерживают внимание пользователей. Но окончательный выбор зависит и от других факторов. Например, от дизайн-решения или времени на подготовку рассылки.
Текст
Текст позволяет подробно раскрыть тему письма или баннера. Это может быть как рекламное, так и информационное сообщение. Нередко встречаются примеры, когда текст и вовсе занимает большую часть рассылки.
Оптимальная длина текста зависит от стиля email-рассылок. В усредненной модели лучше не графоманить, отдавая предпочтение изображениям с короткими сообщениями. С другой стороны, спам-фильтры не очень любят короткие тексты. Поэтому, рекомендую сохранять баланс между этими видами информации. Кроме того, не забывайте о заголовках и шрифтах. Как и тему письма, основной текст желательно персонализировать.
Изображения
Дополнительные изображения используются в дайджестах (если в рассылке несколько новостей) и для презентации товаров/услуг.
Картинки в рассылке не должны быть слишком большими. Это касается и веса самого файла, и размера по высоте. В первом случае рассылка потребляет много трафика, что вряд ли понравится пользователям мобильного интернета. А «высокие» изображения занимают пространство верстки и вынуждают много скроллить до текста или кнопки.
- Оптимальный вес картинки в рассылке: до 70 кб (баннеры) и до 20 кб (миниатюры)
- Оптимальное соотношение сторон: 1:1 и близкие к нему (600 px x 500 px, 600 px x 650 px)
Кстати, по своей сути, главный баннер – такое же изображение. Названные правила желательно соблюдать и для него.
Кнопки и ссылки
Кнопки и ссылки решают одну из главных задач рассылки: приводят подписчиков на ваши целевые ресурсы. Это могут быть лендинги, видео, страницы товаров, услуг и т.д.
Что лучше, текстовая ссылка или кнопка? У кнопок более высокий CTR, но и от дублирования в тексте отказываться не стоит. Кроме того, люди любят кликать по картинкам. А значит, и на них лучше вешать ссылки.
Сколько должно быть ссылок в рассылке? Логика простая, больше ссылок – больше кликов. Но этим не стоит злоупотреблять. Интерфейс письма должен быть удобным и понятным. И если цель рассылки – конкретное действие подписчика (например, регистрация на вебинар или посещение определенной страницы сайта), то лучше не распыляться.
Футер
Футер (по аналогии с сайтом) – нижний блок рассылки с ключевой контактной информацией. В нем размещается логотип, контактные телефоны, email для обратной связи, режим работы и пр.
В футере также можно добавлять быстрые ссылки на разделы сайта. Но по статистике, чаще всего кликают по логотипу. В целом, футер – скорее как печатная визитка. Мало кто пользуется, но по этикету оставлять стоит.
Ссылки на аккаунты
Отдельным блоком или частью футера является панель ссылок на профили в социальных сетях.
Из опыта могу сказать, что блок чаще носит декоративную функцию и воспринимается как элемент дизайна. Кликов по ссылкам на социальные сети практически нет, если сравнивать с основным контентом. Но есть другой аспект: наличие блока говорит об открытости и формирует доверие со стороны подписчика.
Шаблон чек-листа
Информации в статье много, всего сразу не запомнишь. Поэтому, в качестве бонуса, мы разработали чек-лист для верстки email-рассылки, в котором собраны все перечисленные пункты. Пользуйтесь им на начальном этапе, пока работа с письмами не доведется до автоматизма.
Чек-лист email-рассылки (Google Sheets) >
Итоги
Мы рассмотрели наиболее распространенную модель верстки email-рассылки. Такой формат актуален для большинства бизнесов из сферы торговли и услуг. Но не исключено, что даже без половины перечисленных элементов, рассылки будут показывать высокие результаты. Как и наоборот, наличие всех элементов не гарантирует высоких показателей открытий и кликов. Модель условна. Поэтому, единственно верный путь – экспериментировать, прислушиваться к подписчикам и постоянно совершенствоваться. А заказать готовую верстку писем для email-рассылок можно в DigiVox.by.
Вёрстка HTML писем — WOW EMAIL
Команда email разработчиков предлагает свои услуги PSD to Email.
* * * * *
Создание email шаблонов любой сложности для сервисов рассылок:
MailChimp, Campaign Monitor, UniSender, Sendsay, SendPulse,
HubSpot, Marketo, SendGrid,
StampReady и др.
* * *
Разработка адаптивных писем с медиа запросами.
Почта [email protected]
Скайп teamwowemail
Успешно выполнили вёрстку более 12 000 HTML писем
Соблюдаем
Pixel PerfectУспеваем выполнить
заказ за 1-2 дняГарантируем
NDA
Оживляем любой креативный дизайн
Передаем компактный
и чистый HTML кодТестируем на моб. устройствах
Консультируем
еще до разработкиРаботаем с форматами: PSD, PDF, PNG…
Выполним запрос
шаблон для MailChimpВыполним запрос
шаблон для CMВыполним запрос
шаблон для StampReady
Выполним запрос
шаблон для SendGridВыполним запрос
шаблон для MarketoВыполним запрос
шаблон для HubSpot
Многие маркетологи научились сочетать низкую стоимость рассылки с ее высокой возвратной доходностью
Еще в 2014 году email-маркетинг обогнал SEO по показателям рентабельности.
AdestraMarketingCensus
Адаптивные письма
Адаптивные письма (responsive email) — современная технология вёрстки HTML писем, которая изменяет дизайн на мобильных устройствах, делая их удобными для отображения на небольших экранах.
Узнать больше…Помните, что открытие писем на мобильных устройствах увеличилось на 30%
Не оставляйте вопросы на завтра, если ответы можно получить сегодня.
Пишите в скайп teamwowemail или на почту [email protected]. Постараемся незамедлительно ответить.
Ознакомьтесь с разделом FAQs.
Сервис для Email и интернет маркетологов, а так же специалистов, занимающихся Email рассылками. Пополняемая в реальном времени, коллекция электронных писем для поиска идей, мониторинга трендов email-маркетинга и наблюдения за конкурентами.
Рекомендуем полезные книги
Заказать HTML письмо14 дизайнов электронного маркетинга, которые стоит протестировать в 2020 году
Электронный маркетинг никуда не денется в ближайшее время. Факт остается фактом: людям нравится электронная почта: она быстрая, эффективная и действенная. В 2019 году общее количество деловых и потребительских электронных писем, отправляемых и получаемых в день, достигло 293,6 миллиарда, и ожидается, что к концу 2022 года оно превысит 347,3 миллиарда.
Чтобы идти в ногу со временем, необходимо будет и дальше развиваться передовой опыт дизайна электронной почты, маркетинговые стратегии и тактики, чтобы идти в ногу с улучшениями в технологиях.Тенденции дизайна электронного маркетинга в 2020 году будут диктовать привлекательный опыт, поскольку маркетологи воспользуются преимуществами развития автоматизированной электронной почты для получения большего дохода от приветственных писем, писем о брошенных корзинах и других сообщений электронной почты с клиентами.
Ниже мы перечислили 14 лучших тенденций и идей в области дизайна электронных рассылок, которые вы можете протестировать в 2020 году и сделать ваши усилия по электронному маркетингу блестящими.
Источник изображения: https://www.betaout.com1. Интерактивность — одна из последних тенденций дизайна электронного маркетинга
Боковые панели и ссылки в электронных письмах — это только начало интерактивности, которую мы можем ожидать от поддержки контента электронной почты как тенденции дизайна электронного маркетинга в 2019 году.Электронные письма по-прежнему будут отображаться в виде микросайтов в почтовых ящиках потребителей.
Незначительные взаимодействия были основной тенденцией в дизайне электронной почты в 2019 году, и они будут продолжать широко использоваться в 2020 году вместе с:
- Гамбургер-меню и параметры поиска
- карусели
- галерея изображений
- показывает предложение
- возможность добавления в корзину
Эти второстепенные взаимодействия возникли как тенденции в дизайне электронной почты, направленные на снижение барьеров для взаимодействия и получение кликов с высоким намерением.
2. Улучшение анимации в электронных письмах с помощью анимированных PNG
Хотя анимация, как и использование GIF, была популярна в электронной почте уже довольно давно, это не остановило тренд анимированной электронной почты от повышения уровня. Популярность анимированных PNG (APNG) растет из-за того, что они более широко поддерживаются почтовыми клиентами, чем CSS-анимация. APNG допускают больше цвета и прозрачности, чем GIF, но если ваша почтовая платформа не поддерживает APNG, формат позволяет использовать GIF в качестве второго варианта.APNG также обеспечивают уровень взаимодействия с пользователем, поскольку анимацию можно включать и выключать с помощью переключателя в вашем электронном письме.
Источник изображения: https://emailmonks.com3. Повышение уровня персонализации и сегментации
Динамический контент, основанный на различных источниках информации, поможет маркетологам общаться с людьми. С появлением больших данных контент теперь может извлекаться из огромного количества разнообразной информации о потребителях, чтобы создавать самые инновационные дизайны электронной почты и веб-сайтов.Правильное использование этой тенденции в дизайне электронной почты при создании персонализированных сообщений может повысить открываемость на 26%.
С небольшой помощью технологии искусственного интеллекта для обработки огромных объемов информации тенденции дизайна информационных бюллетеней электронной почты будут включать в себя акцент на мастер-шаблоны, которые позволяют добавлять индивидуальный контент. В результате получится красивое электронное письмо, которое будет выглядеть и ощущаться как личное. сообщение. Персонализация также является определяющей тенденцией в веб-дизайне в 2020 году. Технология чат-ботов будет усовершенствована как инструмент искусственного интеллекта для инновационного дизайна веб-сайтов, и теперь эти инструменты смогут более плавно и плавно общаться с пользователями.
Источник изображения: https://www.pinterest.com4. Тенденции дизайна информационных бюллетеней для Интернета и электронной почты на 2020 год приглашают вас уверенно использовать цвет
Блокировка цветов, контрастные цвета для привлечения внимания к вашему призыву к действию и яркие фоны, связывающие вместе все элементы дизайна электронной почты, — это тенденции, которые сохранятся в 2020 году. Те же характеристики определяют это как тенденцию веб-дизайна, которую следует наблюдать и в 2020 . С ростом количества изображений-героев на веб-сайтах появляется прекрасная возможность использовать высококачественные красочные фотографии, которые производят впечатление на посетителей.Каждый пример этого тренда электронного письма и веб-сайта, который вы видите, можно легко воспроизвести и использовать для собственного вдохновения.
Источник изображения: Litmus
5. Дизайн электронного письма для темного режима
Однако не каждое электронное письмо требует яркого фона. Темный режим стал популярным предпочтением, поскольку многие операционные системы и мобильные приложения предлагают пользователям выбор между чтением текста на светлом или темном фоне. Приложения электронной почты также предлагают темный режим, и ваши электронные письма должны быть разработаны так, чтобы они выглядели великолепно, независимо от цвета фона.
Изображения и логотипы — это то, что вам нужно больше всего учитывать при разработке электронных писем для темного режима. Вот о чем следует подумать:
- Цвета изображения должны одинаково контрастировать на белом или темном фоне. При разработке кнопок с призывом к действию или других графических элементов изображения обратите внимание на голубой или оранжевый цвет. Для изображений
- JPG может потребоваться переключение на PNG или SVG с прозрачностью, чтобы читатели не увидели изображения в белых рамках на темном фоне.
- Примите темный режим с самого начала и начните с темного фона при создании электронной почты.Если почтовое приложение или пользователь еще не используют темный режим, темный фон все равно будет выделяться на фоне множества других писем аналогичного цвета.
6. Минималистичный, простой и чистый дизайн
Мобильные телефоны остаются наиболее распространенными устройствами для доступа к электронной почте, поскольку мы вступили в новое десятилетие. С меньшим пространством и меньшим объемом внимания на этой платформе по сравнению с настольными компьютерами, тенденции веб-дизайна и дизайна электронной почты в 2020 году ориентированы именно на мобильные устройства.Попробуйте более простое содержание электронной почты, которое легче использовать в дороге, с четкими и легкими для выполнения призывами к действию.
Источник изображения: https://www.pinterest.com7. Поддерживайте порядок и заказывайте
Хорошо сбалансированный дизайн, который легко использовать, всегда будет в списке последних тенденций дизайна электронной почты. Организуйте контент так, чтобы читатели могли отправиться в путешествие и указывать им, как перемещаться по электронной почте. Одна из самых инновационных тенденций в дизайне веб-сайтов — это макет карточек. Став популярным на таких сайтах, как Pinterest, электронная коммерция и другие компании начинают использовать этот формат для увеличения CTR и сохранения заинтересованности пользователей.Также имейте в виду, что несколько тенденций в дизайне электронной почты за последнее десятилетие сохранят актуальность и в 2020 году. К ним относится эффективное использование пустого пространства, чтобы ваши изображения и текст не были перегруженными. Таким образом вы передадите много информации в ясной, организованной и привлекательной форме.
Источник изображения: DesignModo
8. 3D-изображения сделают ваш дизайн электронной почты популярным
Создание или разработка 3D-изображенийдля отправки по электронной почте может занять много времени, но результаты того стоят.3D-изображения помогают создать глубину резкости и сделать продукты или сообщения более яркими и реалистичными по сравнению с традиционными 2D-изображениями. Независимо от того, создаете ли вы текст в 3D или создаете эффектную постановочную фотографию, 3D сделает ваши изображения более реалистичными и привлекательными.
Источник изображения: Magic Spoon
9. Текстурированные иллюстрации сохранят актуальность 2D-изображений
Если вы не готовы начать использовать 3D-изображения, не волнуйтесь; Есть еще множество способов выделить ваши 2D-изображения и привлечь внимание читателей.Добавление текстуры и затенения к изображениям и иллюстрациям придаст вашим письмам некоторую глубину и добавит тактическое представление объектам. Играя с различными текстурами, цветовыми контрастами, градиентами, оттенками и узорами, вы можете взять простое изображение и придать ему совершенно новый аспект или эмоцию.
Источник изображения: https://www.pinterest.com10. Используя тенденции в дизайне электронной почты, убедитесь, что дизайн совпадает с копией
.Изображения, шрифт и текст, которые соответствуют сообщению и персонажу бренда, — это одна из тенденций интернет-маркетинга и электронного маркетинга, которую вам необходимо протестировать в 2020 году.Это помогает установить идентичность вашей компании и делает вас мгновенно узнаваемыми для потребителей. Кроме того, это сохраняет ваше сообщение сбалансированным и организованным. Учитывая важность типографики как тенденции в дизайне веб-сайтов и электронной почты, вы можете использовать шрифты, чтобы определить свой бренд совершенно по-новому. Некоторые аспекты типографики, с которыми вы можете повозиться, включают размер шрифта, тип шрифта и вертикальный интервал между строками.
Источник изображения: https://www.pinterest.com11. Монохромный
В отличие от уверенного использования цвета и перевода электронной почты в темный режим, монохромный вернулся в 2019 году и останется повсеместным трендом в дизайне электронной почты и веб-сайтов в 2020 году, но это нужно делать правильно.Черно-белая шкала также входит в число последних тенденций веб-дизайна и дизайна электронной почты, за которыми стоит следить. Эта цветовая палитра (или ее отсутствие) создает поразительные контрасты и может выделить другие элементы вашего электронного письма или веб-страницы.
12. Разделяй и властвуй
Делите информацию по-новому. Эта тенденция к информационным бюллетеням в Интернете и по электронной почте в 2020 году означает использование горизонтального деления, геометрического дизайна или угловой сетки, которые придают одинаковую важность нескольким сообщениям в одном электронном письме, сохраняя при этом порядок и визуальный интерес.Один из способов сделать это — назначить приоритет одному объявлению в верхней части электронного письма, а затем придать равный вес другому контенту в их собственных блоках. Другой вариант — библиотека значков. Этот вариант формата — одна из отличных идей для дизайна веб-сайтов, поскольку он улучшает организацию и делает страницу более эстетичной. Библиотеку значков можно легко реализовать как тенденцию дизайна электронного маркетинга в 2020 году, отформатировав содержимое электронной почты в значки.
Источник изображения: https://www.pinterest.com13. Измените традицию с помощью новой электронной почты и идей дизайна веб-сайтов
Не поддавайтесь старым шаблонам праздничного дизайна.Вместо этого измените их и модернизируйте, используя последние тенденции дизайна электронной почты 2020 года, чтобы выделиться из толпы и дать своим подписчикам что-то, что порадует их своей уникальностью. Вы можете использовать образы, которые являются данью традиции и переосмысливают ее так, чтобы потребители это оценили. Одна из тенденций в ретро-веб-дизайне, которая с размахом возвращается, — это глитч-арт. Глитч-арт придает вашему веб-сайту или электронной почте психоделический вид, которого пользователи жаждут в 2020 году. Попробуйте включить эту тенденцию в дизайне информационных бюллетеней в 2020 году с видео, APNG или другим динамическим контентом, который привлечет внимание зрителей и выделит вас среди конкурентов.
14. Be [info] Graphic
Иногда нам нужно донести до клиентов много информации. Точно так же, как тенденции в дизайне электронной почты, использующие анимацию и APNG, могут помочь вам избежать необходимости в большом количестве текста, получение наглядного изображения с помощью инфографики и визуальных карт помогает передать большой объем статистической информации таким образом, чтобы читатель мог легко и ясно пройти через путь. . Не удивляйтесь, если видеоинфографика вскоре станет частью тренда электронной почты и веб-дизайна в 2020 году.Компании отдают предпочтение производству видео больше, чем когда-либо, и идея инфографики легко переводится в видео как тип визуальной карты, по которой пользователи могут перемещаться.
Рассматривая эти тенденции дизайна веб-маркетинга и электронного маркетинга на 2020 год, также осознайте важность того, чтобы ваши красивые электронные письма попадали в почтовые ящики. Инструмент проверки электронной почты NeverBounce гарантирует, что в случае возврата более 3% действительных писем вы получите полный возврат средств. Не позволяйте своим хорошо оформленным электронным письмам пропадать в ящиках для спама; доставляйте их и нужным образом обращайтесь к своим клиентам.
Как создать современный шаблон электронной почты для информационного бюллетеня
Если вы никогда не создавали шаблон электронного письма для информационного бюллетеня или начинаете задаваться вопросом, нуждается ли ваш текущий информационный бюллетень в пересмотре, этот пост для вас.
Независимо от того, являетесь ли вы старым профессионалом или новичком в написании информационных бюллетеней, идея создания нового, современного шаблона электронной почты для информационных бюллетеней может быть устрашающей.
В конце концов, давно прошли те времена, когда информационный бюллетень был очень похож на газету; с разделом за разделом с подробной информацией.Но это не значит, что нам есть чем поделиться с нашими читателями.
Электронная рассылка сегодняшнего информационного бюллетеня должна быть разработана и написана таким образом, чтобы читатели выходили за пределы информационного бюллетеня за дополнительной информацией.
Другими словами, сохраните подробный контент для своего веб-сайта, онлайн-формы или целевой страницы, и пусть ваш информационный бюллетень будет кратким, точным и очень простым в навигации.
Как именно мы это делаем?
Что ж, это единственный раз, когда я скажу вам начать с дизайна, а не с содержания.
Как создать шаблон информационного бюллетеня электронной почты
Хотя в большинстве случаев вы хотите начать рассылку писем с размышлений о содержании, информационные бюллетени немного отличаются.
Когда мы говорим о информационных бюллетенях, нам нужно думать в первую очередь о наших читателях — например, сделайте шаблон информационного бюллетеня, который будет легко просматривать вашим читателям.
Люди больше не читают бюллетень целиком за один присест. Я лично не знаю никого, у кого есть время. Ты?
Большинство из нас просматривает информационный бюллетень, проверяет, есть ли что-нибудь, что мы хотим прочитать в данный момент, а затем либо читаем дальше, либо переходим к чему-то другому.Итак, убедитесь, что ваш шаблон будет легко сканировать и перемещаться, и он содержит четкие призывы к действию, которые позволят читателям получить больше информации в другом месте.
Совет: У каждой статьи в вашем электронном письме должна быть собственная целевая страница, веб-страница или раздел веб-страницы с собственной прямой ссылкой . Не размещайте все статьи информационного бюллетеня на одной веб-странице — где угодно. Индивидуальные ссылки для каждой статьи упрощают сканирование, навигацию и усвоение информации из вашего информационного бюллетеня.
Как создать шаблон информационного бюллетеня электронной почты, который работает
Существует множество шаблонов информационных бюллетеней электронной почты, и с такими поставщиками электронной почты, как Constant Contact, вы можете создать фирменный информационный бюллетень электронной почты с помощью конструктора фирменных шаблонов, создать его с нуля пустой шаблон или даже импортировать собственный код.
Вы можете выбрать любой из шаблонов рассылки Constant Contact.Но есть несколько важных вещей, которые следует учитывать при выборе макета вашего шаблона информационного бюллетеня:
- Сколько тем / тем вы должны поделиться со своими читателями в любой момент времени? — Один или два, пять или шесть, десять или больше? (Мы рекомендуем, чтобы у вас было максимум три или четыре статьи на информационный бюллетень.Если у вас есть дополнительная информация, которую вы можете поделиться, разместите ее на веб-странице и поделитесь ссылкой или рассмотрите возможность рассылки вашего информационного бюллетеня чаще).
- Есть ли у вас одна тема, о которой читатели должны знать больше всего? — Или все ваши темы имеют примерно одинаковый вес, когда дело касается важности?
- Какой тон вы хотите установить? — Формальный, повседневный, профессиональный, личный?
Примеры современных шаблонов электронных рассылок
Лично я очень наглядный человек, поэтому наличие некоторых примеров всегда помогает.
Итак, давайте взглянем на несколько различных макетов информационных бюллетеней и разберем, что делает их хорошими.
Давайте начнем с Orange Cycle из Орландо, Флорида.
Orange Cycle фокусирует свои информационные бюллетени на двух-трех элементах с призывами к действию, которые перенаправляют читателя на веб-сайт или целевую страницу.Первое, на что вы должны обратить внимание, это насколько легко ориентироваться в этом информационном бюллетене. Orange Cycle делает свой текст коротким и включает ссылки для читателей, чтобы они могли предпринять дальнейшие действия: изображения переходят на их веб-сайт; текст с гиперссылкой приводит их к дополнительной информации по теме, дает указания или позволяет «зарезервировать место»; а кнопки внизу предоставляют читателям быстрые ссылки, чтобы проверить их блог или посетить их страницы в социальных сетях.
Это именно то, чем должен быть информационный бюллетень.
Orange Cycle сокращает количество своих информационных бюллетеней до двух или трех статей на информационный бюллетень. Поступая так, они могут одинаково сфокусироваться на нескольких основных моментах, сделать текст коротким и приятным и продемонстрировать пару фотографий.
Преимущества этого типа макета:
- Его легко и быстро создать — каждый месяц они меняют верхнее изображение и информацию, а второй раздел (с текущими занятиями) может оставаться неизменным.
- Для читателя легко ориентироваться — с одной новой темой в верхней части информационного бюллетеня, читатель может потратить всего несколько секунд на информационный бюллетень и узнать, что нового в Orange Cycle или какие события грядут.
При использовании этого макета следует учитывать следующие моменты:
- Убедитесь, что самая важная информация находится в верхней части информационного бюллетеня и выделяется среди остальных.
- Убедитесь, что ваши изображения и копия совпадают, и что у вас достаточно копии, чтобы побудить ваших читателей принять меры, нажав на ссылку, чтобы узнать больше.
Совет: В этот информационный бюллетень Orange Cycle включил информацию о мероприятии Сорбы. Сэкономьте время и энергию, следуя их указаниям и источникам информации за пределами вашей организации. Если это относится к вашему бизнесу и является информацией, которую могут использовать ваши читатели, ею стоит поделиться.
Давайте взглянем на другой пример электронного информационного бюллетеня
Это информационный бюллетень, который Ассоциация ландшафтов Огайо (OLA) рассылает каждый месяц, чтобы сообщить своим читателям, что находится в выпуске этого месяца их онлайн-журнала «Растущее беспокойство.«
OLA использует традиционную двухколоночную компоновку для своего информационного бюллетеня.После предыдущего примера кажется, что в нем много чего происходит. И это так, но это потому, что OLA описывает то, что находится в последнем выпуске своего онлайн-журнала. У них действительно всего две статьи. Один — это список дат, которые они хотят указать своим читателям, а другой — это сам журнал. Может показаться, что существует одиннадцать тем, но это ближе к двум или даже пяти — в зависимости от того, как вы на это смотрите.В любом случае остается меньше двадцати строк текста (не включая заголовки, подзаголовки, связанный текст и кнопки).
Этот более традиционный двухколоночный макет позволяет OLA отделять события и даты от основных моментов статьи.
Преимущества этого типа макета:
- Знакомый стиль, который инстинктивно дает читателям понять, что это информационный бюллетень, без необходимости заявлять, что это информационный бюллетень.
- Важные даты и события найти быстро и легко.
При выборе этого макета следует учитывать следующие моменты:
- Убедитесь, что один столбец не становится значительно длиннее другого, оставляя слишком много белого пространства с одной или другой стороны.
- На мобильных устройствах сначала отображается все, что слева, поэтому убедитесь, что это то, на чем вы хотите, чтобы ваши читатели сосредоточили внимание, и что левый столбец плавно перетекает в правый.
- Будьте осторожны, не делайте его слишком длинным, иначе он покажется читателю ошеломляющим.
Вот как это выглядит при просмотре на мобильном устройстве:
Мобильный вид информационного бюллетеня OLAХотите собрать много информации, но не любите двухколоночный макет?
Теперь вы говорите о том, чтобы стать современным!
Взгляните на этот макет, который я сделал недавно, используя шаблон «Базовая боковая панель информационного бюллетеня» Constant Contact:
Все шаблоны информационных бюллетеней Constant Contact полностью настраиваются, поэтому, хотя я сохранил исходный макет, я сдвинул и добавил разделы в соответствии с моими потребностями.Мне нравится этот конкретный шаблон, потому что он напоминает старый двухколоночный макет, но с обновленными элементами, стилем и простотой чтения. Если вы внимательно посмотрите на этот пример, вы увидите, что там много всего (шесть тем), только с двумя изображениями и десятью строками текста (не включая заголовки, подзаголовки, текст с гиперссылками и кнопки; конечно) . Однако обратите внимание, что, несмотря на шесть тем, есть только две статьи — классы и новый повар.
Преимущества этого типа макета:
- Как я упоминал выше, он выглядит как информационный бюллетень с датой и выпуском вверху; он напоминает информационный бюллетень старой школы, но не выглядит устаревшим.
- Навигация проста, и самые популярные статьи четко выделяются.
- Есть много обновлений, упакованных, не занимая много места и не будучи многословным — все имеет ссылку для получения дополнительной информации.
- Обновлять каждый месяц быстро и легко — просто поменяйте местами изображения и несколько строк текста, обновите дату и номер выпуска, и все будет готово к работе в следующем месяце.
- Это очень удобно для мобильных устройств — взгляните:
При использовании этого макета следует учитывать следующие моменты:
- Перед отправкой каждого выпуска всегда необходимо убедиться, что дата и номер выпуска изменены.
- Часть текста отображается перед первым изображением — это легко изменить, поместив небольшое изображение в верхнюю часть левого столбца (еще раз взгляните на информационный бюллетень OLA, чтобы узнать, как они это сделали).
Какой шаблон информационного бюллетеня самый лучший?
Хотя я поделился одним из своих фаворитов выше, решение о том, какой шаблон и макет лучше всего подходит для вас, зависит от вас и вашего бизнеса.
Как и ваш веб-сайт, вы должны быть довольны своим шаблоном информационного бюллетеня, иначе у вас будет искушение менять его каждый месяц. Это именно то, чего вы НЕ хотите, потому что ваши читатели зависят от вашей последовательности. Точно так же, как согласованность с тем, когда вы отправляете информационный бюллетень, согласованность с макетом и стилем помогает вашим читателям знать, что вы им отправляете, и помогает уменьшить количество отказов от подписки и сообщений о спаме.
Итак, найдите время, чтобы правильно составить информационный бюллетень с первого раза, и позже это сэкономит вам много времени, энергии и избавит от головной боли.
При создании шаблона информационного бюллетеня —
Убедитесь, что вы следуете этим простым правилам:
- Убедитесь, что по нему легко ориентироваться.
- Дразните каждую тему одной или двумя строками текста.
- Для каждой статьи включите прямую ссылку на дополнительную информацию / для регистрации / и т. Д.
- Используйте изображения, чтобы расширить текст (не добавляйте что-то, потому что вашему информационному бюллетеню это нужно).
И самый важный совет, который я могу дать вам по созданию шаблона электронного письма информационного бюллетеня:
- После того, как вы определитесь с макетом информационного бюллетеня и отправите первый, не меняйте его. Можно менять изображения каждый месяц (и вам, безусловно, следует) и даже немного менять цветовую схему на праздники, но ваш информационный бюллетень должен каждый раз выглядеть как ваш информационный бюллетень (мы называем это согласованностью бренда). Ваши читатели зависят от него (поэтому мы называем его шаблоном информационного бюллетеня — это базовая отправная точка для вашего информационного бюллетеня, каждый раз, когда вы его создаете).
Хотите создать шаблон для вашего бизнеса? Ознакомьтесь с профессиональными услугами Constant Contact, чтобы узнать, что они могут для вас сделать.
5 дизайнов информационных бюллетеней по электронной почте, рекомендации для начинающих
Дизайн электронной почты Паула Боровска • 8 июня 2020 г. • 5 минут ПРОЧИТАТЬ
Начать работу с дизайном информационных бюллетеней по электронной почте несложно, если вы знаете, что делают профессионалы. В этом посте мы обсудим пять основных приемов дизайна информационных бюллетеней, которые помогут вам уверенно начинать свои первые проекты. В отличие от веб-дизайна или дизайна пользовательского интерфейса, электронные письма имеют несколько ограничений из-за используемых технологий.Если вы знаете об этих ограничениях, вам будет проще создавать фантастические, высоко конвертируемые электронные информационные бюллетени.
Помимо технологических ограничений, дизайн электронной почты следует тому же образу мышления, что и любой другой веб-проект. Вам все равно нужно будет учитывать такие вещи, как:
- Доступность
- Размеры экрана и окон
- Полоса пропускания
- Адаптивный дизайн
- Пользовательский опыт
- Контроль качества
- A / B тестирование
Потому что, в конце концов, получение и чтение электронной почты — это онлайн-взаимодействие между компанией и аудиторией.Эти передовые методы помогут вам с уверенностью создать свой первый дизайн информационного бюллетеня электронной почты!
1. Оставьте ширину 600 пикселей.
Раньше многие экраны мониторов имели разрешение 1024 пикселей. И у нас не было красивого полноразмерного дизайна пользовательского интерфейса для многих почтовых приложений, как сегодня с Gmail. В то время разработчикам приходилось выбирать ширину электронного письма, которая соответствовала технологиям и возможностям отображения с разрешением 1024 пикселей. Ширина 550-600 пикселей казалась хорошим выбором.
Это все еще верно.
Почему до сих пор используется 600 пикселей? Вы не можете гарантировать, что ваши электронные письма будут просматриваться во всю ширину. Outlook уже много лет является стандартным настольным приложением электронной почты; даже сегодня отображение электронной почты может занимать менее 50% экрана.
Конструктор электронных писем
С Postcards вы можете создавать и редактировать шаблоны электронных писем онлайн без каких-либо навыков программирования! Включает более 100 компонентов, которые помогут вам создавать собственные шаблоны писем быстрее, чем когда-либо прежде.
Попробуйте бесплатноДругие продуктыCampaign Monitor провел опрос среди дизайнеров и разработчиков электронной почты и обнаружил, что большинство из них используют ширину письма от 550 до 650 пикселей. В то время как 2% опрошенных использовали гибкий макет, что также здорово, потому что оно гибкое, независимо от ширины окна. Однако, если вы не планируете создавать гибкое электронное письмо, вам лучше придерживаться 600 пикселей в качестве проверенного временем соглашения.
Хорошая новость заключается в том, что большинство лидеров индустрии электронного маркетинга, таких как MailChimp, Campaign Monitor и Litmus, используют ширину 600 пикселей по умолчанию в своих адаптивных шаблонах электронной почты.Открытки Designmodo также используют ширину 600 пикселей для электронных писем на компьютере.
2. Сохраняйте дизайн простым, чистым и легким
Когда дело доходит до визуального дизайна для Интернета, такого как целевая страница или веб-приложение, простота и понятность жизненно важны для улучшения взаимодействия с пользователем. То же самое и с дизайном информационных бюллетеней по электронной почте. Оживленные электронные письма могут быть пугающими, и их трудно сканировать или понимать. Визуально простое электронное письмо — независимо от того, насколько оно короткое или длинное — будет иметь большое значение для улучшения понимания, повышения рейтинга кликов и сокращения времени, затрачиваемого на чтение электронного письма.Это также может помочь со временем повысить открываемость, поскольку люди не будут отвлекаться от сообщений электронной почты, которые они получают от вашей компании.
«Визуальный дизайн — это механизм, с помощью которого мы взаимодействуем с подписчиками». — Джейсон Родригес
Визуально упрощенные электронные письма улучшают восприятие чтения, а также влияют на показатели удержания подписчиков и открываемость с течением времени. Как и при любом другом онлайн-взаимодействии, у вас есть всего миллисекунды, чтобы привлечь и удержать внимание подписчика.Наполненное электронное письмо — не самое лучшее первое впечатление. Это пугает и заставляет людей быстро уйти. Если у кого-то в первый раз возникнет негативный опыт, он с гораздо большей вероятностью немедленно откажется от подписки или никогда не откроет другое письмо от вас.
Советы по улучшению работы пользователей электронной почты:
- Максимально ограничьте количество слов, копий и содержимого.
- Сразу же продемонстрируйте ценность своей электронной почты.
- Стремитесь к плавности и удобочитаемости.
- Оптимальная длина строки электронного письма для основного текста составляет 50-80 символов.
- Убедитесь, что контракт высокий. Это особенно полезно для подписчиков с ослабленным зрением, а также для всех, кто просматривает вашу электронную почту на своем телефоне под прямыми солнечными лучами.
- Избегайте фоновых изображений. Многие поставщики услуг электронной почты, например Outlook, их не поддерживают.
- Используйте веб-шрифты и не рискуйте с размерами шрифтов. 14 пикселей для основного текста и 22 пикселей для заголовков — хорошие минимальные размеры шрифта.
«Средний взрослый читатель может прочитать от 250 до 300 слов в минуту. Если среднее время чтения электронного письма составляет 11 секунд, тогда идеальная длина электронного письма составляет около 50 слов ». — Том Тейт, AWeber
3. Дизайн для доступности
Когда мы проектируем с учетом доступности, мы включаем гораздо больше пользователей в наш дизайн; это включает электронную почту. Создание доступных электронных писем позволит вам охватить больше людей, которых вы иначе не смогли бы найти, что сделает кампанию по электронной почте намного более эффективной.
Что вы можете сделать, чтобы улучшить доступность вашего электронного информационного бюллетеня?
Избегайте файлов большого размера для изображений, потому что они могут загружаться бесконечно, что не очень хорошо, если у вас есть только миллисекунды с программой просмотра. Вы же не хотите отвлекать подписчиков, заставляя их ждать просмотра ваших писем или заставляя их платить за данные, которые ваше большое изображение просто потратило для них.
У многих пользователей электронной почты изображения по умолчанию отключены. Это еще одна отличная причина всегда включать текстовую резервную копию для всех изображений, которые вы будете использовать, включая логотипы или значки социальных сетей.
Когда мы проектируем в первую очередь доступность, а не в конце, общее впечатление от дизайна улучшается. Это потому, что это заставляет нас с самого начала разрабатывать дизайн с учетом всех аспектов. Просто наблюдайте, как ваши показатели и ключевые показатели эффективности улучшаются, поскольку вы обеспечиваете удобство использования для всех своих подписчиков, независимо от того, имеют ли они низкую пропускную способность, нарушения зрения или какой-либо другой вид инвалидности.
4. Оптимизированный мобильный опыт
Для адаптивных электронных писем вам доступны несколько вариантов, например использование мультимедийных запросов и адаптивный дизайн или гибкий дизайн электронной рассылки.Однако задумывались ли вы о создании двух отдельных писем? Один нацелен явно на оптимизированный мобильный опыт, а другой — на оптимизированный рабочий стол? Благодаря таким технологиям, как AMP, настраивать электронную почту становится проще.
Чаще всего мы берем копию и содержимое электронной почты для настольных компьютеров и складываем их друг на друга для мобильной версии. Это метод адаптивного дизайна электронной почты по умолчанию. Это может показаться двойным трудом, но его можно упростить, как только вы освоите его.Причина, по которой я предлагаю этот метод, заключается в том, что мобильный телефон — это совсем другой опыт, чем использование компьютера. Благодаря высоко оптимизированной мобильной электронной почте существует значительный потенциал положительного влияния на показатели вашей мобильной электронной почты.
5. Не забудьте проверить
Всегда перепроверяйте дизайн своей электронной рассылки на соответствие всем браузерам и приложениям. Вы можете использовать такие сервисы, как MobileTest.me, Litmus или Mailgun. Тестирование контроля качества важно.
Дополнительно следует проводить регулярное A / B-тестирование для оптимизации показателей.Протестируйте макеты друг против друга, чтобы найти тот, который лучше всего подходит вашей аудитории и подписчикам. Проверьте свои предложения, темы, рекламные акции или любой другой текст, контент или визуальный дизайн. Тот факт, что вы разработали фантастическое письмо, не означает, что его нельзя улучшить и оптимизировать!
Заключение
Изучив этот список из пяти передовых методов создания информационных бюллетеней, вы, вероятно, почувствуете себя уверенно, приступив к следующему проекту дизайна электронной почты. Если вы когда-либо работали над проектами UX, UI или продуктового дизайна, вы можете увидеть, что идеи создания фантастических информационных бюллетеней по электронной почте очень похожи.Все сводится к тому, чтобы правильно настроить взаимодействие с электронной почтой и часто проверять электронную почту.
Нравится то, что вы читаете? Подпишитесь на наши главные новости.
12 советов по дизайну информационных бюллетеней, которые повысят результаты электронного маркетинга
Появление и продолжающийся рост маркетинга в социальных сетях заставило многие организации вложить всю свою энергию в эти развивающиеся платформы, а для некоторых маркетинг электронной почты стал второстепенным.
Но знаете ли вы, что 72% людей предпочитают получать рекламную информацию по электронной почте, по сравнению с 17%, которые предпочитают социальные сети, по данным MarketingSherpa.
Если вы перешли от электронного маркетинга к строгому использованию социальных сетей, возможно, вы захотите пересмотреть эту стратегию. Не все зарегистрированы в Facebook, Twitter и Instagram, но у КАЖДОГО есть адрес электронной почты.
Поскольку многие предприятия и организации ориентированы на каналы маркетинга в социальных сетях, вы также можете обнаружить, что конкуренция за ваше сообщение в почтовом ящике вашей аудитории меньше, чем в их новостной ленте Facebook.
Это не означает, что вы можете просто отправить его по почте и ожидать хороших результатов.Сет Годин ввел термин «разрешительный маркетинг» в 1999 году в своей книге с тем же названием. Он определил это так:
Чтобы максимально использовать эту уникальную привилегию, вот 12 советов по дизайну информационных бюллетеней, которые вы можете иметь в виду, чтобы создавать визуально привлекательные сообщения, которые ваша аудитория будет с нетерпением ждать прочтения и избавит вас от попадания в черный список электронной почты.
СВЯЗАННЫЙ: 3 шага к поиску уникального голоса бренда
Если вы предпочитаете просмотр чтению, обязательно ознакомьтесь с видеоверсией этого сообщения в блоге:
1 Дизайн для мобильных устройств
Исследовательский центр Pew Research Center сообщает, что впервые у большего числа людей есть смартфоны, чем настольные компьютеры или ноутбуки, и что люди проводят значительно больше времени за своими мобильными устройствами.
Большинство платформ для дизайна электронной почты теперь поставляются с широким набором оптимизированных для мобильных устройств шаблонов информационных бюллетеней. Имеет смысл подумать о том, как макет будет отображаться на самом маленьком экране, который может использовать ваш подписчик, и начать с подхода, ориентированного на мобильные устройства.
Дизайн с одной колонкой и немного более крупный шрифт — это надежная ставка, чтобы люди могли легко просмотреть всю ширину вашего сообщения на любом смартфоне.
Совет. Убедитесь, что ваш шаблон отправляет электронное письмо как в формате HTML, так и в виде обычного текста, на случай, если на устройстве пользователя разрешен только текст.
2 Используйте чистый и организованный макет
Источник: Hatch Inc
Держите вещи чистыми и простыми, чтобы не отвлекать внимание и удерживать внимание читателей от начала до конца.
Может быть полезно начать с создания простого наброска общего макета информационного бюллетеня, используя шаблон информационного бюллетеня, а затем начать вставлять необходимые элементы содержимого по мере того, как вы улучшаете свой дизайн.
Вы можете найти шаблоны для целых информационных бюллетеней или для отдельных компонентов, таких как заголовок электронного письма, область призыва к действию и даже шаблоны подписи электронной почты.
Вот прекрасный пример того, как дизайн с одним столбцом может облегчить прокрутку на мобильных устройствах. Попробуйте также использовать шаблоны электронной почты HTML, чтобы по-настоящему усовершенствовать дизайн вашего информационного бюллетеня.
Совет. Оцените и сравните несколько различных платформ электронного маркетинга. Существует множество вариантов, которые позволяют пользователям, не имеющим технических навыков, легко заполнять и настраивать визуально привлекательные шаблоны.
3 Делайте текст коротким и понятным
Через Pinterest
В связи с уменьшением объема внимания важно тщательно продумать не только правильный контент, но и то, сколько различных тем вы хотите представить.
Многие люди теперь получают различные информационные бюллетени по электронной почте почти каждый день недели. Подумайте о своем почтовом ящике и информационных бюллетенях, которые вы больше не читаете или на которые отписались.
В чем была причина? Скорее всего, это произошло из-за того, что вы не считали информацию ценной на постоянной основе, электронное письмо было слишком сложно быстро сканировать и читать или его слишком часто отправляли.
СВЯЗАННЫЙ: Как создать лучший корпоративный блог в 2017 году [Отчет об исследовании]
Это рекламное письмо от Дж.Crew использует простой, но креативный макет, чтобы создать интригу и побудить пользователя нажать кнопку с призывом к действию для продвигаемой продажи.
Совет: используйте тему, чтобы объединить контент, и добавьте кнопку «Подробнее» при продвижении контента блога.
4 Создание визуальной иерархии
Через действительно хорошие электронные письма
Этот принцип дизайна требует создания ощущения того, что важно для читателя, посредством использования положения, размера, цвета, контраста и форм.
С первого взгляда должно быть очень очевидно, какие элементы являются наиболее важными и на чем вы хотите, чтобы читатель сосредоточил внимание.
Эффективное использование размера и цвета шрифта — это самый простой и наиболее распространенный способ, которым дизайнеры могут создать ощущение важности в теле электронного письма.
Источник: MailChimp
Совет: используйте тест на прищур, чтобы получить высокоуровневое представление визуальной иерархии вашего дизайна.
5 Embrace White Space
Через Pinterest
Эффективное использование белого пространства позволяет мозгу сканировать, интерпретировать и разбивать элементы на легко усваиваемые части.
Apple установила стандарт, которого пытались достичь многие бренды, когда дело доходит до эффективного использования пустого пространства и четкой компоновки.
Лучше меньше, да лучше. Дайте вашему контенту возможность дышать и повлиять на читателя. Любой красивый дизайн стратегически использует негативное пространство, чтобы выделить определенные части вашего контента.
6-кадровое содержимое с верхними и нижними колонтитулами
Через действительно хорошие электронные письма
Первые 2–3 дюйма в электронном письме — это наиболее важный объект, который нужно привлечь внимание читателя.В частности, заголовок — это ваша первая возможность произвести хорошее впечатление.
Нижние колонтитулы могут быть не первым, что видит читатель, но они должны обеспечивать надежную визуальную окантовку заголовка информационного бюллетеня и помогать формировать внешний вид всего электронного письма. Вы можете использовать конструктор шаблонов электронной почты, чтобы получить правильный фрейм.
Не забудьте включить значки социальных сетей, а также кнопку отказа от подписки и другие элементы, которые сделают ваше сообщение совместимым с CAN-SPAM.
Stat: Согласно исследованию Nielsen Group, читатели могут быстро сканировать и обрабатывать информационные бюллетени в среднем за 51 секунду.
7 Настройте настроение с помощью цвета
Было проведено множество исследований того, как разные цвета вызывают определенные чувства и эмоции. Будьте предельно внимательны при выборе цветовых схем, чтобы создать сообщение, которое находит отклик у ваших читателей.
Итак, что означают разные цвета в маркетинге? А какие цвета привлекают покупателей к покупке?
На западе существуют определенные культурные традиции, которые диктуют, какие цвета следует использовать для определенных сообщений.Например, черный традиционно ассоциируется с роскошью и изысканностью, а синий часто ассоциируется с понятиями целостности и спокойствия.
Очевидно, вы хотите использовать цветовую схему, которая дополняет и усиливает индивидуальность вашего бренда.
Совет: создайте руководство по стилю, чтобы обеспечить непрерывность вашего сообщения на всех носителях.
8 Упростите выбор шрифтов
Так много шрифтов, так мало времени. При поиске идеального шрифта среди тысяч доступных в Интернете легко стать парализованным из-за нерешительности.
Дизайнер, ставший писателем Дэвид Кадави, проделал фантастическую работу по упрощению этой темы в кратком справочном листе выше.
Совет: используйте 22 пикселя для заголовков и 14 пикселей для основного текста, чтобы создать достаточный контраст.
9 Используйте потрясающие изображения
Источник: Campaign Monitor
Когда у вас ограниченное пространство для передачи сообщения, тщательно подобранное изображение может стать большим заявлением.
Приведенный выше пример помещает продукт в центр внимания, сопровождаемый фоновым изображением, которое создает ощущение приключений на открытом воздухе, которое, вероятно, найдет отклик у целевой аудитории.
Только будьте осторожны, не злоупотребляйте изображениями и не выбирайте слишком большие изображения, так как они могут повысить вероятность того, что ваша электронная почта будет помечена как спам. Отдайте изображениям не более 30% доступной недвижимости. В некоторых случаях простое текстовое электронное письмо может быть самым прямым способом донести важное сообщение.
Совет. Не забудьте добавить к изображениям текст ALT, если поставщик услуг электронной почты не отображает изображения по умолчанию. Или предоставьте также текстовую версию.
10 Встроить видео / гифки
Источник: ModCloth
GIF и видео в электронной почте используются все чаще и могут оказать значительное влияние, если все сделано правильно.
В этом примере от ModCloth они творчески демонстрируют различные предметы одежды, которые являются частью целостного наряда.
Но будьте осторожны, не переусердствуйте: используйте GIF-файлы, которые имеют отношение к вашему продукту или услуге, и убедитесь, что они не выглядят слишком «на вашем лице».
11 Информ с инфографикой
Через действительно хорошие электронные письма
Этот информационный бюллетень от PlateJoy является прекрасным примером сообщения электронной почты, которое хорошо составлено на всех уровнях, а также использует инфографику временной шкалы.
Эта инфографика с одним ключевым моментом для каждого месяца в году дает читателю довольно много информации в очень понятной и приятной форме, в конечном итоге приводя к кнопке призыва к действию в конце.
Совет: используйте бесплатные онлайн-инструменты для создания инфографики, такие как Visme, для создания собственной графики электронной почты.
12 Создайте убедительный призыв к действию
Электронный маркетинг может создавать и укреплять узнаваемость бренда, но, в конце концов, вы хотите, чтобы читатель предпринял какое-то действие.
Если вы реализовали принципиально надежный дизайн с использованием уже рассмотренных нами приемов, то, скорее всего, ваш читатель легко определит ваш призыв к действию.
Этот пример демонстрирует, как с помощью модели перевернутой пирамиды можно создать воронкообразное путешествие, за которым легко следить, ведущее прямо к заметной кнопке с призывом к действию.
Кроме того, вы можете использовать профессиональную подпись электронной почты в своих информационных бюллетенях, чтобы повысить вовлеченность клиентов. Подпись по электронной почте — это очень логичный способ завершить информационный бюллетень, указав вашу компанию и личные данные.Это делает вашу электронную почту более личной и дает вам возможность добавлять больше CTA, таких как баннеры и кнопки социальных сетей.
Вы также можете использовать такой инструмент, как Rebrandly URL Shortener, чтобы отслеживать эффективность вашего CTA.
Совет: 70% электронных писем, посвященных бизнес-маркетингу, не имеют кнопки с призывом к действию. Убедитесь, что ваш CTA выделяется.
Твоя очередь
Что самое лучшее в электронном маркетинге для вашей организации? Вы и ваша команда на 100% контролируете каждый элемент сообщений, которые вы создаете для членов своей аудитории.
Помните: они разрешили вам присылать им полезный и вдохновляющий контент. Не подведи их!
Definitive Email Newsletter Design Guide with 40+ Best Practices
Я уверен, что вы читали пару статей о дизайне информационных бюллетеней, прежде чем нашли этот фрагмент содержания.
Я провел подробное исследование по этой теме и наткнулся на множество статей, которые либо казались мне слишком общими, либо не касались всей картины.
Я не смог найти то, что искал: — исчерпывающая статья, в которой перечислялись бы передовые методы дизайна информационных бюллетеней электронной почты не только для новичков, но и для опытных маркетологов электронной почты.
Вот почему я решил обобщить весь свой опыт в области дизайна электронной почты, используя массу отличных примеров информационных бюллетеней, которые действительно вдохновят вас в вашем следующем проекте по дизайну электронной почты.
Используйте этот пост в блоге как руководство, а не как статью для чтения — я рекомендую сохранить его в свои закладки.
Как разработать информационный бюллетень
Независимо от аудитории или цели вашего информационного бюллетеня, вам необходимо спланировать принципы копирования и дизайна, прежде чем вы начнете разрабатывать окончательный шаблон информационного бюллетеня.
Это процесс, который включает копирайтинг, дизайн и некоторые ограничения, связанные с электронной почтой, чтобы придумать правильную структуру.
В следующих разделах вы можете узнать об этапах и этапах разработки успешного дизайна информационного бюллетеня, а в конце статьи вы найдете несколько примеров для вдохновения.
Прежде чем я перейду к различным частям дизайна электронной почты, позвольте мне начать с самого любимого вопроса:
Сначала дизайн электронной почты или контент электронной почты?
Это давно обсуждаемый вопрос, но его все же стоит упомянуть, поскольку в Интернете полно бесплатных информационных бюллетеней по электронной почте, которые включают только Lorem ipsum.
Что не так с Lorem ipsum?
Ничего, если вы знаете, что заменит Lorem ipsum в вашем дизайне. Никогда не начинайте работу над дизайном, пока не будете уверены, каким будет контент.
Почему?
Сначала должно идти содержимое . Если вы не можете придумать контент, как вы представляете, что кто-то может придумать правильный дизайн для ваших нужд? Неважно, говорим ли мы о дизайне информационного бюллетеня или о веб-сайте.
Сядьте и напишите копию своего электронного письма как можно скорее.Это даст вам четкое представление о внешнем виде, даже если вы не дизайнер.
Помимо копии электронной почты, полезно придумать краткое описание дизайна электронной почты, даже если вы не работаете с агентством, а вместо этого используете конструктор электронной почты, сделанный своими руками, для создания информационного бюллетеня.
Что должно включать в себя бриф на дизайн электронного письма?
Цель краткого описания дизайна электронной почты — получить ответы на все распространенные вопросы, которые могут возникнуть у дизайнера при работе над вашим проектом. Когда у вас есть план информационного бюллетеня, вы можете приступить к своему брифу.
- Цели и задачи : Какова ваша цель с дизайном? Хотите что-то продать или доставить полезную информацию? В случае дизайн-проекта информационного бюллетеня информация должна быть в центре внимания, а продажи должны быть второстепенными.
- Бюджет и график : Важно как можно раньше уточнить сроки и ограничения по расходам. Если вы создаете дизайн для себя, стоимость не так важна, как время.
- Целевая аудитория : Для кого ваша электронная почта? Базовые принципы дизайна могут сильно различаться, если он предназначен для миллениалов или для людей старше 50 лет.
- Строка темы : Может показаться странным включать тему письма в краткое описание дизайна электронного письма, но позвольте мне рассказать вам, зачем это нужно. Ваши подписчики решают открыть ваше письмо в основном на основе темы, поэтому это единственное, что они читают перед тем, как открыть само письмо. Тема письма уже будет формировать у них определенные ожидания, и, например, если она сосредоточена на одном продукте, этот продукт должен быть в центре вашего дизайна.
- Копия электронной почты : какое сообщение вы хотите доставить? Напишите фактическую копию электронной почты.Не имеет значения, если он еще не доработан на 100%, но постарайтесь максимально приблизиться к окончательной версии. Убедитесь, что текст соответствует вашему стилю письма и языку вашей аудитории. Ваш стиль письма также сильно повлияет на настроение дизайна.
- Изображения или любые визуальные материалы , которые вы хотите включить. Включите свой логотип, фотографию вашей команды, продукта и все, что вы хотите представить в информационном бюллетене. Например, если вы хотите, чтобы фотография была включена в нижний колонтитул / подпись, включите эту фотографию в краткое описание.
- Целевые почтовые клиенты : это вопрос, относящийся к электронной почте, который необходимо решить из-за различных ограничений почтовых клиентов. Например, если 90% вашей аудитории использует устройства Apple, вы можете использовать необычные шрифты и интерактивные элементы в своем дизайне. Если они используют старые школьные Outlook, вы должны сделать дизайн более минималистичным.
- Руководство по стилю : Если у вас есть определенные фирменные цвета, шрифты или требования к интервалу, укажите их.
- Не надо : если есть определенные вещи, которые вы по какой-то причине не хотите включать в информационный бюллетень, перечислите их.Возможно, вам не нужен макет с тремя столбцами, поскольку на основе предыдущих тестов A / B вы уже знаете, что макет с одним столбцом лучше подходит для вашей аудитории.
Прежде чем приступить к оформлению следующего информационного бюллетеня, составьте подробное руководство по созданию электронного письма для вашего же блага.
А теперь давайте продолжим и проанализируем, каким передовым методам дизайна электронной почты вы должны следовать, чтобы ваши подписчики больше интересовались вашим контентом.
Как создать отличный дизайн информационного бюллетеня электронной почты
Если честно, дизайн информационного бюллетеня не кажется интересным проектом, поскольку в большинстве случаев цель информационного бюллетеня довольно проста: рассказать подписчикам о последних новостях, предложениях или статьи сайта.
Создать убедительный дизайн информационного бюллетеня — непростая задача для любого дизайнера. Но это не невыполнимая задача.
Прочитав эту статью, вы узнаете, как сделать свою одну из самых красивых.
Чтобы создать хороший дизайн электронной почты, мы рекомендуем вам воспользоваться услугами профессионального дизайнера информационных бюллетеней, поскольку в нем есть гибкий редактор перетаскивания. Вы можете создать красивое письмо за считанные минуты. Есть отличные конструкторы и дизайнеры электронной почты, которыми вы можете пользоваться бесплатно.
Например, в Chamaileon вы можете создать информационный бюллетень по электронной почте, который отлично отображается на всех устройствах — он полностью реагирует на запросы. Вы можете бесплатно создать электронную почту, перейдя к ней здесь.
При разработке электронного письма о выпуске продукта вам необходимо придерживаться следующих рекомендаций:
Давайте начнем с двух отличных примеров дизайна информационных бюллетеней, чтобы дать вам представление о том, что вы можете получить, если будете следовать рекомендациям, перечисленным в этой статье.
Этот бюллетень от Designernews представляет собой красивый информационный бюллетень, который предоставляет последние новости сообщества вместе с небольшим количеством продвигаемого контента.
Выглядит модно? Что ж, может быть, это и не наворочено, но очень чисто и по делу. Обращает на себя внимание. Легко сканировать. Легко употреблять. Таким образом, он идеально подходит для дизайнеров, которые живут в условиях дефицита времени и хотят быстро выполнять работу.
Давайте взглянем на еще один красивый информационный бюллетень от Really Good Emails.
Этот более красочный и игривый, чем дизайн информационного бюллетеня Designernews, просто потому, что «веселье» — важная часть бренда Reallygoodemails.
Логотип, маленький смайлик, маленькие бумажные самолетики, облака, конверты и красочные информационные бюллетени по электронной почте со смесью веселья в электронном письме делают его информационным бюллетенем, который большинству подписчиков не терпится открыть каждую пятницу.
Мне любопытно узнать, какой у них показатель открытия для этих информационных бюллетеней, но я почти уверен, что он намного превышает 25%. (Я спрошу их и обновлю статью, если они поделятся со мной этой информацией).
Что общего в этих двух информационных бюллетенях по электронной почте? Я перечислю большинство из этих общих черт среди рекомендаций по оформлению информационных бюллетеней ниже.
Сохраняйте ширину электронного письма 600 пикселей, как это рекомендуется в большинстве случаев.
600 пикселей было почти стандартом для ширины электронного письма в индустрии электронной почты, так как это число хорошо работает в большинстве почтовых клиентов и по сей день.
Есть много компаний, которые экспериментируют с электронной почтой разной ширины, но 600 пикселей, похоже, остается квазистандартом для многих дизайнеров и программистов электронной почты.
При желании можно без проблем переместиться на 640-650 пикселей. Такая ширина будет хорошо работать в большинстве почтовых клиентов, но все, что указано выше, может вызвать проблемы, например, в Yahoo Mail.
У нас есть очень подробная статья объемом более 2000 слов об ограничениях ширины и размера электронного письма для вас, если вы хотите узнать больше по этой теме.
В течение многих лет заголовок информационного бюллетеня имел следующие элементы:
- Предзаголовок : короткая строка, обозначающая текст предварительного просмотра в большинстве почтовых клиентов, и ссылка «просмотреть в Интернете» / «просмотреть в браузере», где пользователи могут щелкнуть, если дизайн в некоторых почтовых клиентах испорчен.
- Логотип : помогает подписчикам определить, от кого пришло электронное письмо.
- Меню навигации : меню, похожее на веб-сайт, в котором выделяются наиболее посещаемые части веб-сайта.
В последнее время предварительные заголовки начали исчезать из дизайна электронной почты, возможно, потому, что поставщики услуг электронной почты, такие как MailChimp, начали вводить возможность добавления текста предварительного просмотра в информационный бюллетень как часть процесса создания кампании электронной почты.
Другая причина их исчезновения заключается в том, что просмотр онлайн / просмотр в опциях браузера меньше используется в правильно написанных адаптивных информационных бюллетенях электронной почты.Пользователи на самом деле не переходят по этим ссылкам, если электронное письмо разваливается на их мобильном телефоне. Вместо этого они удаляют письмо или отказываются от подписки.
Если у вас есть правильно составленный информационный бюллетень по электронной почте и либо построитель электронной почты, либо ESP, который поддерживает добавление текста предварительного просмотра, вы можете без проблем избавиться от предварительного заголовка.
Ознакомьтесь с дизайном заголовка информационного бюллетеня от Starbucks:
Источник: Beansnrice.com
В электронном письме нет предварительного заголовка, но присутствует логотип и простое меню навигации, как в рассылке Designernews выше.
Иногда нет ни предзаголовка, ни меню навигации. Просто логотип или визуальный элемент, который четко идентифицирует бренд.
Источник: Chanel.com
Источник: Uber.com
Чем больше у вас бренд, тем меньше информации вы должны включить в заголовок.
Apple славится своим минималистичным и чистым дизайном, поэтому иногда они даже осмеливаются использовать лишь незначительный логотип в верхнем левом углу заголовка бюллетеня, и все.
Источник: Apple.com
Необязательно всегда соблюдать правила. Вы можете смешивать их так, как хотите, в зависимости от вашей аудитории. Например, вы можете поэкспериментировать с добавлением публикации в социальных сетях в заголовок, как это делает Litmus в рассылке новостей ниже.
источник: Litmus.com
Или IFMA Central Ohio, которая исключила логотип из информационных бюллетеней и сразу сосредоточилась на приглашении.
Источник: Pinterest.com
Используйте передовой опыт создания панели навигации для информационных бюллетеней
Использование панели навигации в дизайне электронной почты связано с веб-дизайном.Маркетологи регулярно ошибаются с панелями навигации в сообщениях электронной почты, поскольку они пытаются воспроизвести работу веб-сайта в сообщениях электронной почты.
Но емейл ≠ сайт!
В чем вообще проблема с панелями навигации в дизайне электронной почты?
Они просто прерывают поток электронной почты. Представьте, что:
- Ваш подписчик читает вашу очаровательную тему о выгодном предложении со скидкой 30%.
- Когда он открывает ваше электронное письмо, то в первую очередь видит не предложение, а толстую панель навигации, которая перемещает вниз искомый контент в зависимости от строки темы.
Это хороший пользовательский опыт? Не совсем.
К дизайну электронной почты применяется то же правило, что и к дизайну целевой страницы:
- Чем меньше у вас CTA (призывов к действию), тем выше будет ваш CTR (рейтинг кликов).
- По возможности не используйте меню навигации, так как это просто способ отвлечь подписчиков от основной цели электронной почты, а наличие слишком большого количества ссылок может даже повысить вероятность того, что они будут сочтены спамом.
Почему панели навигации по-прежнему могут быть полезны в классическом информационном бюллетене?
В большинстве случаев в вашем информационном бюллетене вы не находитесь в режиме «продажи».Вы скорее стремитесь доставлять ценную информацию своим подписчикам, чем настаивать на своем продукте.
Добавление небольшой навигационной панели , которая указывает на ваши самые важные страницы привлечения потенциальных клиентов или выбранных скидок , может быть разумным решением, которое следует принять в дизайне информационных бюллетеней. Составьте хороший план информационного бюллетеня и создайте свои страницы для лидогенерации, следуя лучшим практикам.
Давайте взглянем на следующую панель навигации информационного бюллетеня REI, сайта электронной коммерции, продающего уличное оборудование.
Источник: Rei.com
Они в значительной степени скопировали большую часть меню веб-сайта прямо в своем информационном бюллетене.
Это меню может работать на настольных компьютерах и клиентах веб-почты при просмотре на ноутбуке или планшете, но такое длинное меню не работает на смартфонах. Вот почему они сократили количество элементов меню на мобильных устройствах.
Ключевой вывод заключается в том, что если по какой-то причине вы решите добавить в свою электронную почту обширную панель навигации , убедитесь, что также можно использовать на мобильных устройствах .
Вот еще один пример от GAP, модного бренда, который также продает одежду через Интернет.
Источник: Gap.com
Они используют очень минималистичный дизайн, что по некоторым причинам хорошо:
- Его легко воспринимать, даже если ВСЕ ЗАГЛАВНЫЕ буквы затрудняют чтение.
- Занимает мало места на экране (на ноутбуке и планшете), но на мобильном телефоне его количество должно быть уменьшено.
- Для использования требуется менее сложный HTML-код, что помогает с фильтрами спама.
Если вы или ваш дизайнер / разработчик электронной почты увлекаетесь необычными вещами, вы можете попробовать реализовать так называемое гамбургер-меню в своих информационных бюллетенях по электронной почте.
Источник: Freshinbox.com
Это называется «гамбургер-меню», поскольку маленький значок навигации с тремя горизонтальными полосами выглядит как минималистичный гамбургер. Когда вы нажимаете на значок, он показывает, что внутри, как если бы вы разорвали гамбургер на части.
Те, кто хочет увидеть ваше навигационное меню, могут нажать на гамбургер и увидеть все ваши ссылки, перечисленные друг под другом.
Смысл использования гамбургер-меню заключается в том, что вы можете полностью скрыть панель навигации на смартфонах, сэкономив много места и сохранив навигацию в мобильной версии вашего информационного бюллетеня.
Кодирование гамбургер-меню может оказаться непростым делом, и вы не найдете в Интернете готовых бесплатных адаптивных информационных бюллетеней, включающих гамбургер-меню.
Узнайте, что сделала GoPro, в следующем информационном бюллетене.
Источник: GoPro.com, Stylecampaign.com
Они использовали только три варианта навигации в настольной версии электронного письма и решили полностью скрыть навигацию в мобильной версии информационного бюллетеня.Эти три варианта могли бы легко вписаться в экран мобильного устройства в виде текстовых ссылок, если бы захотели, поэтому я полагаю, что была причина скрывать эти элементы на мобильном устройстве.
Если вы решите использовать панель навигации в дизайне следующего информационного бюллетеня, я бы посоветовал вам:
- Сохраняйте минимальное количество навигационных ссылок . Максимум 5, но в идеале не более 3. Если вы достаточно знаете о предпочтениях своих подписчиков, вы можете использовать расширенную персонализацию электронной почты, чтобы предлагать только те варианты, которые уместны.
- Будьте последовательны . Используйте те же ссылки в своих информационных бюллетенях, чтобы ваши подписчики могли привыкнуть к ним и знали, что, если они не могут найти реальную ценность в вашем письме, есть вариант навигации, который они могут использовать, например, для перехода к вашим «последним предложениям». .
- A / B test , действительно ли вам нужна панель навигации или нет. Если вы сделаете это правильно, панель навигации может пригодиться, но если вы переборщите, она негативно повлияет на ваши общие конверсии. Только ваши собственные тесты могут сказать, является ли панель навигации для вас выигрышной или проигрышной.
Давайте перейдем от заголовков информационных бюллетеней к дизайну основных юнитов, который обычно является самой важной частью любого электронного письма.
Используйте дизайн раздела / подразделения героя
Раздел / подразделение героя — это часть вашего бизнес-информационного бюллетеня, на которую вы хотите обратить наибольшее внимание. Вообще говоря, он содержит основное сообщение и большой призыв к действию (CTA).
Вся концепция изображения героя, как и панели навигации, снова пришла из веб-дизайна и стала модной в последние пару лет.
Изображение в большинстве случаев находится на заднем плане, а текст и призыв к действию накладываются поверх него.
К сожалению, фоновые изображения не поддерживаются в Outlooks и Outlook.com, поэтому во многих случаях дизайнерам электронной почты приходится искать другой подход или выбирать сложные способы, чтобы заставить это единственное фоновое изображение работать и в Outlooks.
Лучшей практикой будет избегать добавления главного изображения в качестве фонового изображения в информационный бюллетень и вместо этого добавлять изображение главного героя и текст в отдельные контейнеры.
Посмотрите на приведенный ниже пример от Hawaiian Airlines, который отлично справляется с разделением фонового изображения и содержимого.
Источник: Hawaiian Airlines, Reallygoodemails.com
Поскольку самолет находится прямо под основным текстом и призывом к действию, его можно добавить в информационный бюллетень как изображение содержимого, а не как фоновое изображение.
Если вам не ясно, в чем разница между изображением содержимого и фоновым изображением, ознакомьтесь со следующим руководством по макету и структуре сообщения электронной почты.
Вот еще один отличный пример от компании, занимающейся розничной торговлей одеждой Frank and Oak.
Источник: Frankandoak.com, Reallygoodemails.com
В этом примере вы видите, что они использовали макет из двух столбцов для своего раздела героев. Изображение помещается в левый столбец, а основной текст и призыв к действию переходят в правый столбец, который имеет только один цвет фона — это поддерживается во всех почтовых клиентах.
Их команда разработчиков электронной почты должна быть полна умных людей, поскольку они пошли по этому пути вместо того, чтобы точно копировать внешний вид своего веб-сайта (который включает огромные фоновые изображения и наложенные тексты).
Дизайн электронной почты во многих случаях требует некоторого компромисса, и вам нужно либо принять ограничения, либо потратить больше на рассылку электронной почты и получить их индивидуально.
Если у вас хватит ума, вы можете разобраться во многих вещах и даже создать что-то почти подобное, используя конструктор электронной почты и умную нарезку изображений.
Источник: Pinterest.com
Будьте осторожны с отзывчивыми информационными бюллетенями по электронной почте, которые вы можете приобрести в Интернете. Многие из них содержат фоновые изображения, которые не работают в Outlook и Outlook.com.
Источник: Pinterest.com
Избегайте дизайна, подобного предыдущему, или убедитесь, что где-то на странице шаблона упоминается, что они заставили фоновые изображения работать и в Outlook.
Используйте анимированные GIF-файлы в разделе / модуле главного героя
Поскольку встроенное видео не поддерживается в электронной почте, большинство дизайнеров электронной почты обращаются к анимированным GIF-файлам, чтобы добавить это дополнительное взаимодействие и в информационные бюллетени электронной почты.
GIF — это очень популярная замена статическим изображениям героев в наши дни, в основном потому, что они действительно эффективны в вызове эмоциональной реакции.
Я поискал A / B-тесты, которые действительно могут доказать, как анимированные GIF-файлы могут повысить доход от электронной почты, и нашел на сайте Fueltravel.com приведенный ниже пример.
Источник: Fueltravel.com
Они A / B протестировали статическое изображение по сравнению с анимированной версией GIF, которую вы можете увидеть в информационном бюллетене выше. Больше ничего, конечно, не изменилось в дизайне.
Как вы думаете, насколько они улучшили CTR?
На 21% было наибольшее улучшение CTR для незанятых пользователей, которые не взаимодействовали ни с одним из писем в последние месяцы, и увеличение на 13% для вовлеченных пользователей, которые регулярно взаимодействуют со своими письмами.
Оба улучшения значительны, особенно если они приводят к увеличению конверсии и рентабельности инвестиций в электронную почту, что, к сожалению, не было измерено в этом A / B-тесте.
Другой тест, проведенный Dell (2014 г.), оказался чрезвычайно успешным, поскольку он увеличил доход от электронной почты на 109%!
Источник: Marketingsherpa.com
Вместо статического изображения продукта они использовали анимированный GIF, который быстро показывал различные варианты использования продукта.
С 2014 года анимация стала более распространенной в индустрии электронной почты, так что, возможно, анимированный GIF не сразу удвоит ваши доходы, но я уверен, что в большинстве случаев он увеличит вовлеченность по электронной почте и количество конверсий по крайней мере на 10%.
Теперь давайте посмотрим на другие вдохновляющие примеры анимированных GIF-файлов в информационных бюллетенях из различных отраслей.
Источник: Oshkosh.com
Например, OshKosh, интернет-магазин детской одежды, вдохнул жизнь в свою электронную почту, добавив красочный, но все же очень простой анимированный GIF в качестве главного изображения своего информационного бюллетеня.
Вот еще один простой пример с Blacktux.com, который играет с черным и белым.
Источник: Theblacktux.com, Reallygoodemails.com
И более сложный, с индивидуальной анимацией от Гарри.
Источник: Harrys.com, Reallygoodemails.com
Вот очень интересное сообщение от Complex.com. Выглядит круто, не правда ли?
Источник: Complex.com, Reallygoodemails.com
Да, но проблема в том, что размер этого письма был 6,4 МБ! Довольно большой размер для электронного письма, верно? Я уверен, что загрузка такого письма через мобильное соединение может занять более 10 секунд.
Вообще говоря, я бы не советовал вам использовать такую сложную анимацию и огромный размер писем, поскольку вместо повышения конверсии или CTR вы можете потерять подписчиков.
Люди, как правило, закрывают, удаляют электронное письмо или даже отписываются от вашего списка, если ваш информационный бюллетень не отображается на мобильных устройствах должным образом.
Как бы вы отреагировали, если откроете это письмо на своем мобильном телефоне, находясь в пути, имея только соединение 3G?
Сильно разочарован, так как большинство изображений сначала не было видно.
Задачи с анимированными GIF-изображениями в электронной почте
К счастью, анимированные GIF-файлы поддерживаются большинством почтовых клиентов, за исключением Outlook 2007-2013 и Windows Phone .В этих почтовых клиентах анимация не воспроизводится, и отображается только первый кадр GIF.
При использовании анимированных GIF-файлов в информационном бюллетене электронной почты убедитесь, что первый кадр вашей анимации содержит основное сообщение для тех, кто использует почтовые клиенты, которые блокируют анимацию.
Помимо совместимости, есть еще пара проблем с анимированными GIF-файлами, которые вам следует решить:
- Оптимизировать размер GIF — К сожалению, размер анимированных GIF-файлов может легко превысить 2 МБ, если вы хотите создать впечатление, подобное видео.Размер электронного письма действительно имеет значение, когда речь идет о доставляемости и удобстве подписчиков. Всегда убедитесь, что вы оптимизируете свои GIF-файлы с помощью решения для оптимизации изображений. Стремитесь уменьшить общий размер вашего электронного письма до 1 МБ. Чем меньше, тем лучше!
- Используйте простые и удобные в использовании GIF-изображения , которые понятны с первого взгляда и не запутают подписчиков длинными сообщениями. Менее сложная анимация обычно означает меньший размер GIF, что обычно хорошо для вас по причинам, упомянутым в предыдущем пункте.
- Убедитесь, что GIF заметили все, кто открыл вашу электронную почту. Самый простой способ убедиться, что они увидят ваш GIF — это добавить его в качестве главного изображения в информационный бюллетень. Если вы хотите выделить свой GIF-файл, вам также следует избавиться от меню навигации в электронной рассылке новостей или, по крайней мере, сделать его менее заметным.
- Включите отдельный текст призыва к действию и кнопку. В большинстве случаев вам нужно усилить визуальное послание вашего анимированного GIF с помощью строки текста электронной почты, ориентированного на конверсию, и доминирующей кнопки призыва к действию.
- Не злоупотребляйте анимированными GIF-файлами в электронном письме . Конечно, анимированные GIF-файлы — это весело, и на Giphy их множество, которые вы могли бы использовать. Но если вы будете использовать их во всех своих электронных письмах, вашей аудитории может наскучить вы и ваш контент.
Если вам нужен видеоурок с точными инструкциями по вставке GIF в электронное письмо в редакторе электронной почты, вы можете увидеть его здесь.
Узнайте, как 30 брендов используют GIF-изображения в своих электронных письмах для повышения заинтересованности.
Используйте лучшие рекомендуемые шрифты для информационного бюллетеня электронной почты
Прежде чем мы углубимся в то, какие модные шрифты следует использовать в информационном бюллетене, позвольте мне уточнить одну вещь:
Только веб-шрифты правильно работают во всех почтовых клиентах!
- Arial
- Courier
- Georgia
- Lucinda Sans
- Lucinda Console
- Tahoma
- Times New Roman
- Trebuchet
- Verdana
Веб-безопасные шрифты скучны, верно?
Да, многим они скучны, потому что большинство из них существуют с момента появления коммерческого Интернета.
Вы можете использовать в электронной почте не только безопасные для Интернета шрифты, но и причудливые шрифты Google или даже другие, создавая стеки шрифтов в CSS. Мы добавляем поддержку шрифтов Google в Chamaileon.io, поэтому вы сможете выбирать из множества вариантов при создании информационных бюллетеней.
НО, когда вы используете Google Fonts или другие веб-шрифты в своей электронной почте, вы должны согласиться с тем, что вместо шрифта, который вы выбрали, во многих почтовых клиентах будет отображаться резервный вариант — безопасный для Интернета шрифт.
Веб-шрифты поддерживаются только :
- AOL Mail
- Собственное почтовое приложение Android (не Gmail)
- Apple Mail
- iOS Mail
- Outlook 2000
- Outlook.com app
Интересный факт: шрифты Google не работают даже в Gmail. Вы спросите: «Что ???». Да, вы правильно слышали. Есть странные вещи, которые вы должны принять в дизайне электронной почты.
Мы советуем вам использовать веб-шрифты только в том случае, если большая часть вашей аудитории использует устройства Apple . Если большинство из них работает на Android или использует Outlook, вам лучше использовать безопасные для Интернета шрифты.
Но какие веб-шрифты выбрать?
Источник: Mashable.com
Согласно отчету Bloomberg, как Arial, так и Helvetica плохо подходят для электронной почты, даже если в течение многих лет Arial казался стандартным веб-шрифтом в Интернете.
Дизайнеры утверждают, что оба шрифта имеют «неоднозначную» форму букв — их b, d, p и q являются зеркальными формами друг друга, что затрудняет их чтение в длинных текстах.
Хорошо, так что никаких Helvetica или Arial… что тогда?
Georgia и Verdana кажутся самыми популярными шрифтами в электронной почте из-за их удобочитаемости и широкой поддержки в почтовых клиентах.
Для длинного текста мы советуем вам выбрать один из этих двух, а для заголовков вы можете либо использовать другие веб-шрифты, либо поэкспериментировать с Google Fonts или аналогичными — зная, что в Outlook и Gmail будет отображаться резервный вариант. вместо.
Иногда даже в информационном бюллетене по электронной почте вы хотите, чтобы текст отображался в пользовательских шрифтах:
- логотип
- драгоценный заголовок
- рекламный текст
- скидка
Последний вариант — добавить свой текст как изображение вместо .
Но убедитесь, что указанные тексты работают и на экранах мобильных устройств, если их уменьшить и изменить порядок на мобильных устройствах. Или используйте комбинацию нашей функции скрыть на мобильном / настольном компьютере , чтобы заменить данное изображение другим на мобильном устройстве.
Единственная проблема с добавлением текста в качестве изображения заключается в том, что он не отображается, если изображения заблокированы в данном почтовом клиенте — чаще всего снова происходит с Outlook.
Видите? Вот почему пуленепробиваемый вариант — использовать только веб-шрифты. Но все меньше и меньше модных информационных бюллетеней, которые выбрали бы безопасный путь.
Рекомендуемый размер шрифта и высота строки в электронном письме
Единого правила не существует. Если у вас есть аудитория старшего возраста, им станет легче, если вы будете использовать более крупные шрифты, в то время как для молодых людей меньшие шрифты не вызовут никаких проблем.
Согласно передовой отраслевой практике:
- Размер шрифта заголовка должен быть около 22–28 пикселей.
- Размер основного шрифта должен быть в диапазоне 14 — 18 пикселей.
- Высота строки должна быть примерно в 1,4–1,5 раза больше размера шрифта для лучшей читаемости.
Это приблизительные цифры; вы можете обнаружить, что предпочтения вашей аудитории другие.
К сожалению, в Интернете нет тематического исследования электронной почты, в котором можно было бы сравнить, как разные размеры шрифтов влияют на конверсию электронной почты.
Позвольте мне показать вам пример из Clicklaboratory.
Просто изменив размер шрифта с 10 на 13 пикселей и добавив немного высоты строки, им удалось улучшить показатель отказов веб-сайта Numara на 10%, показатель выхода на 19%, страниц за посещение на 24% и конверсии на потрясающие 133% .
Вы все еще используете мелкий шрифт и одинарную высоту строки в своих электронных письмах?
Пришло время перемен.
Если вы это сделаете, пожалуйста, A / B протестируйте эффект ваших изменений и поделитесь результатами с нами в комментарии.Мы хотели бы опубликовать на нашем сайте тематическое исследование о том, как разные размеры шрифтов могут влиять на конверсию электронной почты.
Теперь давайте перейдем к паре примеров творческого использования шрифтов в электронных информационных бюллетенях.
Источник: Kuratedemail.co
На этом снимке от Airbnb есть фоновое изображение с наложенным огромным текстом BEACH LIFE (в виде изображения) и некоторым дополнительным (давайте будем честными …) текстом на изображении.
В чем проблема?
Фоновое изображение, которое не работает в большинстве Outlook.Я тестировал этот информационный бюллетень, и он развалился в Outlook 2007, 2010, 2013, 2016 и даже в Gmail.
Вы можете без проблем создать такой дизайн в профессиональном конструкторе электронной почты, если понимаете, как создается макет электронной почты.
Позвольте мне показать вам, что я имею в виду.
Эта часть должна быть добавлена как изображение содержимого. Не как фоновое изображение с наложенным изображением.
Эта часть может быть добавлена как отдельный блок текста с фоновым изображением и резервным цветом, выбранным из фонового изображения.
Не так уж сложно, правда? Но, тем не менее, вы можете видеть, что даже такая крупная компания, как Airbnb, не особо заботится о проблемах с прогнозами… Это действительно удивительно.
Вы можете добиться большего, просто используя конструктор электронной почты, такой как Chamaileon.io.
Вот простой дизайн, который удачно сочетается со шрифтами.
Источник: Trunkclub.com, Reallygoodemails.com
Простой дизайн, но привлекательный для глаз.
Проблема в том, что вся крутая часть — это изображение.Они не хотели возиться со шрифтами, вариантами отката или отдельным призывом к действию. Вместо этого они использовали старый подход: добавили его как изображение.
Самое простое решение; Я должен признать.
Это может сработать, если вы правильно стилизуете свое изображение и убедитесь, что его можно будет читать как на компьютере, так и на мобильном устройстве, сохраняя при этом нормальное соотношение текста к изображению (50:50).
Вот красивый, адаптивный информационный бюллетень с индивидуальным кодом от Litmus с максимальной шириной 1390 пикселей.
источник: Litmus.com, Reallygoodemails.com
Наши друзья в Litmus всегда придумывают красивые и уникальные информационные бюллетени по электронной почте, чтобы они могли продемонстрировать свой опыт в области кодирования электронной почты.
Вот пример из Evernote, включающего Caecilia LT Std Light, с откатом на Helvetica и Arial.
Источник: Evernote.com, Reallygoodemails.com
Другой шрифт от Lyft — это шрифт Gotham с запасными вариантами шрифтов Montserrat (шрифт Google), Proxima Nova, Helvetica Neue, Helvetica, Arial и без засечек.
Источник: Lyft.com, Reallygoodemails.com
Эти примеры показывают вам, что если вы хотите создать модный дизайн электронной рассылки, вы должны отказаться от использования только безопасных для Интернета шрифтов и проявить творческий подход к использованию шрифтов.
На самом деле предел вашего творчества — это только ваш бюджет, так как индивидуальный дизайн электронной почты может стоить тысячи долларов, или вы можете положиться на конструктор электронной почты DIY и создавать свои собственные информационные бюллетени электронной почты с помощью Google Fonts.
Мы рассмотрели заголовки, главный раздел, шрифты, теперь перейдем к дизайну призыва к действию (CTA), и мы закончим с дизайном нижнего колонтитула.
Bonus PDF: получите доступ к бесплатной версии этого руководства в формате PDF.
Используйте лучшие практики призыва к действию (CTA) в своем информационном бюллетене для бизнеса
То, что в вашем электронном письме есть красивая кнопка с призывом к действию, не означает, что все будут нажимать на нее.
В этом случае дизайн — это только часть истории. Текст призыва к действию не менее важен, и, конечно же, предыдущие части вашего информационного бюллетеня электронной почты, включая заголовок электронного письма, изображение главного героя, заголовок, также имеют значение.
Что делает хороший призыв к действию по электронной почте?
- Активный язык — Пожалуйста, не нажимайте «Щелкните здесь» или «Подробнее». Вместо этого используйте активную формулировку, которая имеет ощущение срочности и ясно показывает, что происходит после того, как кто-то нажимает кнопку.
- Получите бесплатный образец продукта сейчас
- Начните 14-дневную бесплатную пробную версию
- Купите спальные мешки сейчас
- Испытайте один месяц бесплатно
- Заказать онлайн сейчас
- Подпишитесь для раннего доступа
- Сделайте CTA заметным — Ваш призыв к действию должен выделяться из окружения, поэтому всегда убедитесь, что он имеет:
- Легко различимый цвет
- Значительное белое пространство вокруг
- Тип шрифта и интервал, которые делают его читаемым с первого взгляда
- Сделать он отзывчивый — Увеличьте его на мобильных экранах, растяните на всю ширину и сделайте его легко кликабельным на смартфонах.
- Персонализируйте призыв к действию — Настройте его не только в соответствии с содержанием электронного письма, но и с предпочтениями подписчика, который его читает. Углубленная персонализация — сложная проблема, но чем глубже вы углубитесь в таргетинг и персонализацию, тем выше будет конверсия вашей электронной почты.
- Сведите к минимуму количество CTA — Вообще говоря, чем меньше призывов к действию у вас будет в информационном бюллетене по электронной почте, тем выше будет ваш рейтинг кликов.Обилие вариантов может легко ошеломить людей.
В информационном бюллетене по электронной почте вы обычно получаете серию призывов к действию. Поэтому в этом случае убедитесь, что тот, с которым вы хотите, чтобы они взаимодействовали, является наиболее важной частью вашего дизайна электронной почты и что вторичные действия хорошо отделены от этого.
Есть ли идеальный размер, цвет или форма CTA?
Apple рекомендует, чтобы любая точка касания была высотой не менее 44 пикселей. Вот почему мы советуем вам иметь призыв к действию выше 44 пикселей.Средняя высота CTA составляет 47,9 пикселей, и самая популярная высота CTA составляет 50 пикселей, — по крайней мере, круглое число.
Общепринятая передовая практика — сопоставить цвет CTA с цветом бренда .
Источник: Reallygoodemails.com
Исследование показывает, что синий цвет является наиболее часто используемым цветом призыва к действию в электронной почте. На самом деле синий — самый любимый цвет в Интернете, поэтому неудивительно, что дизайнеры электронной почты тоже любят синий.
В недавнем глобальном исследовании марсианский зеленый был выбран в качестве любимого цвета в мире.Хотя он называется «Марс-зеленый», никто не может решить, зеленый он или синий.
Источник: Telegraph.co.uk
Как вы думаете, он синий или зеленый? 🙂
Не беспокойтесь, если цвет вашей кнопки не синий. Вы не обязательно обречены. Если вы обнаружите, что красный, желтый или зеленый лучше подходят вашему дизайну, сделайте это.
Кажется, что для кнопок подходят все цвета, кроме коричневого, который не использовался ни в одном дизайне, изученном Reallygoodemails. Я не могу припомнить ни одного дизайна, в котором коричневый использовался бы в качестве цвета CTA, онлайн или офлайн.
Кнопки с закругленными краями кажутся наиболее популярными (54%) , квадратные кнопки находятся на втором месте (28%), а кнопки в форме таблеток — на последнем месте (18% и имеют тенденцию к увеличению).
Если ваша кнопка имеет правильный размер, язык действий, привлекательный цвет, все в порядке, но не забывайте, что A / B-тестирование вашего электронного письма с призывом к действию легко, поэтому часто проверяйте варианты.
Давайте посмотрим на пару вдохновляющих дизайнов с призывом к действию для информационных бюллетеней. Я не включил стандартные дизайны, только те, в которых есть что-то необычное.
Источник: Reallygoodemails.com
В этом электронном письме от KLM цвет бренда сочетается с изображением героя и призывом к действию.
Какой умный способ добавить немного страсти и летнего настроения в «скучный» информационный бюллетень.
В этом письме от Alit используется очень сбалансированная светло-розовая цветовая гамма, чтобы продемонстрировать свое розовое вино.
источник: Reallygoodemails.com
Обратите внимание на текст призыва к действию. Нет «заказать сейчас»; вместо этого они решили использовать что-то более удивительное, но легкое для понимания.
Вот забавный пример из рекламного письма Семальта.
Источник: Reallygoodemails.com
В них есть не только креативный анимированный GIF, но и необычный призыв к действию, который обязательно привлечет ваше внимание, если вы откроете письмо.
Они использовали необычный текст CTA, который на первый взгляд не имеет особого смысла, но в сочетании с анимированным GIF-файлом он работает.
Ознакомьтесь со следующим информационным бюллетенем от Litmus.
Источник: Litmus.com, Reallygoodemails.com
Это действительно довольно длинный информационный бюллетень, но он определенно привлекателен для глаз и прост в использовании. Они творчески играют с разными цветами своего бренда в информационном бюллетене (и обычно на своем веб-сайте), что делает его интересным информационным бюллетенем, который вам не терпится открыть.
Не бойтесь добавить веселья в свои информационные бюллетени. Вы все равно отправляете его людям, которые наводнены скучной ерундой. Если вы можете заставить их улыбнуться и вспомнить вас в чем-то, вы уже намного лучше, чем большинство компаний, от которых они получают электронные письма.
Вот отличный пример разумного использования контрастных цветов, приправленных теневой нижней границей.
Источник: Nordvpn.com, Reallygoodemails.com
Шрифты, кнопки, цвета и интервалы — все это играет важную роль в общем оформлении вашего информационного бюллетеня.
В предыдущих частях статьи я показал вам несколько примеров отдельных элементов, теперь давайте продолжим и посмотрим, какие характерные свойства представлены в привлекательных блоках контента.
Не забывайте о передовых методах проектирования блоков содержимого электронной почты
Действительно сложно расшифровать, что делает один дизайн красивым, а другой оскорбляет наши глаза, но давайте попробуем найти наиболее общие черты хороших дизайнов электронных писем в целом .
Сохраняйте правильное соотношение изображения к тексту
Согласно Email on Acid and Return Path, вы должны стремиться к соотношению текста к изображению 60/40 в ваших информационных бюллетенях по электронной почте.
Стоит отметить, что ваше электронное письмо должно содержать не менее 500 символов текста, поскольку, если у вас меньше, вы скорее всего попадете в ловушку спам-фильтров Outlooks.
Другой передовой совет от Mailchimp гласит, что вам следует стремиться к соотношению текста к изображению 80/20 , что означает, что только часть вашего электронного письма должна содержать изображения.
Независимо от того, придерживаетесь ли вы 60% или 80%, убедитесь:
- В ваших изображениях есть альтернативные тексты (теги alt).
- Избегайте отправки электронных писем, содержащих только одно изображение.
- Проверяйте рейтинг своих писем на спам и корректируйте содержание, если это необходимо.
Оптимизация для сканирования и легкости чтения
Согласно старому, но золотому исследованию UX, большинство людей читают в сети буквой F.
Источник: Nngroup.com
То же самое верно и для электронных писем, но с одной важной оговоркой: большинство из нас сначала не читают электронную почту, а просто сканируем контент, чтобы понять, о чем идет речь. .
Может быть, увлекательная сюжетная линия заставит кого-нибудь прочитать вашу электронную почту целиком, но это редко бывает с большинством информационных бюллетеней.
Используйте пробелы
Не складывайте содержимое вместе. Позвольте различным заголовкам, текстам, кнопкам, изображениям и разделам содержимого вашего информационного бюллетеня дышать.
Пустое пространство очень помогает улучшить читаемость в целом, а также упрощает отслеживание хода информационного бюллетеня.
Важное примечание: используйте пробелы! Используйте одинаковые интервалы в тексте и между блоками содержимого электронной почты, чтобы люди не были разочарованы разными интервалами при прокрутке вашего информационного бюллетеня.
Используйте только качественные изображения и иконки
Пожалуйста, больше никаких скучных стоковых фотографий и иконок! Может быть, это сработает для более взрослой аудитории, но поверьте мне, у людей младше 50 будут мурашки по коже, когда они увидят вокруг иррационально счастливые лица.
Источник: Shutterstock.com
К счастью, существует множество веб-сайтов, на которых вы можете найти бесплатные высококачественные изображения для своих электронных писем.
Если вы хотите создавать изображения с пользовательским наложенным текстом, например, вы можете использовать такой инструмент, как Canva.com, который уже включает в себя множество отличных изображений, шрифтов и адаптивных макетов, которые вы можете легко изменить для своего случая использования.
Держите его чистым и простым
Чистый и простой стиль дизайна стал популярным в последние пару лет как в Интернете, так и в электронной почте.
В настоящее время чистый дизайн — это не отличительный признак, а скорее требование, если вы хотите оставаться в числе самых продвинутых игроков в своей отрасли.
Конечно, есть много старых сайтов и информационных бюллетеней по электронной почте с устаревшим, загроможденным дизайном, наводненным информацией. Но их дни сочтены — даже если они все еще в какой-то степени успешны.
Следите за трендами электронной почты и веб-дизайна
Ежегодно в дизайне есть и другие тенденции, помимо чистого и простого дизайна.Если вы хотите создавать действительно модные и новаторские дизайны, вам обязательно нужно следить за тенденциями дизайна.
Есть только пара сайтов, таких как Reddit или Craigslist, которым удалось выжить с превосходным старым дизайном.
Не воспринимайте их как хорошие примеры для следующего электронного письма или проекта веб-дизайна. Эти сайты живут не благодаря своему дизайну, а благодаря сообществу, которое им удалось создать за эти годы.
Теперь давайте проанализируем несколько отличных дизайнов блоков содержимого электронной почты, которые вы могли бы использовать в своем следующем информационном бюллетене.
Примечание: все примеры в остальной части статьи взяты с замечательного Reallygoodemails.com.
Дизайн блоков информационных бюллетеней в одну колонку
Что делает этот бюллетень замечательным?
- Уникальное и стильное изображение героя
- Легко читаемый заголовок и текст
- Яркий дизайн CTA
Ничего особенного, верно? Но он по-прежнему работает:
- Значимое пользовательское изображение героя
- Легко использовать заголовок и текст
- Просто, по делу CTA
Еще один простой от Zapier:
- Пользовательское изображение героя
- Заголовок включен в виде текста HTML , не написано на изображении
- Большая контрастная кнопка с четким призывом к действию
Пользовательский значок и красивое фоновое изображение могут означать волшебство:
- Огромный заголовок
- Красивое фоновое изображение (не работает в Outlook но имеет тот же цвет фона, что и резервный вариант)
- Простой значок с анимированными эффектами бликов (см. анимированную версию электронного письма здесь)
Дизайн блоков электронной рассылки с двумя столбцами
Даже двухколоночные адаптивные макеты могут хорошо выглядеть, если все сделано правильно, как в этом примере от Airbnb.
- Закругленные углы изображения
- Цветные тексты
- Изображения высокого стандарта
Простой значок и контрастная кнопка призыва к действию с активным текстом.
Целевое предложение тоже может помочь:
- Персонализированное предложение
- Легко узнаваемое изображение продукта
- Кнопка и скидка представлены в ярких цветах
Вы можете мыслить нестандартно и играть с различными адаптивными макетами и цветами как Helix Sleep.
Их дизайн, безусловно, притягивает взгляд. Я бы только добавил немного свободного места в верхнюю часть призыва к действию, а также увеличил бы размер шрифта на 50% или около того.
Пользовательские изображения и креативный копирайтинг по электронной почте выделяют этот сайт от ofakind.com из общей массы.
В этом простом примере с двумя столбцами Campaign Monitor придерживается цветов бренда в столбцах.
Дизайн блоков информационных бюллетеней электронной почты с тремя или более столбцами
Макеты с тремя или четырьмя столбцами гораздо менее популярны, чем макеты с двумя столбцами, поскольку обычно трудно уместить значительный объем письменной информации в контейнеры шириной 200 пикселей.
Вот почему большинство этих дизайнов включают очень короткий текст, привлекательное изображение и небольшой, по сути, призыв к действию.
Penguin.co.uk оживляет игру творческим использованием цвета в своем информационном бюллетене.
Простой и очень минималистичный дизайн также может работать с высококачественными фотографиями продуктов с Huckberry.com.
Даже макеты с четырьмя столбцами могут узнать, если вы включите единственный минимальный текст призыва к действию, как это делает Target.
Просто убедитесь, что вы переупорядочили столбцы на мобильном устройстве и сделали все изображение интерактивным, чтобы эти элементы можно было легко нажимать на экранах мобильных устройств.
Я надеюсь, что приведенное выше вдохновение поможет вам создавать действительно хорошие информационные бюллетени даже самостоятельно, используя конструктор электронной почты, такой как Chamaileon.io.
Дизайн информационных бюллетеней вовсе не обязательно должен быть утомительным, как вы могли убедиться из всех приведенных выше примеров.
Вы также можете поиграть с цветами, пробелами, изображениями и различными макетами. Все они вызовут у ваших подписчиков разные эмоции.
Поверьте, все дело в эмоциях. Если вы не можете заставить их что-либо почувствовать, когда они откроют вашу электронную почту … вы проиграли.Они пойдут дальше.
Сейчас это похоже на заключительные мысли, но мы еще не закончили. Есть еще один элемент дизайна, который я хотел бы рассказать вам, — это нижний колонтитул.
Так как вам нужно включить нижний колонтитул электронного письма в информационный бюллетень, вам нужно взглянуть на передовые методы работы с нижним колонтитулом электронной почты. Создать дизайн нижнего колонтитула информационного бюллетеня непросто, как вы думаете.
Это блок в конце вашего информационного бюллетеня, где вам нужно включить определенную информацию.
Хотя нижний колонтитул является последним элементом информационного бюллетеня электронной почты, он по-прежнему является важной частью дизайна электронной почты.Почему?
Люди ожидают, что нижний колонтитул электронного письма будет присутствовать в информационном бюллетене, несмотря ни на что.
Если вы не включите понятный и визуально привлекательный дизайн нижнего колонтитула в свой информационный бюллетень по электронной почте, вы можете испортить весь пользовательский интерфейс для пользователей, которые дойдут до конца вашего сообщения.
Чтобы ваша рассылка не попала в папку для спама, вам необходимо соблюдать Закон о CAN-SPAM от 2003 года. Информация, которая требуется в нижнем колонтитуле электронного письма CAN-SPAM, — это название компании, адрес компании, город, штат и ссылка для отказа от подписки.
Кроме того, если вы будете использовать информационный бюллетень с заявлением об отказе от ответственности, вам нужно быть особенно осторожным. Существуют определенные типы заявлений об отказе от ответственности, касающиеся контрактов, безопасности, конфиденциальности и т. Д.
Есть определенные элементы, которые вы должны включить в нижний колонтитул электронного письма из-за определенных правил спама, а также другие элементы, которые должны быть там, чтобы соответствовать ожиданиям вашей аудитории.
Но что это?
Компания и / или контактная информация
Здесь должны быть указаны все возможные способы связи с вами, если им есть что сказать.
- Ссылка на ваш веб-сайт — Вы должны включить видимую ссылку на ваш веб-сайт. Ссылка может быть простой текстовой ссылкой или вы можете включить свой логотип и добавить к нему ссылку.
- Ваш адрес электронной почты — Где с вами легко связаться. Это не связано с нижним колонтитулом, но убедитесь, что, если они нажимают «Ответить на ваш информационный бюллетень», они получают не адрес электронной почты «no-reply @», а адрес, который отслеживается вашей командой.
- Ваш физический адрес — Требуется в основном из-за определенных правил спама, но может быть полезен, если у вас есть физический магазин, в котором вы продаете свои товары или услуги.
Варианты публикации и подписки в социальных сетях
Мы знаем, что электронная почта является одним из наиболее эффективных каналов интернет-маркетинга, но это не означает, что вам не нужно иметь дело с другими каналами.
Согласно Salesforce, требуется от 6 до 8 касаний для создания жизнеспособного потенциального покупателя , поэтому чем больше каналов вы используете для общения со своими клиентами, тем выше вероятность, что вы заставите их покупать у вас (опять же).
Может быть, лишь очень немногие люди будут делиться вашим адресом электронной почты с помощью этих значков или даже меньше, например, подпишутся на вас в Twitter.Но добавить туда эти опции — не так уж и сложно, правда?
Просто сделайте социальный обмен и подписку доступными у них под рукой, чтобы максимизировать ваши шансы на распространение информации или ваших подписчиков на других каналах.
Прочие элементы
- Напоминание о разрешении или «Почему вы получили это письмо». Люди получают сотни рекламных писем от компаний и иногда просто не помнят, когда и как они подписались на информационный бюллетень.Это удобное напоминание поможет им поместить ваше письмо в нужный ящик в своей голове.
Хорошее напоминание о разрешении должно четко указывать, кто отправил электронное письмо и когда они подписались на этот список. Если вы недостаточно понимаете, и они не могут вас запомнить, ваше письмо можно легко пометить как СПАМ.
- Политика конфиденциальности — В наши дни конфиденциальность данных вызывает все большую озабоченность у большинства пользователей Интернета. Ссылка на вашу политику конфиденциальности просто показывает им, что вы заботитесь об их информации должным образом.
- Авторские права — Не обязательный элемент нижнего колонтитула, но рекомендуется (как и на веб-сайтах) указывать, что предоставляемый контент принадлежит вашему бренду ©.
- Отказаться от подписки или обновить настройки — Конечно, вы не хотите терять подписчиков, но и не хотите получать жалобы на СПАМ. Вот почему вы должны сделать ссылку для отказа от подписки или ссылку для обновления настроек четко видимой в нижнем колонтитуле электронного информационного бюллетеня.
Те, кто больше не интересуется, могут легко отказаться от вашего списка.Если им не удастся его найти, они, скорее всего, отметят ваше письмо как СПАМ.
Итак, это в значительной степени основной контент, который вы должны включить в нижний колонтитул электронной почты. Но, конечно, вы можете дополнить его дополнительными пунктами, если считаете, что они имеют отношение к вашей аудитории.
Упростите и упростите использование — Не забрасывайте подписчиков электронной почты слишком большим количеством информации в нижнем колонтитуле.
Вот несколько отличных примеров нижнего колонтитула электронного письма, которые помогут вам с дизайном нижнего колонтитула электронной почты.
Если вы хотите включить в нижний колонтитул коллекцию ссылок, подобную карте сайта, убедитесь, что она не переполнена и ее легко сканировать, как в примере ниже с сайта Algolia.com.
Фокус и иерархия — Представьте самое важное действие, которое вы хотите, чтобы ваши подписчики совершили, на самом верху, а остальные включите под ним.
Посмотрите этот пример из «Манчестер Юнайтед», который ясно показывает, что они сосредоточены только на увеличении количества подписчиков на других каналах.
Единственное плохое в этом письме — заключительное предложение: «Пожалуйста, НЕ отвечайте на это письмо». Этого следует избегать в нижних колонтитулах электронной почты. Используйте адрес электронной почты для отправки, на который принимаются ответы от ваших подписчиков.
Сделайте его полезным — Те люди, которые прокручивают до конца информационного бюллетеня, обычно являются вашими лучшими клиентами, поэтому ваша цель должна состоять в том, чтобы удержать их и взаимодействовать с ними любым возможным способом.
Используйте нижний колонтитул, чтобы показать им, что они вам небезразличны и что вы готовы ответить на любые их вопросы.Покажите, что вы заботитесь о них, как в приведенном ниже примере из The New York Times.
Используйте цвета фона творчески — Как вы могли видеть, во всех приведенных выше примерах использовались преимущества цветов фона и «скучная» закрывающая часть письма стала более живой.
Правильное использование цветов может творить чудеса и сделать всю вашу рассылку по электронной почте более запоминающейся и более легкой для ассоциирования с вашим брендом.
В приведенном выше примере от Flywheel повторно используются основные цвета их бренда в нижнем колонтитуле.Вы должны сделать то же самое в дизайне нижнего колонтитула, поскольку это поможет вашим подписчикам идентифицировать адрес электронной почты, а также упростит им узнавание вашего бренда, когда его увидят в другом месте.
У Tookapic другой подход к нижнему колонтитулу. Вместо того, чтобы укреплять свой бренд, они сосредотачиваются на том, чтобы донести до читателей содержательное сообщение.
Даже одна такая строка может повысить ценность вашего информационного бюллетеня и может много значить для некоторых из вашей аудитории.
Самое важное сообщение для вас:
Будьте смелыми и креативными с дизайном информационных бюллетеней!
Дизайн вашей электронной рассылки не должен быть скучным!
По крайней мере, не твое! Если вы дочитали эту статью до самого конца, то уже многому научились.Пришло время принять меры и оживить дизайн ваших информационных бюллетеней.
Поскольку это была превосходная длинная статья, позвольте мне подвести итог наиболее важным для вас моментам:
- Имейте в виду, что дизайн электронной почты имеет свои ограничения .
- Используйте профессиональный редактор электронной почты
- Заголовок электронного письма должен представлять ваш бренд и включать ваш логотип и минимальное меню навигации.
- Старайтесь избегать использования фоновых изображений в разделе / блоке вашего информационного бюллетеня, поскольку они не будут отображаться в Outlook, или если вы это сделаете, убедитесь, что вы добавили соответствующий резервный цвет.
- Используйте анимированных GIF-файлов , чтобы оживить ваши информационные бюллетени, но не переусердствуйте!
- Georgia и Verdana — лучшие веб-шрифты , которые вы можете безопасно использовать в своих электронных письмах.
- Придерживайтесь рекомендуемых размеров шрифта :
- Заголовки: 22–28 пикселей
- Размер основного шрифта: 14–18 пикселей
- Высота строки: 1,4–1,5 раза размер шрифта
- CTA должен выделяться на из ваш дизайн и включить действенную копию!
- Грамотное использование разных цветов, качественных изображений и макетов может сделать содержание вашего информационного бюллетеня и дизайн нижнего колонтитула вызывающим чувство WOW.Если вы мне не верите, просто прокрутите вверх и просмотрите более 40 примеров, которые я привел в этой статье.
Бонусные материалы: Бесплатные шаблоны информационных бюллетеней
Недавно мы опубликовали нашу коллекцию электронных информационных бюллетеней, содержащую более 100+ готовых информационных бюллетеней, которые вы можете бесплатно использовать в своих кампаниях.
Получите доступ к коллекции здесь, в нашем приложении, при создании нового электронного письма. Вы можете изменить их с помощью этого бесплатного конструктора, конструктора и редактора электронной почты. Используйте гибкий редактор перетаскивания и экспортируйте код в свой ESP.
Удачной кампании!
Как отформатировать электронный информационный бюллетень в Outlook | Small Business
Автор гранта Обновлено 10 июня 2019 г.
Несмотря на то, что популярность сторонних служб электронного маркетинга, таких как Mailchimp, с годами выросла, все еще можно создавать и разрабатывать информационные бюллетени компании с помощью Microsoft Outlook. Вы можете создавать шаблоны для информационных бюллетеней в Outlook, чтобы упростить создание электронных писем раз в два или два раза в неделю, а также изменять сохраненные шаблоны с помощью множества опций графического форматирования и форматирования.Если вы не хотите платить за стороннюю программу или предпочитаете использовать одну программу для разработки и отправки всей корпоративной электронной почты, выполните следующие простые шаги в Outlook.
Форматирование информационного бюллетеня в Outlook
Чтобы отформатировать информационный бюллетень в Outlook, сначала создайте шаблон информационного бюллетеня, выбрав его оформление в разделе темы канцелярских принадлежностей Outlook. Эти темы определяют стиль шрифта, цвета фона, изображения и другие элементы дизайна, которые будет включать ваш информационный бюллетень, и хотя в Outlook есть набор предварительно отформатированных тем на выбор, их можно полностью настроить после того, как вы выберете одну из них.
Однако, прежде чем выбрать тему для шаблона информационного бюллетеня, вы должны убедиться, что шаблон электронного письма, который вы собираетесь создать, имеет формат электронной почты HTML. Для этого:
- Откройте свою учетную запись электронной почты Outlook.
- Перейдите к файлу , а затем к опциям .
- Выберите Почта , а затем Составьте сообщения .
- В списке рядом с Составьте сообщения в этом формате сообщения , выберите HTML .
Теперь создаваемый вами шаблон информационного бюллетеня будет автоматически в формате HTML.
Выберите тему для информационного бюллетеня в Outlook
Вот как выбрать тему канцелярских принадлежностей для информационного бюллетеня в Outlook:
- В Outlook выберите опцию New Email .
- Перейти к Файл > Параметры > Почта .
- Выберите Канцелярские товары и шрифты .
- Перейдите на вкладку Personal Stationery и выберите опцию Theme .
- Выберите из множества тем для вашего шаблона информационного бюллетеня. Выберите тот, который соответствует бренду вашей компании или отражает внешний вид других профессиональных информационных бюллетеней в вашей отрасли.
- Введите свои собственные заголовки в предварительно настроенные категории разделов, которые являются редактируемыми заполнителями для содержимого, которое вы добавляете при написании информационного бюллетеня.
- Выберите Формат текста , когда выбран раздел, чтобы выбрать стиль, цвет и размер шрифта для этот раздел.
- Нажмите OK для завершения.
Сохраните тему информационного бюллетеня как шаблон
После того, как вы закончите форматирование информационного бюллетеня, сохраните его как шаблон, чтобы снова использовать его для информационных бюллетеней раз в две недели или два раза в месяц. Вот как это сделать:
- Перейдите в Файл и выберите Сохранить как.
- В раскрывающемся меню типа в окне Сохранить как выберите Шаблон Outlook .
- Назовите шаблон соответствующим образом. Примером может служить шаблон ежемесячного информационного бюллетеня [Название компании] .
- Нажмите Сохранить , чтобы завершить и закрыть шаблон.
Открыть шаблон информационного бюллетеня
После сохранения шаблона вы можете использовать его, открывая его для создания нового сообщения электронной почты Outlook. Чтобы выбрать шаблон информационного бюллетеня для начала составления вашего последнего информационного бюллетеня, выполните следующие действия:
- В разделе Home перейдите к параметру New items .
- Выберите Дополнительные элементы , затем Выберите форму .
- Выберите параметр Искать в и щелкните Пользовательские шаблоны в файловой системе .
- Оттуда перейдите к только что сохраненному шаблону информационного бюллетеня, выберите его и нажмите Открыть .
Теперь вы можете заполнить заранее определенные разделы вашего информационного бюллетеня содержанием этого месяца.
Редактируйте информационный бюллетень Outlook
Введите желаемое содержимое, щелкнув предварительно отформатированный раздел и введя любое содержимое, которое вы хотите отобразить в этом разделе.Повторите процесс для каждого раздела шаблона.
Пока категории остаются неизменными каждый месяц, процесс добавления контента каждые две недели или два месяца будет простым. В противном случае вы можете отредактировать тему вашего шаблона и повторно сохранить ее как новую или альтернативную версию вашего первого шаблона.
Форматирование изображений в информационном бюллетене Outlook
Единственный другой элемент, который следует учитывать, — это добавление изображений в информационный бюллетень электронной почты. Процесс немного отличается в зависимости от версии Outlook, которую вы используете, но он следует тем же общим шагам.Вот как это сделать в новейших версиях Outlook, и процесс аналогичен в более старых версиях. Чтобы добавить встроенное изображение в информационный бюллетень:
- Откройте шаблон информационного бюллетеня.
- Выберите вариант Форматировать текст .
- В разделе Формат выберите HTML .
- Щелкните курсором в том месте, куда вы хотите вставить изображение, и выберите Вставить в верхнем меню.
- В разделе иллюстраций, выберите изображений .
- Перейдите к изображению или нескольким изображениям, которые вы хотите использовать на своем компьютере, выберите их и затем нажмите Insert , чтобы вставить их.
После вставки изображения отрегулируйте размер изображения, чтобы увеличить или уменьшить масштаб изображения, или измените способ взаимодействия изображения с окружающим текстом, выбрав параметр в разделе Параметры макета . Например, вы можете выбрать изображение как In Line с текстом , чтобы изображение располагалось вдоль той же строки текста, в которую оно было вставлено, или выбрать текст для обтекания изображения с помощью With Text Wrapping вариант.
Создайте лучший дизайн на 2021 год
Каролина Петрашкене
Менеджер по контент-маркетингу
Время чтения: 12 минут.Каждый день мы получаем множество писем: длинных, коротких, красивых и некрасивых.К какой категории относятся ваши электронные письма?
Когда электронное письмо попадает в ваш профессиональный почтовый ящик и касается вопросов, связанных с работой, обычно вы не ожидаете, что оно будет эстетичным. Это простые текстовые электронные письма с важными вещами. Для них быть красивым не является критерием.
Однако, если вы открываете рекламный бюллетень, он должен быть хорошо оформлен, иначе это будет раздражать глаза.
И давайте будем честными, с некоторыми электронными письмами такое бывает.
И давайте не будем забывать о главной роли рекламных писем, которая «способствует достижению результатов.«Ни один бренд не хочет, чтобы электронные письма были только красивыми. Им нужны электронные письма, которые будут привлекать их клиентов, привлекать трафик и привлекать аудиторию.
И это, вероятно, основная причина, по которой вам следует уделять пристальное внимание при разработке и планировании информационного бюллетеня.
Так что же делать, чтобы создавать убедительные сообщения, не теряя эстетической привлекательности дизайна электронного бюллетеня?
Продолжайте читать, чтобы узнать, как разработать информационный бюллетень, каковы его основные элементы, основные рекомендации по созданию информационного бюллетеня и тенденции на 2021 год.
1. Что такое дизайн электронной рассылки?
Дизайн информационного бюллетеня электронной почты — это совокупность текстовых и визуальных компонентов вашего сообщения электронной почты. Начиная с лучшей темы и макета информационного бюллетеня, заканчивая логотипом вашего бренда, шрифтами и подходящим интервалом. Все эти элементы имеют значение, когда мы говорим о красивом и эффективном дизайне электронной почты.
Основные компоненты, которые имеют значение
В идеале дизайн вашего электронного письма должен служить основной цели вашего письма.Вот некоторые из самых популярных вещей, которые компании ищут в своих сообщениях электронной почты:
- Сообщите о распродаже и выделите предложение (все взгляды на центральную фигуру — яркое рекламное предложение)
- Представьте новые коллекции со списком новоприбывших
- Повысьте вовлеченность клиентов, рассказав историю бренда, выразив признательность, представив лояльность программы и социальные мероприятия.
- Предоставьте необходимую информацию (в основном транзакционные электронные письма)
Определение цели поможет вам понять направление дизайна электронного письма.Это основные конструктивные переменные, которые вы можете соответствующим образом изменить:
- Просмотр в ленте входящих сообщений: имя отправителя, строка темы и предзаголовок сообщения электронной почты
- Макет электронной почты
- Логотип вашего бренда
- Кнопки с призывом к действию
- Изображения и цвета
- Копия и шрифты
- Интервал
- Справочная информация по электронной почте
- Электронная почта и целостность дизайна вашего бренда
Итак, как вы можете заставить их работать вместе?
2.12 советов по созданию красивого, но эффективного дизайна электронной рассылки
Принимая во внимание огромную конкурентную борьбу в почтовом ящике вашего клиента, дизайн электронного бюллетеня должен с первого взгляда привлекать внимание клиента, чтобы его не удалили и никогда больше не видели. Более того, то, как вы разрабатываете свои почтовые кампании, будет влиять на ваш рейтинг кликов, а также на продажи.
Следуйте этим рекомендациям при создании информационных бюллетеней и наслаждайтесь красивыми, но эффективными маркетинговыми кампаниями по электронной почте!
1.Будьте в соответствии со своим брендом
Надежный стиль бренда означает, что ваши каналы в социальных сетях, веб-сайт, электронная почта и другие средства коммуникации содержат одинаковые или согласованные шрифты, элементы дизайна, цвета, тон голоса и т. Д. Профессиональные маркетинговые агентства называют это «брендбуком».
Если вы будете соответствовать своему стилю бренда, вашим клиентам будет легче идентифицировать вас и укрепить лояльность. В частности, при общении по электронной почте клиенты хотят точно знать, кто к ним обращается, и доверяют только тем письмам, которые кажутся знакомыми.
Согласованность также применима к имени отправителя и строкам темы. Вы можете проверить, что работает лучше, но не изменяйте голосу своего бренда. Например, вы можете подумать об использовании забавных или игривых смайликов в теме письма, если они подходят вашему бренду.
Посмотрите, как AWAY сохраняет солидный фирменный стиль.
Целостность бренда «на выезде»Однако, если вы считаете, что инвестировать в профессиональную версию брендбука слишком сложно для вашего бизнеса, создайте простое руководство по стилю бренда и следуйте ему при создании электронных писем, сообщений для социальных сетей, листовок и других материалов.Составьте список шрифтов, которые уже использовались на вашем веб-сайте, вплоть до цветового кода вашего бренда, и включите любые варианты логотипа, которые можно использовать в материалах вашей компании. Поверьте, это поможет вам сохранить постоянство цифрового внешнего вида вашего бренда.
2. Сохраняйте простоту макета: лучше меньше — лучше
Тип контента, который вы хотите включить в свой информационный бюллетень, будет определять общий макет. Макет с одним столбцом лучше всего подходит для более сфокусированных сообщений; например, последнее напоминание о распродаже в Черную пятницу.
Но многоколоночный макет лучше для отображения разнообразного контента; например, предметы из новой коллекции.
Так или иначе, ваша электронная почта должна быть удобной для мобильных устройств. Говоря это, я имею в виду и то, и другое: скорость отклика электронной почты, а также размер / длину рассылки для чтения на мобильном телефоне.
При создании своей почтовой кампании представьте, что это таблица со столбцами и строками, и подумайте о том, как они будут двигаться, реагируя на разные размеры экрана.
Помните, что:
- Только простые макеты, содержащие до трех столбцов, будут хорошо смотреться на мобильных устройствах.
- Не используйте слишком много контента, потому что в мобильной версии все изображения и другие блоки контента будут сжиматься в один узкий столбец, и ваш информационный бюллетень будет бесконечным. Это никому не нравится.
- Если в вашем информационном бюллетене выделяются различные типы контента, четко определите разделы, используя правильный интервал и линии.
- Учитывайте выравнивание четко определенных секций и симметрию, чтобы избежать визуального шума.
- Одна из самых частых ошибок — это добавление описаний продуктов разной длины. Убедитесь, что они занимают одинаковое количество линий, чтобы избежать беспорядка в дизайне.
3. Используйте высококачественную визуализацию
Качество логотипа вашей компании, а также изображений, которые вы используете при переписке по электронной почте, имеет решающее значение. Они имеют огромное влияние на визуальную привлекательность дизайна вашего информационного бюллетеня и имеют прямое влияние на коэффициент конверсии. Подумайте об этом: при совершении покупок в Интернете только изображение и описание убеждают клиента нажать кнопку «КУПИТЬ».
Так что не забудьте изучить основы:
- Ваш логотип хорошего качества с прозрачным фоном. Если вы хотите выглядеть профессионально, у вас должен быть логотип компании хорошего качества.
- Если вы используете список продуктов, используйте изображения того же размера и стиля. Они не могут быть размытыми, слишком темными или разных размеров. Кроме того, вы можете использовать фильтры для выравнивания всех изображений и получения связного результата.
В Omnisend вы можете найти встроенный редактор изображений, который поможет вам корректировать изображения при создании дизайна электронной почты.
Советы, которые помогут улучшить внешний вид ваших писем:
СОВЕТ №1: Мы видим, что электронные письма с изображением «героя» с ключевым сообщением всегда выглядят наиболее привлекательно. Убедитесь, что основное сообщение находится в верхней части страницы.
СОВЕТ № 2: Подумайте о том, чтобы сделать несколько фотосессий с людьми, которые носят / используют вашу продукцию. Согласно семиотическим исследованиям, для маркетинговых целей изображения, содержащие людей, работают лучше, чем изображения с объектами, пейзажами и т. Д.
СОВЕТ № 3: При использовании фотографий попробуйте уменьшить цвет в окружающем дизайне, чтобы изображения были в центре внимания.
СОВЕТ № 4: Рассмотрите возможность использования типографики для «главной» части электронного письма. Он может очень хорошо заменить образ или дополнить его. Кстати, 3D-типографика — один из самых трендовых элементов в этом году.
СОВЕТ № 5: Всегда ищите вдохновение в разных галереях писем. В этом нет ничего плохого. Вы найдете замечательные идеи и цветовые схемы, которые сможете воплотить в жизнь и получить отличные результаты.
4. Выделите кнопку с призывом к действию
Если вы отправляете своим клиентам рекламное письмо, вы хотите, чтобы они что-то сделали. Это призыв к действию (CTA). Покажите это ясно. Попросите их сделать что-нибудь: посетить ваш магазин, прочитать больше, подписаться на вас в социальных сетях и т. Д. Для этого вы можете связывать изображения, кнопки или текстовые строки. Используйте то, что соответствует вашей цели. Но имейте в виду следующее:
- Люди чаще нажимают кнопки или изображения, а не текстовые ссылки.
- CTA должен быть лаконичным. Используйте активный язык, например купите сейчас, получите свое и т. д.
- В вашем письме не должно быть слишком много кнопок с призывом к действию. В идеале, самый крупный призыв к действию должен быть для ключевого сообщения, а еще несколько — для блоков сопутствующего контента.
- Первая кнопка CTA должна быть над сгибом, чтобы читатели могли видеть ее, когда открывают письмо.
- Сделайте кнопки заметными, используя другой цвет, и не забудьте оставить немного места вокруг кнопки, чтобы она точно выделялась.
- Если ваше электронное письмо более обширное, повторите свой призыв к действию в конце письма. Не заставляйте читателя возвращаться к началу информационного бюллетеня.
5. Создайте удобное для сканирования электронное письмо
Многие исследования показали, что люди не читают каждое слово электронного письма от начала до конца. Они сканируют контент, начиная с верхнего левого угла, и останавливаются на строках темы и изображениях. Только тогда, если жирный текст или изображения привлекут их внимание, они прочтут остальное.Это так называемая модель чтения «F», описанная Якобом Нильсеном.
ИсследованиеNielsen показало, что пользователи Интернета пропускают текст, написанный строчными буквами, что приводит к F-образному рисунку чтения. Соответствующие слова и изображения в левой части экрана, как правило, привлекают больше внимания, чем вещи в правой части, поэтому подумайте о размещении ключевых слов в левой части электронного письма.
Также, если вы используете текст с изображениями, поместите изображения слева, чтобы привлечь больше внимания.
Добавление заголовков и интервалов вокруг них также помогает выстроить визуальную иерархию и привлечь внимание клиентов к продуктам, которые вам нужны больше всего.
См. Пример Pelican Coolers: дизайн письма ведет читателя к основному тексту и призыву к действию.
6. Начните прямо с заголовка сообщения электронной почты
Самый распространенный и лучший метод при создании дизайна информационного бюллетеня электронной почты — это размещение логотипа вашего бренда в верхней части электронного письма. Это место замечают сразу после того, как подписчик открывает ваше сообщение.
Существует множество инструментов дизайна, которые могут сделать дизайн заголовка информационного бюллетеня более доступным и сэкономить ваше время, и одним из хороших примеров является Bannersnack.
Эта часть электронного письма и нижний колонтитул (который мы обсудим позже) должны быть наиболее стабильными и последовательными частями ваших электронных сообщений. Они похожи на вашу подпись, необходимое условие вашей надежности как бренда.
Следующие компоненты в заголовке могут отличаться. У некоторых брендов есть строка меню, у других — небольшие, не слишком навязчивые строки с информацией о доставке или бесплатном возврате (зависит от того, что вы можете предложить). Также есть место для социальных иконок. Вы можете попробовать включить их все или перемешать.
В настоящее время популярные бренды DTC кажутся минималистичными и используют очень мало элементов рядом с логотипом. Это выделяет логотип.
1. Brooklinen
2. Сойлент
7. Завершите право с помощью нижнего колонтитула сообщения электронной почты
Обычно нижние колонтитулы в электронных письмах больше функциональны, чем красивы. Рекламные информационные бюллетени должны содержать юридическую информацию и кнопку «Отписаться». Кроме того, бренды включают ссылки на Условия использования, Политику конфиденциальности и возврата, Часто задаваемые вопросы и т. Д.
Обычно эта информация сжато упакована в нижний колонтитул электронного письма и не беспокоит подписчиков, если они ее не ищут. Но это не значит, что вы не можете думать об эстетике этой части.
Посмотрите несколько отличных примеров, которые могут вдохновить вас на создание красивого, но функционального нижнего колонтитула для ваших писем.
Минималистичные нижние колонтитулы, такие как Harry’s и Ritology, или расширенные, как Bellroy и Stitch Fix, имеют.
1. Гарри
2.Ритология
3. Беллрой
4. Исправление стежка
8. Оптимизируйте свой информационный бюллетень для блокировки изображений (применимо для электронных писем B2B)
Почти в каждом крупном почтовом клиенте по умолчанию включены изображения, особенно сейчас, когда большинство писем открывается на мобильных устройствах. Поэтому, если ваша аудитория использует Gmail, Yahoo и другие ведущие почтовые клиенты, вам не нужно сильно беспокоиться об изображениях в своих письмах.
Однако в некоторых бизнес-клиентах электронной почты (в основном применимых для делового общения B2B) изображения по умолчанию отключены, и их внутренняя фильтрация спама может не подходить для всех электронных писем с изображениями.
Чтобы избежать этого, вы должны использовать такие методы проектирования, как текст ALT, который можно увидеть, вместо заблокированных изображений, пуленепробиваемые кнопки (об этом позаботится Omnisend) и правильный баланс изображений и текста для устранения блокировки изображений. В Omnisend мы предлагаем такое соотношение: 40% визуальных элементов и 60% текста.
9. Используйте подходящие шрифты
Под правильным я подразумеваю размер и безопасный для электронной почты тип шрифта.
Оптимальный размер текста для тела письма — 14-16 пикселей.Текст размером 14 пикселей лучше подходит для более длинных абзацев и 16 пикселей для одного или двух предложений. Заголовки должны быть больше — в пределах 22-42 пикселей.
В электронном письме есть список шрифтов, которые считаются безопасными для использования. Это означает, что при их использовании все ваши подписчики из разных почтовых клиентов будут видеть ваш текст одинаково. Самыми популярными шрифтами, безопасными для электронной почты, являются Arial, Verdana, Helvetica, Georgia, Tahoma, Lucida, Trebuchet и Times.
Вы можете узнать больше о шрифтах в моей предыдущей статье Email Safe Fonts vs.Пользовательские шрифты: что о них нужно знать.
Ниже вы можете найти полную таблицу шрифтов, поддерживаемых Omnisend, с исчерпывающим списком резервных шрифтов, чтобы вы знали, чего ожидать.
10. Осторожно используйте фоновые изображения
В поисках вдохновения для дизайна электронной почты вы найдете множество красивых писем с тематическим фоном. Действительно, они выглядят модно и шикарно. Но имейте в виду, что не все пользователи смогут видеть фон информационного бюллетеня так, как вы хотите.
Начиная с версии 2007 года Outlook не поддерживает фоновые изображения. То же самое и с некоторыми другими крупными почтовыми клиентами. Чтобы избежать неудобных метаморфоз в дизайне, всегда используйте сплошной цвет фона в качестве запасного варианта и убедитесь, что важная информация или изображения отсутствуют только в фоновом изображении.
11. Проверить перед отправкой
Не забудьте отправить тестовое письмо на свой почтовый ящик. Откройте его на десктопе и мобильном телефоне. Более 50% всех клиентов открывают электронные письма на своих мобильных устройствах, поэтому крайне важно, чтобы электронные письма хорошо смотрелись на маленьком экране.Пользователи Omnisend могут использовать предварительный просмотр электронной почты на настольных и мобильных устройствах в редакторе кампании. Не забудьте проверить!
3. Самые яркие тенденции дизайна электронной почты на 2021 год
Как и все остальное, тенденции дизайна электронной почты с годами входят и выходят из моды.
Ваше сообщение может выглядеть классическим, но в то же время в нем слишком много традиционного, что может привести к потере заинтересованности.
Иногда небольшие изменения могут исправить это, и ваша электронная почта снова будет выглядеть великолепно.Итак, какие последние тенденции в электронной почте вы должны учитывать при разработке своих писем?
1. Интерактивные элементы и геймификация
Интерактивные элементы в электронной почте повышают вовлеченность клиентов. Это факт.
Видео, движущиеся изображения .gif, новые технологии, такие как изображения APNG и динамический контент AMP, — все это чрезвычайно модно в 2021 году.
В начале 2019 года Gmail представила функциональность AMP (динамическое содержимое) для повышения интерактивности электронных писем.Некоторые поставщики услуг электронной почты уже приняли его и позволяют своим клиентам включать карусели, галереи изображений и функции добавления в корзину в свои электронные письма.
К сожалению, Apple Mail / iPhone / iPad OS пока не поддерживает эту функцию. Таким образом, значительная часть аудитории электронной коммерции по-прежнему не может получить такой пользовательский интерфейс.
Однако шаг за шагом мы приближаемся к этому, и 2021 год может стать годом интерактивности.
В Omnisend вы можете найти некоторые интерактивные элементы (скретч-карту и подарочную коробку), которые отличаются по своей природе.У них есть два больших преимущества:
- Полная поддержка почтовыми клиентами.
- Мощность, чтобы удвоить, а иногда даже утроить частоту кликов.
2. Смелые цвета против минималистичного «чистого» дизайна
Этот год по-прежнему благоприятен для минималистичного дизайна. Вы не ошибетесь, выбрав простые линии, большое количество интервалов и шрифты без засечек.
Однако смелые дизайнерские решения и яркие цвета только начали действовать. Темный фон, контрастные цвета все чаще используются для привлечения внимания к основному призыву к действию.
3. 3D и футуристические иллюстрации
В прошлом году многие модные бренды использовали мотивы 90-х.
В 2021 году мы увидим угасание этой тенденции и появление новых. Все больше и больше брендов используют футуристические мотивы и 3D-эффекты. Вы можете определенно опробовать их для некоторых случайных кампаний по электронной почте и посмотреть, как ваша аудитория принимает эту новую тенденцию.
Перейдите по ссылке, чтобы узнать больше о грядущих тенденциях в области дизайна электронной почты.
4. Полный перечень эффективных элементов дизайна информационного бюллетеня
Существует множество различных дизайнов информационных бюллетеней по электронной почте, которые вы можете протестировать в своем магазине, и вы можете использовать руководящие принципы в качестве ориентира для включения лучших элементов.Следуя приведенным выше правилам и советам для рассылки, вы улучшите дизайн электронной почты, а также улучшите конверсию.
Вот удобный контрольный список, который можно использовать при составлении следующего информационного бюллетеня:
- Логотип выглядит на высшем уровне. 👌
- Главное сообщение броское и энергичное. 💪
- Призыв к действию активен. 🎬
- Все изображения выглядят резкими, не размытыми и не растянутыми. ✨
- Все заголовки одинакового размера и одинаковые. 🧐
- Интервалы и форматирование электронной почты согласованы.🧐
- Все изображения, заголовки продуктов и кнопки имеют гиперссылки и ведут на ваш сайт. 🎯
- Социальные иконки на месте. 😎
- Юридический приговор, физический адрес компании, а также кнопка отказа от подписки находятся в нижнем колонтитуле. ⚖️
- На ваш почтовый ящик отправлено тестовое письмо ✅
Запустите 14-дневную пробную версию Omnisend и откройте для себя готовые шаблоны информационных бюллетеней Omnisend для ваших почтовых кампаний.
Начать бесплатную пробную версию .