Лучшие практики для оформления электронных писем в формате HTML [закрыто]


195

Я разрабатываю шаблон HTML для почтовой рассылки. Я узнал, что многие почтовые клиенты игнорируют связанные таблицы стилей, а многие другие (включая Gmail) вообще игнорируют объявления блоков CSS. Являются ли атрибуты встроенного стиля моим единственным выбором? Каковы лучшие практики для оформления электронных писем HTML?


Ответы:


128

У Campaign Monitor есть отличная матрица поддержки, детализирующая, что поддерживается, а что нет среди различных почтовых клиентов.

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


9
+1: не знал про лакмуса. Это похоже на огромную экономию времени. Спасибо: D И не забывайте о сообщениях в блоге на CampaignMonitor, который также включает в себя несколько полезных советов.
Хорст Гутман

249

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

  • Встроенные стили ты лучший друг. Абсолютно не связывайте таблицы стилей и не используйте <style>тег (например, GMail удаляет этот тег и все его содержимое).

  • Против вашего лучшего суждения, используйте и злоупотребляйте таблицами . <div>S просто не будет сокращать его (особенно в Outlook).

  • Не используйте фоновые изображения , они пятнистые и будут вас раздражать.

  • Помните, что некоторые почтовые клиенты автоматически преобразуют набранные гиперссылки в ссылки (если вы <a>их сами не привязываете ). Иногда это может привести к негативным последствиям (например, если вы накладываете стиль на каждую из гиперссылок, чтобы они выглядели другим цветом).

  • Будьте осторожны с гиперссылкой на фактическую ссылку с чем-то другим. Например, не печатайте, http://www.google.comа затем связать его с https://gmail.com/. Некоторые клиенты помечают сообщения как спам или нежелательные.

  • Сохраните ваши изображения в минимальном количестве цветов, чтобы сэкономить на размере.

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

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


2
При размещении цвета фона на a <div>Outlook не будет расширять цвет за пределы содержимого, что означает, что отступы не будут окрашены.
Майкл Иригойен

70
Почему интернет? Почему у нас не может быть хорошего HTML для писем? качает кулак
simonlchilds

8
Таким образом, мы можем получить более симпатичный спам?
Брок Хенсли

6
@DavidRivers Может быть, следует отметить, что «внедренные изображения» не означают добавления изображений в качестве вложений, вместо этого они должны быть включены в виде строк в кодировке base64 для замены URL, на который ссылаются «обычные» <img>теги, например:<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...">
Тимо

3
@MJafarMash Это неправильный способ вставлять изображения в электронную почту. Вы должны создать отдельные конверты и ссылаться на изображение на его основе cid.
Майкл Иригойен

37

У почты шимпанзе есть довольно хорошая статья о том, чего не следует делать. (Я знаю, что это звучит неправильно для того, что вы хотите)

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

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

Основы:

  • Иметь абсолютные пути для изображений (например, https://stackoverflow.com/random-image.png )
  • Используйте таблицы для разметки (никогда не думал, что рекомендую!)
  • Используйте встроенные стили (и старой школы css тоже, в самом 2.1, box-shadow не будет работать, например;))

Просто протестируйте как можно больше почтовых клиентов или используйте Litmus, как это было предложено выше! (кредит Джиму)

РЕДАКТИРОВАТЬ :

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

Он применяет ваши CSS классы к вашим встроенным элементам HTML!


1
ссылка на mailchimp не работает, возможно, это одна из этих статей, kb.mailchimp.com/article/common-html-email-coding-mistakes или эта kb.mailchimp.com/article/common-mistakes-to-avoid
Натан Куп

Я обновил ссылку, первая, которую вы предложили, была правильной. К сожалению, он был перемещен без добавления перенаправлений.
SamMullins

Спасибо за CSS-инструмент для встраивания. Было бы полезно, я думаю.
Раджеш Пол


6

Ресурс, к которому я всегда возвращаюсь о электронных письмах в формате HTML, - это CSS-руководство CampaignMonitor .

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


5

'Беда так. Я сделал бы HTML-страницу с таблицей стилей, а затем использовал бы jQuery для применения таблицы стилей к атрибуту стиля каждого элемента. Что-то вроде этого:

var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
    $('body *').css(styleAttributes[i],function () {
        $(this).css(styleAttributes[i]);
    });
}

Затем скопируйте DOM и используйте это в письме.


2
Вы должны быть немного осторожны с этим, хотя ... это не надежно. Как будто это может испортить массу вещей, так что просто проверьте все перед отправкой.
Натан Макиннес

Чтобы обойти эту проблему, вы можете сначала спрятать весь документ с помощью jQuery, а затем запустить этот код (и, возможно, показать) - таким образом будут получены и применены фактические правила CSS, а не вычисленный результат (например, для ширины)
majick

1

Я считаю, что отображение изображений работает довольно хорошо. Если у вас есть какие-либо верхние или нижние колонтитулы, которые являются изображениями, убедитесь, что вы применили bgcolor = "fill in blank", потому что outlook в большинстве случаев не будет загружать изображение, и у вас останется прозрачный заголовок. Если вы, по крайней мере, назначите цвет, который подходит для всей электронной почты, это будет меньше шоком для пользователя. Никогда не пытайтесь использовать листы для укладки. Или CSS вообще! Просто избегай этого.

В зависимости от того, копируете ли вы контент из слова или общего Google Doc, обязательно (command + F) найдите все (') и (") и замените их в программном обеспечении для редактирования (особенно в dreemweaver), поскольку они будут отображаться как код и это просто не хорошо.

ALT твой лучший друг. используйте тег ALT, чтобы добавить текст ко всем вашим изображениям. Потому что есть вероятность, что они не будут загружаться правильно. И этот текст ALT заставляет людей нажимать кнопку (см. Изображения). Также определите ваши изображения Width, Height и сделайте границу 0, чтобы вы не получили странные линии вокруг вашего изображения.

Попробуйте отредактировать все изображения в Photoshop с границей 15 пикселей на каждой стороне (сделайте фон прозрачным и сохраните изображение в формате PNG 24). Иногда почтовые клиенты не читают никаких стилей заполнения, которые вы применяете к изображениям, поэтому это позволяет избежать странного форматирования!

Также я нашел строку под ссылками особенно раздражающей, так что если вы примените <style = "text-художественное оформление: нет; цвет: # любой цвет, который вы хотите здесь!" > Это уберет строку и даст вам желаемый вид.

Есть много, что может действительно испортить весь внешний вид.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.