HTML расшифровывается как HyperText Markup Language — специальный язык разметки для создания веб-страниц. С помощью HTML можно менять цвета и шрифты, добавлять стили, форматирование и т. д. Это сложный навык.
Письма — тоже своего рода веб-страницы, и если вы хотите, чтобы они были красивыми… Правильно — вам понадобится HTML. Как маркетологу, вам, скорее всего, не хочется заниматься кодом, тем более учиться ему. Но что делать, если у вас нет нужных навыков и рядом нет специалиста, который все сделает за вас?
В этой статье мы кратко разберем основы HTML — а затем покажем, как максимально избежать работы с ним.
Древняя технология
Кодировать HTML-письма — почти то же самое, что создавать сайты на HTML… только в каменном веке. Подход к созданию сайтов сильно изменился за последние десятилетия, а вот HTML-письма… совсем нет. Всё ещё те же старомодные, неудобные решения.
Поймите правильно: новые, современные подходы к созданию писем существуют. Проблема в том, что вы не сможете их использовать. Gmail и ещё пара сервисов такие письма покажут корректно, но большинство популярных почтовых клиентов — нет. Outlook, например, до сих пор рендерит письма с помощью Microsoft Word. Понимаете, насколько всё устарело?
Выбор простой: либо вы используете старую школу и мучаетесь, либо теряете охват и проваливаете кампанию. Второй вариант в email-маркетинге не допустим. Так что — назад в Средневековье!
Древняя техническая база
У каждого HTML-письма есть две основные части: head и body. Разберёмся коротко.
Head — это заголовок и мета-данные. Тут же прописываются стили, анимации, шрифты и медиа. Head располагается между тегами <head> и </head>.
Также здесь указывается тип документа — через <!DOCTYPE>. Это нужно, чтобы движок понял, как правильно рендерить код. Атрибут text/html указывает, что текст нужно обрабатывать как HTML.
Для адаптивного письма необходимо включить тег <meta name="viewport" />. Он задаёт правила масштабирования под разные устройства.
Body — это контент письма. Он располагается между тегами <body> и </body>. В письмах нужно использовать старомодную вёрстку: вместо <div> использовать <table> — только так содержимое будет отображаться корректно везде.
В письме должно быть минимум две таблицы: одна для контента, вторая — внешний контейнер. Контент размещается внутри основной таблицы.
Таблица состоит из строк (<tr>) и ячеек (<td>). Во всех строках должно быть одинаковое количество ячеек.
Пример:
<table>
<tr>
<td>Try</td>
<td>Markeaze</td>
<td>Today</td>
</tr>
<tr>
<td>3</td>
<td>8</td>
<td>5</td>
</tr>
</table>Советы из прошлого
Многие почтовики до сих пор не поддерживают современную вёрстку, поэтому письма нужно максимально страховать. Outlook до сих пор с нами, и у некоторых подписчиков именно он — письма должны отображаться корректно для всех.
Что делать?
Используйте таблицы вместо div’ов
Мы уже говорили и ещё скажем: если хотите, чтобы письмо отображалось везде одинаково — используйте таблицы. Только они гарантируют единый внешний вид во всех почтовых сервисах. Использовать <div> можно только если вы уверены, что ваши подписчики — пользователи Gmail или Apple Mail. Но это большой риск.
Таблицы работают всегда. <div> — только если повезёт.
Следите за шрифтами
Outlook и другие клиенты поддерживают не все шрифты. Всё, что им «незнакомо», будет заменено на Times New Roman. Представьте, как это выглядит. Лучше изначально выбрать безопасный шрифт, даже если у вас есть фирменный — задайте резервный стандартный.
Безопасные шрифты: Arial, Comic Sans MS, Courier New, Georgia, Helvetica, Lucida Sans Unicode, Tahoma, Verdana, Times New Roman, Trebuchet MS.
Добавляйте ALT-тексты к изображениям
Старые почтовики блокируют картинки. Даже современные клиенты могут это делать, если пользователь включил блокировку. Вы не можете это обойти, но обязаны указать ALT — текст, который отобразится вместо изображения. Это вежливо и полезно. А ещё — шанс, что пользователь включит показ картинок.
И не забывайте — alt-тексты могут быть смешными и креативными!
Делайте письма узкими
Оптимальная ширина письма — 550–600 пикселей. Если сделать шире, письмо может отображаться некорректно: сдвиги, обрезки, ломка вёрстки. Лучше сразу держаться в этом диапазоне — и на мобильных, и на десктопах (даже Outlook!) всё будет ок.
Да, ограничения можно обойти, но это сложно и ненадёжно.
Не усложняйте
Интерактив — это классно. Мы сами его обожаем. Но в письмах он может не сработать. Да, технически вы можете вставить опрос, слайдер, даже мини-сайт. Но если большинство подписчиков увидят только пустое место — зачем?
Outlook точно не оценит ваши навороты.
Современное решение
HTML для писем — это боль. К счастью, вам не обязательно с ним работать. Вас спасут no-code email builders — современные инструменты, не требующие знания кода.
Это самый простой и быстрый способ создать письмо. Работают прямо в браузере или как приложения. Лучшие решения сами пишут код за вас и избавляют от головной боли.
Что искать в email-конструкторе:
Drag&Drop
Обязательно. Просто перетаскиваете нужные блоки — и письмо готово. Не нужно знать HTML.
Библиотека шаблонов
Иногда не хочется делать всё с нуля. Шаблоны — это экономия времени и источник вдохновения.
Интеграция со стоковыми библиотеками
Загружать изображения можно легально и быстро, прямо внутри конструктора. Не нужно искать картинки на сторонних сайтах.
Удобный интерфейс
Даже если функций много, интерфейс должен быть понятным. Это важно — вы маркетолог, а не разработчик.
Адаптация под экраны
Письма должны хорошо выглядеть везде: на ПК, планшетах и смартфонах. И это — обязательная функция любого современного конструктора.
Тёмная тема
Более 80% пользователей используют тёмный режим. Почтовики могут автоматически переделать цвета (и испортить дизайн), если вы не сделаете тёмную версию письма сами.
Тестовая отправка
Перед запуском всегда проверяйте письмо. Хороший редактор покажет, как письмо будет выглядеть в разных клиентах и позволит отправить тест самому себе.
Вывод
В наше время письма должны быть сделаны с помощью HTML. Особенно в модной индустрии, где важна каждая деталь. Но учиться кодингу или нанимать разработчика — вовсе не обязательно.
Просто найдите хороший no-code редактор под ваши задачи — и забудьте о мучениях с HTML. Ну, по крайней мере в email-маркетинге.
