Чтобы заинтересовать потенциального клиента сразу, нужен грамотный дизайн сообщения, о чём было подробно рассказано в предыдущей статье. Однако не менее важным является корректное отображение html-верстки писем для рассылки во всех браузерах, экранах, почтовиках и платформах. Для этого надо соблюдать правила, которые и будут описаны в данной статье.
Проблемы плохой вёрстки
При несоблюдении правил вёрстки появляются проблемы, которые портят всю работу
- Письма по-разному отображаются в почтовиках. В итоге нельзя контролировать то, как они ведут себя.
- Рассылка не адаптирована, появляется горизонтальная полоса прокрутки, из-за которой читать уведомление становится неудобно. Из-за этого при чтении возникает дискомфорт и неудобство. В результате письмо теряет свою способность вовлекать читателя, падает конверсия, люди не хотят становиться клиентами.
- Некоторые блоки вообще могут пропасть, а часть текста станет недоступной для чтения.
- Письмо будет смотреться так, будто его делал школьник по устаревшему шаблону.
- Изначальная задумка так и не воплотится в жизнь.
- Уведомлению нельзя придать динамичности, красоты без знаний специальных инструментов. Из-за чего оно станет более скучным и менее увлекательным.
- Об интерактивности в письме можно будет забыть.
- Рассылка распадётся на десктопных почтовиках вроде Outlook.
- Все сообщения автоматически попадут в спам.
- Наконец, долгая загрузка станет регулярной проблемой.
Нижеперечисленные рекомендации решат эти задачи и сделают письмо красивым, адаптивным, подходящим под любую платформу, интересным и эффективным для привлечения клиентов.
Структура и код
Для правильного отображения писем необходимо следить за валидностью HTML и CSS кода.
Для начала разберём DOCTYPE. Если хотите, чтобы рассылка была одинаковой в email, Thunderbird и других веб-сервисах, то необходимо использовать <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.0 Transitional//EN»>, несмотря на появление html5.
Кроме того, придётся отказаться от блочной вёрстки в пользу табличной.
Нужно избегать кратких записей свойств CSS. В частности:
- удаляем короткие формулировки. Например, вместо margin: 15px 10px, пишем margin-left: 10px; margin-right: 10px; margin-top: 15px; margin-bottom: 15px;
- оттенки указываются не в короткой форме green или #0F0, а в полном шестнадцатеричном виде – #00FF00;
- нельзя применять свойства, которые могут указать сразу на несколько характеристик. Например, вместо font: Calibri #FF0000, надо прописывать семейство шрифта, цвет и остальные свойства по отдельности.
Лучше не использовать атрибуты colspan, rowspan для объединения ячеек. Вместо этого желательно применять вложенные таблицы. При этом всегда указывайте значения align и valign для строк и столбцов.
Всегда у атрибутов cellpadding и cellspacing значение прописывайте нулевое. Для table лучше не указывать границу (или ставить её в ноль), так как многие почтовики неправильно отображают данные значения.
Для line-height не используйте тег em или проценты, пишите пиксели, чтобы рассылка отображалась корректно во всех почтовых системах. Текст можно оформлять только тегами font и span. При этом line-height желательно указывать как для текста, так и для ячейки, где он находится. Иначе он будет некорректно отображаться в почтовике Outlook.
Для разрыва строк и блоков применяется тег br. Но будьте осторожны, потому что он по-разному отображается в Outlook 2007 и iPhone (там разрыв выглядит крупнее). В результате может получиться ситуация, когда промежутки становятся слишком большими.
Прехедер – текст, который следует сразу за темой письма, отображается в общем списке рассылки. Предварительный заголовок сильно поднимает конверсию, что нужно использовать. Для этого необходимо перед таблицами основного контента вставить блок div, куда поместить текст. Стили лучше не указывать. Если хотите, чтобы прехедер был, но в самом сообщении не отображался, то поставьте в теге div атрибут style и в нём укажите у свойства display значение none.
Прехедер отображается рядом с темой сообщения и может раскрыть смысл рассылки подробнее, сильнее заинтересовать читателя. Он помогает узнать, о чём письмо, что крайне важно, так как многие почтовые системы обрезают тему до определённого количества знаков. Чтобы потенциальные клиенты лучше реагировали на вашу рассылку, необходимо всегда добавлять увлекательный, интересный прехедер.
Всегда указывайте кодировку UTF-8, для чего вставляйте метатег: <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />. Просматривайте заголовки и код. В особенности:
- List-Unsubscribe – заголовок, дающий возможность отписаться;
- Message-ID – уникальный идентификатор сообщения;
- Date – заголовок с датой и временем;
- Auto-Submitted – заголовок для автоответчиков;
- Content-Type – тип контента должен быть multipart/form-data;
- Content-Disposition – заголовок, указывающий, что контент должен отображаться в виде вэб-страницы;
- From – обратный адрес отправителя;
- To – адрес одного или нескольких получателей;
- Reply-to – адрес для ответов;
- Subject – тема сообщения.
Также не забывайте обращать внимание на следующие нюансы:
- как готовое письмо выглядит в перечне сообщений во всех доступных почтовиках;
- специальные форматы. Например, день календаря отображается днём календаря, а билет как билет.
Письмо должно красиво выглядеть и при отсутствии изображений. Ведь в некоторых почтовых системах они могут не отображаться, тем более, когда это первое сообщение от вас. Наконец, в папке «Спам» изображения не показываются. Готовить своё письмо для этой папки тоже нужно, потому что 40% людей спам регулярно просматривают.
Поэтому вся необходимая информация должна содержаться в тексте. Фотографии могут решать дизайнерские задачи, либо дублировать отдельные фразы более наглядно. При верстке писем картинки делайте ссылками, так как пользователи при чтении кликают по ним. У каждого фото указывайте alt. Так система поймёт, что показано на изображении.
Цвет фона указывается атрибутами background=»» и bgcolor=»» исключительно в теге table. Если прописать фоновую картинку у body, то можно в почтовике Outlook попасть в спам. У div оттенок фона лучше не указывать, так как он функционирует лишь в некоторых системах. Да и вообще, не все почтовые системы корректно работают с параметром background (в частности, это касается Outlook образца 2007–2013).
Следовательно, если используете фоновое изображение, то указывайте background-color. При этом цвет должен соответствовать общему оттенку картинки, чтобы если изображение не отобразиться, текст был хорошо виден и удобочитаем.
Обратный электронный адрес и телефон помещайте в ссылку, иначе почтовая система сделает это самостоятельно, что может поломать номер телефона и адрес. Особенность верстки писем также заключается в том, что нельзя применять js, flash, iframe, svg. Они не работают. Если нужны изображения, которые будут корректно расшифровываться всеми почтовыми системами, включая Outlook, The bat, то нужно использовать векторную VML-графику
Всё сообщение желательно разбивать на самостоятельные блоки и верстать каждую часть отдельно. Это даст несколько преимуществ:
- Можно свободно добавлять новые или удалять старые элементы.
- Если один блок некорректно отобразиться или пропадёт в какой-то почтовой системе, то остальные элементы не пострадают.
- Можно составлять собственную коллекцию блоков и использовать их для создания нового письма, просто поменяв изображения и текст.
Кроме того, во-первых, сообщение обязано быть привлекательным и удобным для чтения во всех системах: Mail, Yandex, E-mail, Gmail, Outlook, Yahoo, The bat и других. Во-вторых, при изменении окна браузера контент должен подстраиваться, меняя свои габариты, чтобы не вылезать за ширину окна и не создавать горизонтальную полосу прокрутки. Другими словами, вёрстка html-писем должна быть адаптивной и кроссбраузерной. Для этого желательно использовать медиазапросы с подключением собственных стилей под каждое устройство и приложение, а также перемещающиеся блоки с небольшой высотой.
При сокращении кода рассылки нужно, чтобы в одной строчке находилось не более 1000 символов. В противном случае возможно некорректное отображение. Разбивайте верстку электронных писем на смысловые группы. Освойте разные полезные идеи для почтовых систем и ОС, а также свод правил адаптивных писем. В частности, для устранения проблемы автоматического масштабирования контента в IOS 10 и IOS, включите тег: <meta name=»x-apple-disable-message-reformatting»>.
Или используйте CSS-правила для контроля размера шрифта (но с обязательным префиксом) -webkit-text-size-adjust и -ms-text-size-adjust со значением none. Это не позволит приборам на IOS самостоятельно менять контент на своё усмотрение.
Прочитайте об использовании условных комментариев, благодаря этому не будет проблем с IE и Outlook. О более эффективном тестировании писем в различных почтовиках и устройствах будет рассказано позже.
Контент
При программировании желательно применять стандартные шрифты, которые поддерживаются большинством браузеров. Какие семейства можно использовать, указано в таблице ниже:
Спецзнаки (параграфы, сердечки, иконки и другую графику) лучше не использовать или поменять на аналогичные символы-мнемоники или изображения. Таким же способом желательно поступать с эмодзи и смайликами. Данные элементы (даже просой mailchimp) нередко создают проблему там, где этого совсем не ожидаешь.
Чтобы изображение было гарантированно чётким используйте фотографии, которые в 2 раза больше нужного размера. Например, для картинки 200*100 берите иллюстрацию 400*200, а чтобы изображение имело нужные габариты, прописывайте атрибуты: <img alt=»Фото» src=»photo.png» width=»200″ height=»100″ border=»0″>.
| С засечками | Без засечек |
| Courier | Arial |
| Courier New | Arial Black |
| Georgia | Tahoma |
| Times | Trebuchet MS |
| Times New Roman | Verdana |
Но не стоит злоупотреблять таким приёмом, так как вес и скорость загрузки изображений меняется пропорционально размерам. Данный метод обычно применяют в отношении логотипов и иконок, а также небольших фотографий. Слишком большие картинки лучше, наоборот, уменьшать с помощью сервисов TinyPNG, JPEGmini, Compressor.io, чтобы они загружались быстрее и меньше занимали пространства на диске.
Все ссылки обязаны включать в себя тип протокола и домен. Нельзя использовать относительные url-адреса (/link), так как они могут расшифровываться относительно почтовика, а не адреса отправителя. Так же нежелательно применять ссылки без указания протокола (//mysite.com/link), потому что в них автоматически может быть поставлен file://.
Кириллицу в ссылках необходимо кодировать с помощью percent encoding. То есть ссылка должна выглядеть не так: http://www.гранипознания.рф, а так: http://www.xn--80aahrec5acbgki9r.xn--p1ai/. То же самое касается других служебных и не ASCII-символов.
- Сжимайте картинки. Так как gif плохо поддаётся, то от таких изображений лучше отказаться и использовать только, если необходима анимация. Картинки png-8 подходят для иконок и элементарной графики, а расширение jpeg желательно применять для крупных фотографий и фоновых изображений. При этом jpeg всегда предпочтительней png, так как он на 40% меньше по объёму при сохранении качества. Расширение png-24 идеально подходит для иконок, которые должны быть прозрачными или полупрозрачными и располагаться на цветном фоне. Но помните, что данный формат наиболее объёмный.
- Ссылки на изображения в письме должны вести на ваш домен и хостинг. Картинки лучше хранить на собственном CDN или в галерее рассылок. Если использовать изображения, расположенные на других сайтах, то можно попасть в спам.
- Обязательно у ссылок прописывайте target=»_blank», чтобы сайт открывался в новом окне или вкладке. У всех ссылок должен быть атрибут title, который является гарантией, что письмо не попадёт в спам. Кроме того, он незаменим для людей, которые управляют почтовиком голосом со смартфона. К тому же title даёт подсказку при наведении мышки на картинку или ссылку.
- Обращайте внимание на предлоги, чтобы они были соединены со словом. Для этого желательно применять знаки неразрывного пробела . Кроме того, можно использоваться тег или css-свойство white-space:nowrap. Для переноса слов при длинных ссылках или словах, чтобы не ломать шаблон, нужно применять спецсимвол .
- Если хотите использовать видеоматериалы, то указывайте прямую ссылку на него на месте соответствующего изображения. Из всех почтовиков лишь Mail в iOS 10 поддерживает html5-видео, но это единственное исключение из правила. Так что ролики лучше не использовать.
- Следите за тем, чтобы размер письма не превышал 102 Кб для Gmail и 100 Кб для Yahoo, в противном случае почтовые системы будут обрезать ваше письмо. При этом в конце рассылки будет указание «показана часть сообщения» и ссылка «показать полностью». Чтобы этого не происходило, а контент отображался целиком, максимально сокращайте код. Разумеется, можно надеяться, что адресаты будут нажимать на ссылку и читать сообщение полностью, но как показывает практика, этого не происходит.
- Осторожней используйте формы в рассылках. Желательно их не применять вовсе, так как они отображаются далеко не во всех почтовых системах. Лучше ставить ссылку на страницу с формой, тогда будет шанс получить трафик. Также можно сегментировать целевую аудиторию на тех, у кого почтовые системы позволяют просматривать формы, и тех, кто не может себе этого позволить. Для второй группы пользователей ставить ссылку на страницу для опроса. Зато можно применять интерактивные элементы. Сейчас многие почтовики способны корректно отображать различные динамические компоненты. А если они не в состоянии это сделать, то показывают блок в виде статического элемента.
Для быстрого и простого создания интерактивных элементов можно пользоваться различными порталами и инструментами, такими как AMP и stripo, который включает в себя готовые блоки. Смотрите за нововведениями среди интерактивных элементов для рассылок.
Для повышения конверсии в Gmail применяйте кнопки мгновенного действия JSON-LD и microdata. Ими можно добиться необходимого результата без этапа прочтения сообщения.
Используйте AMP-письма в Yahoo, Gmail, Mail и Outlook. AMP – это технология для быстрых страниц под смартфоны и планшеты. Компания Google давно продвигает этот формат. Благодаря ему письма выглядят как настоящие веб-сайты. Например, пользователь может (без перехода на сайт или открытия новой страницы) прямо через письмо купить товар, заказать звонок, оставить рецензию, заполнить форму.
Данной технологией давно пользуются такие гиганты, как Booking.com, Pinterest и Google. Единственным минусом является то, что AMP-письма необходимо настраивать как в системе получателя, так и в почтовике отправителя.
Чтобы разобраться в технологии AMP-писем, используйте следующие порталы:
- https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-format/ – сайт с документацией по AMP на английском языке;
- рекомендации по настройке технологии можно найти на русскоязычных порталах https://docs.sendsay.ru/ru/articles/2882295-amp-%D1%80%D0%B0%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8, https://sendpulse.com/ru/knowledge-base/email-service/email-sending/how-send-amp-emails и https://stripo.email/ru/blog/how-to-build-amp-emails-with-stripo/;
- https://stripo.email/ru/gmail-promo/ – конструктор по созданию рассылки для gmail;
- https://code.market/product/amp-ready-email-template-premium-bundle/ – тут находятся шаблоны AMP-сообщений.
Инструменты и сервисы
Чтобы верстка проходила быстро и без проблем, можно пользоваться некоторыми приложениями и веб-порталами, которые перечислены в этом разделе.
Все стили указывайте в теге style, он специально создан для этого. Но при этом помните, что некоторые почтовые системы его удаляют. Так что тестирование обязательно. При создании верстки писем для email-рассылки применяйте css-inliner tool, который ускорит всю процедуру. В частности, можно воспользоваться сайтом https://templates.mailchimp.com/resources/inline-css/ и https://www.campaignmonitor.com/resources/tools/css-inliner/.
https://templates.mailchimp.com/development/css/client-specific-styles/ – тут описаны некоторые CSS-правила для определённых почтовиков.
Проверить, как отображается CSS в различных почтовых системах, можно на сайтах:
- https://caniuse.email/;
- https://templates.mailchimp.com/resources/email-client-css-support/;
- https://www.campaignmonitor.com/css/.
В некоторых редакторах можно формировать письма из готовых блоков без знаний в программировании. Самыми популярными ресурсами являются:
- https://mosaico.io/;
- https://stripo.email/en/demo/?guid=5ee8b4f7-941c-4743-8f8f-1a4a418cc3e2;
- https://tilda.cc/ru/lp/email-campaign-builder/;
- https://backgrounds.cm/.
В почтовых системах можно пользоваться встроенными редакторами, такими как Mailchimp, Unisender, Sendpulse и другие.
Для создания адаптивных писем можно воспользоваться специальными порталами:
- https://mjml.io/;
- https://foundation.zurb.com/emails.html;
- https://github.com/dudeonthehorse/kilogram (пока ещё не готовая программа, так как заброшена бывшим разработчиком, но вскоре планируется новый этап реализации).
Создайте электронные почтовые ящики во всех возможных системах, чтобы можно было провести тесты сформированных писем, как минимум: Mail, Yandex, Gmail. Желательно иметь под рукой смартфоны и планшеты на iOS и Android, чтобы смотреть, как отображается внешний вид рассылки на разных платформах.
Порталы для тестирования рассылки на то, отнесутся ли почтовики к письму, как к спаму:
- https://mail-tester.com;
- https://litmus.com;
- https://emailonacid.com;
- https://emailpreviewservices.com.
Контролируйте валидность кодировки с помощью сайта https://validator.w3.org/. Для контроля качества верстки письма для онлайн-рассылки дополнительно используйте сервисы:
- http://previewmyemail.com;
- https://litmus.com;
- https://www.mail-tester.com;
- https://www.emailonacid.com;
- https://emailpreviewservices.com;
- https://www.inboxinspector.com;
- https://testi.at;
- https://www.htmlemailcheck.com.
Если думайте тестировать получившееся письмо вручную, то помогут сервисы:
Все правила по созданию адаптивных писем перечислены на сайте https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries—cms-23919
Самую огромную коллекцию писем (1 500 000 штук) от российских и иностранных разработчиков (8000 авторов) можно посмотреть на портале http://email-competitors.ru/
Бесплатные шаблоны можно скачать по ссылкам:
Мы проводим аудит и рассказываем, как рисовать и программировать сообщения и формировать базу подписчиков. Создавая стратегию электронной рассылки, мы учитываем все вышеописанные нюансы при дизайне и верстке писем для рассылки. Можете обратиться к нам и заказать создание email-рассылки.
