Html email code: Build an HTML Email Template From Scratch

Разное 

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

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

Это электронных писем в формате HTML , и на их создание уходит много времени.

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

Содержание

  • Что такое электронные письма в формате HTML?

  • Какова роль CSS в электронных письмах в формате HTML?

    • 1. Внешние таблицы стилей
    • 2. Встроенные таблицы стилей
    • 3. Встроенные таблицы стилей

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

    • ● Выберите тип документа
    • ● Язык векторной разметки и масштабирование DPI
    • ● Кодирование заголовка электронной почты
    • ● Создание тела и таблиц электронной почты

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

  • Доступность электронной почты в формате HTML

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

    • ✅ Избегайте JavaScript или Flash
    • ✅ Размер HTML-файла должен быть меньше 102 КБ
    • ✅ Избегайте некорректно функционирующих тегов HTML
    • ✅ Избегайте дополнительных интервалов вокруг изображений
    • ✅ Избегайте нечетных чисел для размера
    • ✅ Удалить комментарии в вашем CSS
    • ✅ Всегда проверяйте свои письма перед отправкой

  • На шаг впереди HTML-письма: приветственные AMP-письма

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

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

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

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

Существует три способа добавления CSS в HTML. Они следующие:

1. Внешние таблицы стилей

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

Внешняя таблица стилей может выглядеть так:

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

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

2. Встроенные таблицы стилей

Как следует из названия, эти листы встраиваются в HTML с помощью <стиль> элемент. Поддержка этого листа также минимальна в почтовых клиентах.

Например, по данным Litmus, такие почтовые клиенты, как Mail.ru, Android 5.1, Android 6.0, Gmail App IMAP (Android), Почта Windows 10 не отображают эти листы в HTML-почтовике.

3. Встроенные таблицы стилей

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

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

Здравствуйте!

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

● Выберите тип документа

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

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

Теперь вам нужно решить, какой тип документа использовать для электронных писем, поскольку их много, например, HTML5, HTML4.01 strict, HTML 4.01 Transitional и т. д.

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

По этой причине вам следует избегать использования HTML5.

Scalero рекомендует объявления XHTML 1.0 Transitional и HTML 4.01 Transitional doctype:

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

● Язык векторной разметки и масштабирование DPI

После выбора типа документа необходимо добавить поддержку языка векторной разметки (VML). Это полезно для обеспечения правильного отображения неподдерживаемых функций, таких как фоновые изображения и закругленные границы, в почтовых клиентах, таких как Outlook 2007-16 и Outlook Express. Код выглядит так:

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

:

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

● Метатеги

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

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

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

Этот тег указывает почтовым клиентам, как масштабировать письмо, а именно его ширину.

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

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