Как создавать электронные письма в формате HTML

Опубликовано: 2022-01-28

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

Если вы когда-либо использовали редактор электронной почты WYSIWYG (What You See Is What You Get), вы уже создали электронное письмо в формате HTML. Каждый из модулей, которые вы перетаскиваете, состоит из HTML и встроенного CSS, определяя, как должны выглядеть и вести себя различные элементы электронной почты.

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

Хороший вопрос.

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

  • Размер шрифта
  • Альтернативный текст
  • Границы
  • Поля
  • Прокладка
  • Размер изображения
  • Цвета

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

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

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

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

1. Сделайте ваши электронные письма отзывчивыми

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

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

  • Включите медиа-запросы. Медиа-запросы позволяют адаптировать шаблоны электронной почты к различным устройствам.
  • Используйте один столбец: может быть легко читать электронные письма с двумя столбцами на настольном компьютере, но на мобильных устройствах это может стать немного запутанным.
  • Увеличьте размер шрифта: не делайте шрифт меньше 13 или 14 пунктов.
  • Расставьте ссылки: вы не хотите, чтобы читатели случайно щелкнули не ту ссылку, потому что ваши ссылки были расположены слишком близко друг к другу.
  • Добавьте теги alt: теги Alt описывают ваши изображения на случай, если изображения не загрузятся.

2. Добавляйте изображения экономно

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

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

3. Будьте проще

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

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

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

Добавляя различные HTML-элементы в свое электронное письмо, задайте себе вопрос: «Помогает ли это электронному письму выполнить свою задачу?» Если нет, исключите его из дизайна электронной почты.

4. Используйте готовые шаблоны электронной почты

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

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

5. Проверьте свои электронные письма

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

К счастью, в наши дни есть лучший способ.

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

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

HTML-структура электронной почты

Электронные письма в формате HTML имеют простую структуру:

  • ДОКТИП
  • Заголовок
  • Тело

ДОКТИП

Используйте <!DOCTYPE>, чтобы сообщить браузеру, чего ожидать — в данном случае это будет электронное письмо в формате HTML.

Заголовок

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

Тело

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

Шаблон письма с HTML-кодом

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

Как то, что вы видите? Нажмите «Загрузить шаблон», и мы отправим вам копию HTML-кода на ваш почтовый ящик. Затем вы можете скопировать/вставить код в редактор дизайна электронной почты, чтобы импортировать шаблон и адаптировать его к вашему бренду и кампании.

Ознакомьтесь с другими шаблонами электронной почты от Twilio SendGrid.

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

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

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