Рассылка писем html: бесплатные инструменты для маркетолога — Журнал Mindbox о разумном бизнесе

Табличная верстка электронной рассылки обеспечивает совместимость с наибольшим числом почтовых клиентов и сервисов. Многие клиенты и сервисы не поддерживают (или не полностью поддерживают) CSS, которые нужны для DIV-верстки. Некоторые почтовые программы не поддерживают загрузку фоновых изображений (например, MS Outlook).

Дизайн электронной рассылки должен быть несложным. При разработке дизайна постарайтесь придерживаться этих правил:

• Основные шрифты должны быть из стандартного набора
• Текст, который написан на изображении, будет сделан в виде изображения. Чтобы текст можно было редактировать (то есть текст был текстом), его необходимо разместить поверх однотонного фона

Если вы находитесь в поисках дизайнера, рекомендуем вам обратить внимание на работы наших дизайнеров.

Да. Более подробно смотрите тут.

Оптимальная ширина электронного письма составляет от 600 до 700 пикселей.

В e-mail письмах все изображения должны храниться на стороннем сервере. Если у вас нет сервера, мы абсолютно бесплатно предоставим свой.

К сожалению, нестандартные шрифты можно внедрить только картинкой.

Вас могут заинтересовать следующие услуги

Как верстать email письма — инструкция от А до Я

Представьте: ваше письмо готово и выглядит одинаково красиво на всех устройствах. Вот только это далеко от реальности: различные почтовые программы — Gmail, Яндекс.Почта и т. п.) по-разному отображают один и тот же HTML-код. Поэтому задача верстальщика — не просто перевести дизайн шаблона в код, но и сделать так, чтобы рассылка везде выглядела хорошо. Об этом и поговорим.

Табличная вёрстка

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

По сути, HTML-вёрстка для email-рассылки — это набор таблиц, которые находятся в других таблицах. Мы заглянули в вёрстку и использовали внутренние значения border, заменив их на 1:

Особенности и ограничения вёрстки электронных рассылок

Тег <style>

Этот тег задаёт стили CSS для HTML-вёрстки писем для рассылки — шрифты, цвета, расположение отдельных блоков и других визуальных элементов.

Важная информация: style поддерживается не всеми почтовыми клиентами (вот простая таблица, которая это показывает). Поэтому и медиазапросы могут обернуться проблемами — они будут работать не везде.

Сокращённая форма стилей

Так как не все почтовые клиенты поддерживают тег <style>, все стили нужно инлайнить — писать их в атрибуте и не в сокращённой форме, а в полной. Сравните два варианта:

Сокращённая форма

h2 {

  color: #fff;

}

Полная форма

h2 {

  color: #ffffff;

}

Нам нужен второй. Кстати, для инлайна стилей и «перевода» сокращённой формы в полную можно использовать инлайнеры — такой сервис уже встроен в Letteros.

Шрифты

Шрифты в вёрстке имейлов — тот случай, когда лучше не отступать от классики и использовать только стандартные веб-шрифты. Вот стандартный список шрифтов, применяемых для HTML-писем:

font-family: Arial, Helvetica, sans-serif;

font-family: Arial Black, Gadget, sans-serif;

font-family: Georgia, serif;

font-family: MS Sans Serif, Geneva, sans-serif;

font-family: MS Serif, New York, sans-serif;

font-family: Tahoma, Geneva, sans-serif;

font-family: Times New Roman, Times, serif;

font-family: Trebuchet MS, Helvetica, sans-serif;

font-family: Verdana, Geneva, sans-serif.

Если подключаются другие шрифты, нужно помнить, что это будет работать только в тех почтовиках, где поддерживается тег <style>. 

Размер HTML-кода

Стоит знать: почтовый клиент Gmail обрезает email, код HTML которых превышает 100 кб. Так пользователи увидят слова «Письмо показано не полностью» и ссылку на полный текст:

Чтобы email не обрезались, нужно сокращать их код до 100 кб. Для этого можно использовать Минификатор кода — он сжимает код в одну строку и убирает все лишние символы. Так можно сэкономить около 20% килобайт.

Изображения

Чтобы все изображения (в том числе и фоновые) в письме отобразились корректно, главное использовать только следующие форматы — jpg, gif и png. 

Технических ограничений по весу изображений в шаблонах писем нет. Но при мобильном интернете после клика по теме письма очень «тяжёлые» картинки будут долго открываться. Поэтому картинки для баннера должны весить не больше 150 килобайт, а все остальные — не больше 50.

Чтобы сжать картинку до нужно размера, можно воспользоваться специальными сервисами — Optimizilla и TinyPNG. Или встроенным сервисом в Letteros.

JavaScript

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

Работает AMP пока не везде: Gmail, Mail.Ru, Yahoo! Mail технологию уже освоили, а вот Яндекс ещё нет, и в его почтовых сервисах AMP-функционал отображаться не будет. 

Опросы

В письмах бывают опросы, а в них — чекбоксы, галочки, поля для ввода и другие детали, которые не поддерживаются в вёрстке. Как их сделать?

Первый способ — это NPS-опрос с одним закрытым вопросом в стиле «Оцените нашу работу от 1 до 10». Результаты покажут, как подписчик оценил работу, почитав ваше письмо:

Второй способ подходит для открытых вопросов: на кнопку (или в любом другом месте) в рассылке вешается ссылка на опрос в Google Forms.

Третий вариант — нечто среднее между первыми двумя. Просто вставляем в электронное письмо вопрос с несколькими кнопками ответа — и пользователь переходит на сайт, где ответ на первый вопрос уже дан, но есть ещё несколько неотвеченных.

Добавление в календарь

Подписчик может добавить в свой календарь событие из рассылки — вот как это работает: 

1. Получает рассылку с анонсом события.
2. Нажимает на кнопку «Добавить в календарь».
3. Календарь автоматически открывается и предлагает добавить событие.

Чтобы всё получилось, нужно сделать календарь публичным, открыть доступ на событие для всех, скопировать ссылку и последнее — отправить её пользователям. Это работает со всеми популярными типами календарей: Google, Яндекс, Yahoo!, Mail.ru, Outlook или iOS. В этой статье есть подробная инструкция. 

Счётчики обратного отсчёта

Таймер обратного отсчёта — отличный инструмент, чтобы напомнить в цепочке промописем: нужно поторопиться.

Чтобы таймер работал корректно, его лучше сверстать скриптом — либо собственным, либо использовать сервисы Sendtric или MotionMail.

Отступы в вёрстке рассылок

Отступы — одни из основных элементов вёрстки, и часто в письмах с ними возникают проблемы. Поэтому поговорим и о них тоже.

Свойство padding устанавливает внутренние отступы со всех сторон элемента. Но вертикальный отступ внутри структуры body можно задать и с помощью пустой таблицы с указанием высоты самого отступа. 

<table width=»100%» border=»0″ cellspacing=»0″ cellpadding=»0″>

   <tr><td height=»10″ style=»font-size: 0; line-height: 10px;»></td></tr></table>

Font-size обнуляем. Ещё вариант — отбивка отступа линией. Вот такой:

Её код: 

 <table width=»100%» border=»0″ cellspacing=»0″ cellpadding=»0″>

       <tr><td align=»left» valign=»top» style=»border-top-width:1px;border-top-style:solid;border-top-color:#E7E7E7;»>

       </td></tr>

       </table>

Это таблица, у которой нет никакой размерности. Значение border-top-width как раз и указывает на линию толщиной 1px серого цвета border-top-color, а значение border-top-style задаёт линии сплошной стиль solid. Есть ещё несколько значений, которые можно использовать:

• none обнуляет линию;
• dotted состоит из набора точек;
• dashed указывает на пунктирную линию;
• double создаёт двойную линию;
• groove для эффекта вдавленной линии;
• ridge отвечает за рельефную линию; 
• inset и outset определяют трёхмерную линию. 

Margin же в CSS определяет внешний отступ на всех четырёх сторонах элемента:

margin-top, margin-right, margin-bottom и margin-left.

Осталось самое интересное — мобильная адаптация. 

Мобильная адаптация 

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

Для этого нужно указывать размер каждого блока в процентах, а не использовать пиксели — и HTML-вёрстка email-писем подстроится под разные экраны. Такой подход называют резиновым. 

Перестраивающиеся блоки

Картинки на мобильных устройствах уменьшаются пропорционально ширине экрана. Как это работает: 

В адаптивной вёрстке элементы рассылки на экране мобильного перестраиваются друг под друга по умолчанию:

Раз — и картинка уехала вниз. 

Два перестраивающихся блока

По сути, два перестраивающихся блока — это два блока div, которым задано свойство display со значением inline. Оно определяет, что элемент будет отображаться как встроенный инлайн-блок. 

Инлайн-блоки занимают всю заданную ширину контейнера. Соответственно, если использовать ширину письма в 600px, то два одинаковых контейнера будут по 300px. Вот пример кода:

<table width=»100%» border=»0″ cellspacing=»0″ cellpadding=»0″>

   <tr><td align=»center» valign=»top» style=»font-size: 0px;»><!—

   Item —><div style=»display: inline-block;vertical-align:top;width:300px;»>

       <table width=»100%» border=»0″ cellspacing=»0″ cellpadding=»0″ style=»border-collapse:collapse;»>

           <tr><td align=»center» valign=»middle» style=»font-size: 14px;»>

               <table width=»100%» border=»0″ cellspacing=»0″ cellpadding=»0″ >

                   <tr><td align=»center» valign=»top»>

                       контент

                   </td></tr>

               </table>

           </td></tr>

       </table></div><!— Item END—><!—[if (gte mso 9)|(IE)]>

       </td>

       <td valign=»top» style=»width: 300px;»>

   <![endif]—><!—

   Item —><div style=»display: inline-block;vertical-align:top;width:300px;»>

       <table width=»100%» border=»0″ cellspacing=»0″ cellpadding=»0″ style=»border-collapse:collapse;»>

           <tr><td align=»center» valign=»middle» style=»font-size: 14px;»>

               <table width=»100%» border=»0″ cellspacing=»0″ cellpadding=»0″ >

                   <tr><td align=»center» valign=»top»>

                       контент

                   </td></tr>

               </table>

           </td></tr>

       </table></div><!— Item END—>

   </td></tr>

   </table>

Cellpadding и cellspacing, естественно, обнуляем, а td align задаём center. Закрывает код первого блока условный комментарий для Outlook — хотя ему вообще не нужны перестроения, ведь это десктопный почтовик. Но иначе он не увидит закрывающий тег </td> в первом контейнере. 

Второй блок — почти такой же, только с условным комментарием для Outlook.

В итоге таблица выглядит так:

А если экран сузится даже на один пиксель, блоки перестроятся. Пример:

Если же необходимо задать и использовать разную ширину ячеек, действуйте так: 

<table width=»100%» border=»0″ cellspacing=»0″ cellpadding=»0″>

   <tr><td align=»center» valign=»top» style=»font-size: 0px;»><!—

   Item —><div style=»display: inline-block;vertical-align:top;max-width:400px;width=100%»>

       <table width=»100%» border=»0″ cellspacing=»0″ cellpadding=»0″ style=»border-collapse:collapse;»>

           <tr><td align=»center» valign=»middle» style=»font-size: 14px;»>

               <table width=»100%» border=»0″ cellspacing=»0″ cellpadding=»0″ >

                   <tr><td align=»center» valign=»top»>

                       контент

                   </td></tr>

               </table>

           </td></tr>

       </table></div><!— Item END—><!—[if (gte mso 9)|(IE)]>

       </td>

       <td valign=»top» style=»width: 200px;»>

   <![endif]—><!—

   Item —><div style=»display: inline-block;vertical-align:top; width:200px»>

       <table width=»100%» border=»0″ cellspacing=»0″ cellpadding=»0″ style=»border-collapse:collapse;»>

           <tr><td align=»center» valign=»middle» style=»font-size: 14px;»>

               <table width=»100%» border=»0″ cellspacing=»0″ cellpadding=»0″ >

                   <tr><td align=»center» valign=»top»>

                       контент

                   </td></tr>

               </table>

           </td></tr>

       </table></div><!— Item END—>

   </td></tr>

   </table>

Здесь width превратился в max-width, потому что размер стал больше 300px: если задать жёстко ширину, экран «упрётся» в 400px. Теперь наша таблица выглядит так:

А так — при перестроении:

То же самое и с баннерами. Часто контент баннера разделён на две стороны: слева — текст, справа — картинка:

При адаптации баннер может перестраиваться по-разному — правая колонка может «уйти» под другую:

Но можно и наоборот — чтобы сначала текст, после — изображение. Так мы добрались до обратного перестроения блоков. 

Обратное перестроение блоков

Такая вёрстка для email-рассылки работает примерно так же, но есть одно но: атрибут dir. Он используется для задания направления: 

• ltr (Left To Right) — текст отображается слева направо;
• rtl (Right To Left) — справа налево.

Код начинается с table border, далее tr служит контейнером для создания строки таблицы: 

 <table border=»0″ cellspacing=»0″ cellpadding=»0″ width=»100%»>

   <tr><td dir=»rtl» align=»center» style=»font-size: 0px;»><!—[if (gte mso 9)|(IE)]>

       <table border=»0″ cellspacing=»0″ cellpadding=»0″ width=»100%»>

       <tr><td width=»300″ style=»width: 300px;» dir=»rtl»>

       <![endif]—><!—

       Item —><div style=»display: inline-block; vertical-align: top; width: 300px;»>

       <table width=»100%» cellpadding=»0″ cellspacing=»0″ border=»0″ dir=»ltr»>

           <tr><td align=»center» style=»font-size: 14px;»>

               Блок 2

           </td></tr>

       </table>

       </div><!— Item END—><!—[if (gte mso 9)|(IE)]>

       </td><td width=»300″ style=»width: 300px;»>

       <![endif]—><!—

       Item —><div style=»display: inline-block; vertical-align: top; width: 300px;»>

        <table width=»100%» border=»0″ cellspacing=»0″ cellpadding=»0″ dir=»ltr»>

           <tr><td align=»center» style=»font-size: 14px;»>

               Блок 1

           </td></tr>

       </table>

       </div><!—[if (gte mso 9)|(IE)]>

       </td></tr>

       </table>

       <![endif]—></td>

   </tr>

   </table>

Здесь td align выравнивает содержимое ячейки по горизонтали. Вот пример, как код отобразится на большом экране:

А так — на мобильном: 

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

Адаптация изображений

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

Чтобы картинка шириной больше 300px начала адаптироваться и не ломала вёрстку, в стилях прописываем ширину в процентном соотношении (100%), и максимальную ширину картинки img (600px), используя резиновый подход:

<span style=»font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 16px;color:#000000;»>

<img src=»creative-main. png» width=»600″ alt=»Альтернативный текст» border=»0″ style=»display: block; width: 100%; max-width: 600px» />

   </span>

Десктопные версии (в том числе Outlook) увидят запись width=»600″ и покажут баннер шириной 600px. Google читает запись width: 100%; max-width: 600px и отобразит изображение на всю ширину, но не более 600px. Так получится масштабирование изображения, которое не помешает адаптироваться всему остальному контенту письма. 

Кстати, не забудьте в alt прописать альтернативный текст — без него никуда. 

Масштабирование кнопок

Бывает, что кнопки растягивают на всю ширину экрана:

Вот как будет масштабироваться такая кнопка в мобильной версии:

<table width=»100%» border=»0″ cellspacing=»0″ cellpadding=»0″ style=»width: 100%;»>

   <tr><td align=»center» valign=»middle» height=»50″ bgcolor=»#000″ style=»height: 50px; display: block; background-color: #000000;»>

       <!—[if gte mso 9]>

       <table border=»0″ cellspacing=»0″ cellpadding=»0″>

       <tr><td nowrap align=»center» valign=»middle» height=»50″ style=»padding: 0 30px;»>

       <![endif]—>

       <a href=»#» target=»_blank» style=»font-family: Arial, Helvetica, sans-serif; font-size: 24px; line-height: 50px; color: #ffffff; white-space: nowrap; font-weight: normal; text-decoration: none; display: block; padding: 0 30px;»>

           Текст кнопки

       </a>

       <!—[if gte mso 9]>

       </td></tr>

       </table>

       <![endif]—>

   </td></tr>

   </table>

Чуть разберём: height и line-height здесь одинаковые, также как background и bgcolor. Target задано свойство _blank — так страница загрузится в новом окне браузера.

Важно, чтобы высота строки соответствовала высоте кнопки, а её текст был меньше 300px в ширину. Если будет больше — текст либо сломает адаптацию, упёршись в края кнопки при сужении [при наличии свойства white-space со значением nowrap], либо неминуемо перестроится и вылезет за пределы кнопки.

Тёмная тема

Как это работает? Всё просто: при включении Dark Mode фон страницы становится тёмным, а шрифт — светлым. 

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

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

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

Ещё лучше — сделать фон таким цветом, на котором будет хорошо читаться как белый текст, так и чёрный:

Если фон будет верстаться кодом, его цвет тоже будет инвертироваться. Однако какие-то градиенты нужно верстать картинкой: прямой градиент из двух цветов легко сверстать кодом, но если он более сложный — уже не получится и придётся использовать классический баннер. 

Чёрно-белые или серые иконки, которые используются в дизайне письма, должны быть с обводкой в цвет фона (1–1,5 px). В светлой теме её не будет видно, зато в тёмной — ещё как. Это же правило относится к нестандартным шрифтам, которые используются в заголовках.

Если кнопку верстать кодом, она тоже будет инвертироваться. Когда в светлой теме у кнопки есть обводка, этого можно избежать: верстать кнопки картинками, добавляя заливку в цвет фона. В светлой теме это будет выглядеть как обводка, а в тёмной — как обычная кнопка. Рекомендуем использовать этот приём.

Как сделать так, чтобы вёрстка точно не «поехала»

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

Платформа показывает отображение письма на огромном количестве (100+) популярных устройств, а встроенные сервисы сразу проверяют письмо на ошибки — и рассылка выглядит красиво как на десктопе, так и в мобильных почтовиках: вёрстка писем для email-рассылки адаптируется под любой вид устройства. Там же можно тестировать рассылки и использовать другие возможности сервиса.

Посмотрите демо и переходите на Letteros, где на создание писем уходит 15 минут.

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

Верстка адаптивных писем для email-рассылки

На эффективность рассылки влияет множество факторов. Один из главных – внешний вид. За него отвечают верстка и хороший дизайн.

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

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

Виды верстки email-рассылки

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

У каждого инструмента есть свои преимущества и недостатки.

HTML-верстка

HTML-верстка позволяет реализовать практически любое нестандартное решение: интерактивные элементы, сложный дизайн, тематическое оформление. Правильно сверстанные вручную письма корректно отображаются в разных почтовых сервисах и на разных устройствах.

Минус верстки рассылки в HTML в том, что она, как и верстка сайта, требует навыков и знания кода, но, в отличие от веб-страниц, тут необходим еще и опыт работы с почтовыми рассылками, понимание, как отображается верстка в различных почтовых клиентах. Если вы ими не владеете – быстро сверстать адаптивные письма для email-рассылки не получится. Чтобы сделать письмо, нужно подключить верстальщика, который будет писать код с нуля. А для этого не всегда есть время и ресурсы.

Сложная рассылка от спортивного бренда – здесь много кнопок, ссылок, далее идет каталог товаров

Верстка письма для рассылки в блочном редакторе

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

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

А если крутой дизайн не нужен, сам маркетолог может загрузить картинки, добавить кнопки со ссылками и распределить текст.

Более простое письмо с сертификатом на скидку от фотостудии – здесь есть картинка, текст, ссылка на сайт и уникальный код

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

Стандартные возможности верстки в редакторе drag’n’drop:

• добавлять блоки с текстом
• вставлять изображения
• добавлять кнопки, например «Поделиться»
• давать ссылки на соцсети в формате иконок

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

В разных сервисах рассылок свои инструменты, но работают они по схожим принципам. Мы покажем, как собрать письмо, на примере сервиса Sendsay.

Верстка рассылки в сервисе Sendsay

Когда письмо нужно собрать быстро и c минимальными усилиями, можно воспользоваться готовыми шаблонами. В сервисах почтовых рассылок есть базовые шаблоны и тематические. Базовые шаблоны пустые ― их нужно заполнять самостоятельно. У тематических уже есть дизайн, который можно отредактировать: поменять цвет кнопок, текст, ссылки и запускать рассылку.

Собирать письма по готовым шаблонам удобно в Sendsay. После регистрации и авторизации вам предложат создать рассылку.

Кликаем «Создать выпуск», далее выбираем Email

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

&nbsp; Возможности верстки писем встроенного редактора сервиса&nbsp;Sendsay

Если нужно быстро сверстать типовое письмо, выберите шаблон из галереи – останется только добавить в него информацию. В сервисе есть базовые пустые макеты (каталог, оповещение, приветственное письмо), а есть тематические на разные случаи (дайджест, Черная пятница, 8 марта).

&nbsp; Базовые шаблоны писем в сервисе&nbsp;Sendsay

&nbsp; Тематические шаблоны писем в сервисе&nbsp;Sendsay

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

Пример верстки рассылки в блочном редакторе сервиса Sendsay

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

&nbsp; Интерфейс и набор инструментов блочного редактора сервиса&nbsp;Sendsay

Добавьте нужное количество колонок исходя из прототипа. Самая простая структура – одна-две колонки. Большинство браузеров и приложений корректно отображают  такие письма.

На промежуточном этапе письмо может выглядеть так

Выберите нужные элементы и перетащите в тело письма. Настройте отображение: расположение, цвет, размеры.

&nbsp; Следующий этап верстки писем для email-рассылки на примере сервиса&nbsp;Sendsay

Добавьте иллюстрации, впишите текст, вставьте ссылки для кнопок, баннеров, иконок.

Письмо почти готово

Проверьте адаптивность письма – то, как оно отображается на разных устройствах. Для этого во встроенном редакторе есть панель с разными гаджетами: ноутбук, планшет, смартфон. Кликнув на любой из них, увидите, как выглядит письмо, если открыть его на выбранном устройстве.

Так сверстанное письмо будет выглядеть на вертикальном экране смартфона

На что обратить внимание при верстке

Не упустите несколько ключевых моментов:

• Не забудьте, что почтовые клиенты не любят тяжелые письма. Если вес письма будет небольшим – больше вероятности, что оно отобразиться и не попадет под кнопку «Показать содержимое».
  Величина письма, самой верстки и вложенных файлов, должна быть не более 102 Кб и 5 Мб.
• Добавляйте кнопки действий и ссылки на соцсети или для перехода на сайт.
• Учтите, если блоки несимметричны, они могут некорректно перестроиться в мобильной версии письма. Если так и произошло – поправьте расположение элементов, установив отступы вручную. Симметричные рассылки в большинстве случаев адаптируются под разные устройства корректно.

В финале проверьте, как письмо отображается в разных браузерах и почтовых клиентах (Outlook, Gmail, Yandex, Mail.ru), сделав тестовую рассылку. По умолчанию верстка, выполненная в блочном редакторе, корректно отображается в большинстве популярных почтовых клиентов. Если ваша аудитория пользуется экзотическими почтовыми программами, стоит проверить, как в них отображается письмо.

Теперь вы знаете, как можно собрать рассылку без специальных навыков. Но такие письма все равно ограничены в форматах и дизайне. Если хочется реализовать что-то необычное, сделать супердизайн, придется обратиться к специалистам: дизайнер сделает макет письма, а верстальщик превратит его в код.

В Sendsay есть HTML-редактор, в котором вы можете как отредактировать готовый код, так и написать его с нуля.

Как верстать письма в HTML-редакторе сервиса Sendsay

Первый шаг в верстке HTML-письма – создание макета. На данном этапе создается дизайн и продумывается структура будущей рассылки. Подробнее можно почитать в нашей статье «Гид по дизайну в электронной рассылке».

На платформе рассылок Sendsay простой и удобный редактор кода. Чтобы в него попасть, кликните «Создать выпуск», выберите Email и среди предложенных вариантов по созданию письма – в HTML-редакторе.

&nbsp; Создание рассылки в сервисе&nbsp;Sendsay

Откроется пустая страница для ввода кода. Во второй части экрана письмо отобразится таким, каким его увидит получатель.

Для удобства можно переключать тон темы со светлого на темный и наоборот

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

Как верстать HTML-письма: основные правила

При верстке email-рассылок в HTML-редакторе нужно соблюдать несколько принципов:

• Использовать табличную верстку. При таком способе блоки с контентом помещаются внутрь одной общей таблицы. Благодаря этому сообщения нормально отображаются в почтовиках и браузерах, которые не поддерживают новые версии HTML и CSS.
• Применять универсальные HTML-теги и атрибуты. Для верстки рассылок нужно использовать универсальные элементы кода, потому что не все браузеры считывают даже некоторые стандартные теги.
• Использовать встроенные стили CSS. Это атрибуты, которые отвечают за оформление адаптивного письма в HTML. Их можно прописать в коде или отдельно и вставить в код ссылку на правила оформления. Но чтобы email-письма корректно отображались всеми клиентами, нужно описать CSS как атрибут в элементах HTML (inline-CSS), либо прописать общие стили для всего письма в head документа.
• Указывать конкретные атрибуты для некоторых элементов HTML. Для таблиц прописывать ширину, расстояние от рамки до содержимого, отступ между ячейками. Для текста цвет, размер, межстрочный интервал, для изображений – ширину и так далее. Так почтовик не поставит эти значения по умолчанию, а возьмет из кода, и верстка не рассыпется.
• Указывать фиксированную ширину письма. В среднем – от 600 px до 700 px. Благодаря этому на мобильных устройствах письмо нужно будет листать вниз, а не в бок.
• Использовать стандартные шрифты. Чтобы текст везде отображался одинаково, пользуйтесь шрифтами, которые поддерживают все почтовые клиенты и устройства, например, Helvetica или Arial.

Для верстки почтовых рассылок подходит доктайп 4.01 (поддерживает все актуальные элементы и атрибуты) и кодировка UTF-8 (наиболее распространенная общепринятая кодировка).

Адаптивная верстка email-писем может предполагать создание плавающих блоков, которые располагаются на экране горизонтально или вертикально в зависимости от его размеров, или подстраивающегося содержимого. Во втором случае письмо адаптируется за счет изменения внутренних элементов – уменьшения картинок, кнопок.

Как может выглядеть адаптивная страница на разных устройствах

Для создания адаптивных писем используют:

• Гибридную верстку. Контент заключают в теги <center>, по горизонтали располагают теги <span> с указанной шириной. Тогда 2-3 колонки в письме на мобильном устройстве перестроятся в одну.
• Медиа-запросы. Это команды, которые подстраивают письмо под разрешение устройства. Пользователю будет комфортно читать сообщение с любого экрана. Однако не все почтовые клиенты их поддерживают.
• Mobile First. Принцип, при котором письмо сначала верстают под мобильные гаджеты, а потом адаптируют для компьютеров.

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

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

Делаем выводы и повторяем главное

Если вам нужно быстро сверстать несложную рассылку самостоятельно – используйте готовые шаблоны или блочный редактор сервиса рассылок. Нужно что-то посложнее – обратитесь к специалистам по созданию дизайна и верстке письма с нуля в HTML-редакторе.

Что нужно вспомнить перед тем, как верстать рассылку:

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

Мы разобрали основные нюансы верстки адаптивного письма. Как сделать рассылку с нуля от стратегии и текста до анализа эффективности, рассказали в этой статье – «Как сделать рассылку по email с нуля: инструкция».

Над статьёй работали:

Похожие статьи

9 полезных советов и 12 сценариев email-рассылок для интернет-магазинов

19. 10.2019

Как определить лучшее время для маркетинговой рассылки

09.06.2017

Присоединяйтесь к нам в соцсетях

Разница между обычным текстом и электронной почтой в формате HTML Но правильный ответ есть, и он не так однозначен, как многие надеются.

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

HTML и обычный текст: в чем разница?

Давайте начнем с краткого обзора различий между электронными письмами в виде простого текста и электронной почтой в формате HTML. Самое простое объяснение состоит в том, что HTML будет содержать изображения и цвета, в то время как электронное письмо в виде простого текста не содержит ни изображений, ни графики, ни форматирования.

Вот пример обычного текстового письма:

А вот пример электронного письма в формате HTML:

Теперь важно отметить, что многие ошибочно называют электронные письма в формате HTML с минимальным форматированием простым текстом. Эти электронные письма на самом деле будут в формате HTML, но разработаны таким образом, что они будут отправлены так, как если бы они были отправлены коллегой или другом. В них не будет или будет использоваться минимальное использование графики и простое форматирование текста. Вот пример:

Мы будем называть эти электронные письма гибридными, потому что, хотя они и не являются обычными текстовыми электронными письмами, они имитируют обычные текстовые электронные письма.

Плюсы и минусы каждого типа электронной почты

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

Профессионалы электронной почты с обычным текстом

• Все почтовые клиенты одинаково отображают сообщения с обычным текстом, что обеспечивает постоянную доставку.
• Сообщение выглядит более личным, а не автоматическим.
• Некоторые устройства, такие как Apple Watch, обрабатывают обычный текст лучше, чем HTML.

Минусы электронной почты в виде обычного текста

• Значительно уменьшена возможность отслеживания отправленных электронных писем.
• Нет цветов, графики или форматирования. Электронным письмам может не хватать визуальной привлекательности.
• Труднее выделить призыв к действию.

Профессионалы электронной почты в формате HTML

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

Минусы электронной почты в формате HTML

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

Профи гибридной электронной почты

• Сообщение по-прежнему отображается как личное и написанное от руки.
• Легче сканировать получателей.
• Сохраняет возможность отслеживания HTML.

Минусы гибридной электронной почты

• Все еще HTML, поэтому некоторые почтовые клиенты могут плохо его обрабатывать. К счастью, вместе с HTML-версией легко отправить текстовую версию.

Сравнение производительности

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

HubSpot провел собственное A/B-тестирование и пришел к интересным выводам. Они сравнили гибридные электронные письма (называемые простым текстом) и различные типы электронных писем в формате HTML. Вот их выводы:

Это самое удивительное, так как многие, включая меня, считали, что GIF-файлы могут быть мощными инструментами для повышения вовлеченности в электронной почте. В конце концов, они пробились во все, от социальных сетей до обмена текстовыми сообщениями, но когда дело доходит до электронной почты, они снижают открываемость на 37%!

HubSpot рассудил, что снижение показателей открытия может быть связано с тем, что почтовые клиенты не могут загрузить электронную почту. Это может быть — и если это так, мы можем увидеть, что GIF-файлы становятся более эффективными в почтовом маркетинге, поскольку почтовые клиенты адаптируются к GIF-файлам.

В другом тесте они сравнили обычный текст (опять же гибридное электронное письмо, это все тот же HTML, только с минимальным форматированием) с шаблоном HTML, который использует изображения и призыв к действию. Опять же, электронное письмо с большим количеством визуальных элементов работало хуже, чем электронное письмо без графики или изображений.

В другом тесте они сравнили электронное письмо с минимальным форматированием HTML с сильно отформатированным шаблоном, содержащим изображения/призыв к действию. Опять же, было падение с более сложным электронным письмом. HubSpot рассудил, что это изменение связано с доставляемостью, поэтому они провели еще один тест.

В последнем тесте HubSpot они сравнили количество кликов по электронным письмам в зависимости от количества изображений внутри. Хотя есть несколько падений и подъемов, тенденция ясна: больше изображений = меньше конверсий. Но почему это? В конце концов, изображения в социальных сетях работают намного лучше, чем просто текстовые сообщения, и обычно считаются «магнитами для кликов».

Объяснение более низкой производительности электронных писем в формате HTML

По данным HubSpot, эта тенденция связана с тем, что почтовые клиенты постоянно меняют системы фильтрации. Они считают, что количество элементов HTML влияет на то, считается ли электронное письмо спамом или рекламным. Электронное письмо с тяжелым форматированием HTML и несколькими изображениями может быть сочтено рекламным и, таким образом, подписчик никогда не увидит его.

Но я думаю, что причина глубже. Теги изображений и HTML-шаблоны могут помечаться чаще, но это может быть лишь небольшой частью головоломки. Большая часть связана с поведением получателей и их ожиданиями от электронной почты в целом.

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

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

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

Итак, ответ заключается в использовании простых текстовых сообщений электронной почты?

Ну… Не совсем так. Вот почему я сказал, что это не четкая дискуссия в первом абзаце. Обычный текст (или, точнее, гибридные электронные письма) может работать лучше для HubSpot, но это не для всех.

Существует вероятность снижения уровня вовлеченности при использовании гибридных электронных писем или электронных писем с обычным текстом. Дерек Халперн из DIYThemes делится: «По моему опыту, когда вы отправляете полный текст, вы получаете меньше комментариев, меньше репостов в социальных сетях и в целом МЕНЬШЕ взаимодействуете со своими подписчиками».

Хотя его опыт не обязательно совпадает с результатами других, это важное напоминание: каждый бизнес и каждая аудитория разные. Из-за этого в этом споре нет явного победителя.

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

Заключение

Итак, после всего сказанного, вот ответ на спор десятилетней давности: В электронной почте лучше меньше, да лучше. Это не означает, что вы всегда должны отправлять электронные письма гибридного/обычного текста. Тем не менее, необходимо изменить способ написания/дизайна электронных писем. Для каждого элемента спросите себя, действительно ли он имеет решающее значение.

Кроме того, чтобы получить ответ о том, лучше или хуже электронные письма в формате HTML, чем обычные текстовые электронные письма, вам необходимо провести A/B-тестирование. Другого заменителя нет. Как мы указывали ранее, то, что работает для HubSpot, может не работать для других компаний с другой аудиторией. Итак, приступайте к тестированию. Примените аналогичный подход к HubSpot и протестируйте следующие ситуации:

• Обычный текст против GIF
• Обычный текст и изображения/графика (легкий HTML)
• Легкий HTML против тяжелого HTML
• и низкое количество изображений по сравнению с большим количеством изображений

Следуя этой схеме тестирования, вы получите довольно хорошее представление о том, как ваша аудитория реагирует на различные типы электронных писем. Также может быть хорошей идеей провести краткий опрос с вопросом, что им понравилось и не понравилось в более популярном электронном письме. Это может помочь вам совместить обе данные с тем, что чувствуют получатели. Важный фактор для установления хороших отношений между подписчиками и вашим брендом!

P.S. Если вы нашли это полезным, вам понравится наш тестер строки темы электронной почты

Узнайте, почему электронные письма с обычным текстом все еще работают и как их использовать

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

Что такое обычные текстовые электронные письма?

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

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

• Электронные письма по-прежнему отправляются в виде обычного текста?
• Как создать электронное письмо в виде обычного текста?
• Советы по тому, как сделать текстовые электронные письма сканируемыми
• Простой текстовый шаблон электронной почты, который поможет вам начать работу а также в HTML в популярных настольных, мобильных и веб-почтовых клиентах? Никогда не забывайте включать простой текст в свою следующую кампанию по электронной почте с помощью Litmus Test.

  НАЧНИТЕ ПРОВЕРКУ СЕЙЧАС →

   

  Электронные письма по-прежнему отправляются в виде обычного текста?

  Одна из причин, по которой вам следует использовать обычный текст, заключается в следующем: многие электронные письма автоматически отправляются с ними! Даже когда вы отправляете электронное письмо в формате HTML, версия электронной почты в виде обычного текста имеет решающее значение. Многокомпонентный MIME (многоцелевые расширения почты Интернета) — протокол, который позволяет отправлять все наши маркетинговые кампании по электронной почте, — объединяет упрощенную текстовую версию вашего электронного письма вместе с HTML-версией вашего электронного письма.

  Если вы не отправляете электронное письмо исключительно в виде обычного текста (что случается относительно редко), вам следует сосредоточиться на том, чтобы сделать так, чтобы ваши подписчики были довольны как текстовыми, так и HTML-сообщениями.

  Вот причины, по которым письма с открытым текстом по-прежнему необходимы:

  • Спам-фильтры хотят видеть альтернативу обычному тексту. Письма, содержащие только HTML, являются тревожным сигналом для спам-фильтров. Ленивому спамеру не понадобится время, чтобы создать альтернативу простому тексту, так что убедитесь, что вы это сделали!
  • Некоторые люди просто предпочитают его. Просто и понятно: некоторые люди предпочитают только текстовые электронные письма. Поскольку различные почтовые клиенты позволяют получать только текстовую версию электронного письма, важно отправлять его в формате MIME, состоящем из нескольких частей. В противном случае подписчики могут вообще не получить ваше письмо.
  • Некоторые люди считают электронные письма в формате HTML угрозой безопасности и конфиденциальности. , и эти подписчики могут не загружать изображения.
  • Электронные письма в формате HTML требуют большей пропускной способности. Увеличенная пропускная способность (и место для хранения), которые, как правило, потребляют электронные письма с большим количеством изображений, является еще одним фактором, почему люди могут предпочесть обычный текст.
  • Текстовые версии могут работать лучше для нетрадиционных почтовых ящиков. Смарт-часы, игровые устройства и голосовые помощники, скорее всего, будут использовать электронные письма в виде простого текста поверх HTML при отображении или чтении электронных писем пользователям. Правильно написанное и отформатированное электронное письмо в виде обычного текста будет намного лучше работать на Apple Watch, чем HTML-эквивалент, и, скорее всего, оно будет работать в будущих нетрадиционных почтовых ящиках.

  На протяжении многих лет мы наблюдали множество исследований и споров о том, как сравнивать обычный текст с электронными сообщениями в формате HTML, включая наш собственный A/B-тест, но большинство из них не дали окончательных результатов. В то время как большинство маркетологов по электронной почте предпочитают версии в формате HTML, а не стили простого текста, сообщество электронной почты разделилось во мнении, какой подход лучше.

  Как создать электронное письмо в виде простого текста?

  К счастью, создать хорошую текстовую электронную почту относительно легко. Большинство поставщиков услуг электронной почты (ESP) позволяют вам добавлять или редактировать текстовую версию вашей кампании. Некоторые из них включают инструменты, которые автоматически генерируют простой текст при загрузке HTML-файла.

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

  Что произойдет, если вы не включите текстовую версию?

  Если ваше электронное письмо, состоящее только из HTML, попадет в папку «Входящие» вашего подписчика, и он не сможет просмотреть электронные письма в формате HTML (по желанию или из-за возможностей своего почтового клиента), что они увидят?

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

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

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

  Советы по тому, как сделать текстовые электронные письма сканируемыми

  Ключом к хорошему электронному письму является возможность сканирования — легкость чтения и понимания подписчиками. Это относится как к HTML, так и к обычным текстовым версиям.

  Большинство ESP отправляют составной MIME автоматически или проведут вас через настройку в качестве опции. Однако их автоматически сгенерированные текстовые версии обычно неорганизованы и их трудно читать.

  Например, приведенное ниже электронное письмо в виде обычного текста заполнено обратными ссылками. Нет четких призывов к действию (CTA), и в целом это плохой опыт для подписчиков.

  Хотя использование этих автоматически созданных версий может сэкономить ваше время, не забудьте потратить несколько минут на их редактирование по мере необходимости. Между абзацами могут быть добавлены пробелы, повреждены символы (символы ASCII, такие как товарный знак, авторские права, умные кавычки и т. д., которые могут не поддерживаться), а также ссылки и текст, которые не нужны.

  Независимо от того, создаете ли вы текстовую версию самостоятельно или используете автоматически сгенерированную версию из вашего ESP, важно убедиться, что электронное письмо легко просматривается и содержит действия. Без таких элементов HTML-дизайна, как фоновые цвета, крупный текст для заголовков и изображения, вы должны использовать другие элементы для обеспечения удобочитаемости.

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

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

  1. Используйте четкие заголовки для разделения разделов
  2. Избегайте использования разрывов строк
  3. Воспользуйтесь преимуществом White Space
  4. Формат с перечисленными списками
  5. . Четко определили CTAS
  6. , но у него нет Links
  7. , но у него нет Links
  8. , но у него нет Links
  9. , но у них не было Links
  10. , но у него нет Links
  11. . Используйте четкие заголовки для разделения разделов

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

      Например, заголовки в этом примере четкие и выделяются:

      Двойная звездочка (**) рядом с каждым заголовком и ряд дефисов под ним делают заголовки четкими, что облегчает чтение электронного письма. сканирование.

      Вы также можете использовать октоторпы (или хэштеги или символы фунта, в зависимости от того, откуда вы), что может быть знакомо многим людям, использующим Markdown для форматирования документов. Markdown использует установленное количество октоторпов для обозначения определенных уровней заголовков (например, # — это уровень заголовка 1, ## — это уровень заголовка 2 и т. д.). Это не только обеспечивает четкий способ сканирования, но также обеспечивает некоторый семантический контекст важности этих заголовков.

      Если вы не определили заголовки в своем текстовом письме (или в HTML), у ваших подписчиков не будет четкого пути чтения (т. е. беглого просмотра).

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

      2. Избегайте использования разрывов строк

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

      Использование разрывов строк может сделать вашу электронную почту неуклюжей и неряшливой:

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

      3. Используйте преимущества пробелов

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

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

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

      4. Формат с маркированными списками

      Использование списков — еще одна отличная тактика для создания иерархии в обычном текстовом электронном письме. Хотя фактические маркеры не поддерживаются, вы можете использовать вместо них другие символы, такие как -, * или +.

      Например, в обычном тексте этого электронного письма используются дефисы для перечисления специальных функций, включенных в конкретную сделку:

      При использовании дефисов иерархия электронного письма остается неизменной — несмотря на отсутствие элементов HTML — и внимание читателя привлекается к этому аспект электронной почты.

      5. Имейте четко определенные CTA

      Неважно, отправляете ли вы электронное письмо в формате HTML или в текстовом формате: ваши CTA всегда должны выделяться. Не заставляйте подписчиков охотиться за ними!

      Например, в этом первом письме все ссылки и призывы к действию похожи, и ничего не выделяется:

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

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

      6. Но не переусердствуйте со ссылками

      Если вы откроете электронное письмо в формате HTML, в котором полно кнопок CTA, вы будете перегружены. Если вы откроете текстовое электронное письмо, полное ссылок, вы получите ту же реакцию.

      Мало того, что ссылки не помечены, их так много!

      Хотя для этого нет жесткого правила, минималистский подход к ссылкам заключается в том, как мы представляем ссылки в виде простого текста. Это дает подписчикам лучший опыт работы с электронной почтой:7. Развлекайтесь

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

      Например, этот краткий портрет The Beatles из коллекции произведений искусства ASCII Кристофера Джонсона:

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

      Другие минималистские подходы

      Изучая примеры для этой публикации, мы заметили, что многие бренды делают свои текстовые электронные письма чрезвычайно простыми и включают только URL-адрес для просмотра полного электронного письма в веб-браузере. Хотя это, несомненно, лучший подход, чем вообще не отправлять составной MIME (или отправлять пустую текстовую версию), он все же кажется немного небрежным.

      Хотя ссылка «просмотреть в браузере» определенно сэкономит время, стоит потратить несколько дополнительных минут, чтобы учесть предпочтения вашего подписчика.

      Другой подход, который мы увидели, заключался в включении только основного CTA, а также ссылки на просмотр в браузере в текстовую версию. Это похоже на хорошую золотую середину — предоставление вашим подписчикам контента из HTML-части сообщения, не тратя много времени на его форматирование:

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

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

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

      Электронные письма с обычным текстом — или канцелярские принадлежности, как мы их иногда называем — на самом деле представляют собой HTML-кампании, которые выглядят как простые электронные письма с обычным или форматированным текстом. Обычно у них нет изображений, кроме логотипа или аватара отправителя, но они используют HTML для создания стилизованных ссылок и включения отслеживания электронной почты.

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

      Начните с нашего простого текстового шаблона электронной почты

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

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

      Убедитесь, что ваш дизайн выглядит правильно Неработающие электронные письма приводят к снижению конверсии. Предварительно просматривайте свои электронные письма в более чем 100 почтовых клиентах, приложениях и устройствах, чтобы обеспечить безошибочное взаимодействие с подписчиками. Каждый раз. Оптимизируйте свою электронную почту

      
      Первоначально опубликовано 4 декабря 2017 года Лорен Смит. Последнее обновление: 31 августа 2022 г.

      CSS в электронных письмах в формате HTML: что вам нужно знать, чтобы начать работу — программное обеспечение для электронного маркетинга, которое работает на вас

      Электронная почта является важным элементом любой маркетинговой стратегии.

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

      Однако кампании по электронной почте не обходятся без проблем.

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

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

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

      Что такое каскадные таблицы стилей (CSS)?

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

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

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

      Почему CSS в сообщениях электронной почты в формате HTML может вызывать проблемы

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

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

      Основная причина этих проблем с отображением в электронных письмах CSS заключается не в коде. Скорее, это возможности провайдера электронной почты, которые могут различаться в зависимости от используемой вами версии провайдера электронной почты.

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

       

      Источник: CSS-tricks.com

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

      Рассмотрим этот пример, полученный в Gmail:

      Источник: Github. com

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

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

      Как добиться успеха с помощью CSS в электронных письмах в формате HTML

      Тот факт, что с CSS в электронных письмах в формате HTML могут возникнуть проблемы, не означает, что вы должны отказаться от его использования. Все сводится к определению того, какие коды абсолютно необходимы и как их стилизовать, чтобы их можно было отображать на платформах электронной почты.

      В Campaign Monitor есть довольно подробный и полезный список самых популярных команд CSS, а также какие поставщики электронной почты поддерживают и не поддерживают каждый фрагмент кода.

      Вот несколько вариантов, которые помогут сохранить впечатляющее отображение электронной почты без проблем с CSS:

      1. Используйте встроенный CSS.

      Если вы настроены на использование CSS, лучше всего использовать встроенный код. Это наиболее эффективный и широко используемый метод включения CSS в электронные письма в формате HTML. Согласно исследованию Litmus, 86% дизайнеров электронной почты встраивают свой CSS.

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

      Источник: Litmus

      Существуют инструменты для создания шаблонов электронной почты, которые могут помочь упростить эту разработку, но то же исследование Litmus показало, что почти 70% маркетологов встраивали свой CSS вручную или без каких-либо встроенных конструкторов.

      2. Избегайте встроенных и внешних стилей CSS в электронных письмах в формате HTML.

      Есть еще два параметра CSS, которые можно использовать в электронных письмах в формате HTML, но они повышают риск возникновения проблем с отображением.

      • Встроенный CSS: этот стиль становится все более популярным с появлением мобильных и адаптивных электронных писем. Встроенные коды CSS определяются в одном месте электронного письма, как правило, в разделе как