HTML и CSS кодирование в электронных письмах

{title}

Те, кто занимается почтовым маркетингом, должны знать, как создавать электронные письма в формате html.
{title}

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

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

Да, мы возвращаемся к столам. Веб-стандарты говорят, что таблицы не должны использоваться для верстки веб-страницы, но это не веб-страница, а электронная почта, и желательно использовать их вместо

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

,
Используйте атрибуты таблицы и ячейки для отображения таблицы вместо использования свойств CSS. Например, присвойте border = "0", valign = "top", align = "left" (или center), cellpadding = "0", cellspacing = "0" и т. Д. При этом вы получите таблицу, которая будет хорошо выглядеть на старых почтовых клиентах.
Используйте таблицу в качестве контейнера для всех таблиц и внутренних элементов (например, для заголовка, содержимого и нижнего колонтитула).
Старайтесь не вкладывать много таблиц и избегать использования свойства «colspan», так как это свойство не очень хорошо понимается некоторыми настольными клиентами.
Размер и разрешение Конечно, вы привыкли кодировать веб-страницы с разрешением 800 × 600 или 1024 × 768, но для дизайна электронных писем в HTML это может работать не очень хорошо, так как большинство клиентов отображают электронную почту в виде «панели предварительного просмотра». "который обычно является частью общего доступного пространства.
Наиболее целесообразно настроить ширину примерно в 500-600 пикселей или задать размер в процентах, как я обычно это делаю, чтобы он соответствовал имеющемуся пространству.
Использование каскадных таблиц стилей (CSS)

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

вместо

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

  • 0