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

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

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

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

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

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

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

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

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

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

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

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

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

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

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!

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

http://24ways.org/2009/rock-solid-html-emails

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

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

'Беда так. Я сделал бы 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 и используйте это в письме.

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

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

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

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

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

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