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

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

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

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

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

• Вопреки здравому смыслу, используйте и злоупотребляйте таблицами. <div>s просто не подойдет (особенно в Outlook).

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

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

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

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

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

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

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

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

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

Основы:

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

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

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

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

Он применяет ваши классы 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 the empty", потому что Outlook в большинстве случаев не загружает изображение, и у вас останется прозрачный заголовок. Если вы хотя бы назначите цвет, который будет сочетаться с общим ощущением письма, это будет меньше шокировать пользователя. Никогда не пытайтесь использовать какие-либо листы для укладки. Или CSS вообще! Просто избегайте этого.

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

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

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

Также я обнаружил, что линия под ссылками особенно раздражает, поэтому, если вы примените ‹ style="text-decoration:none; color:#любой цвет, который вы хотите здесь!" > это удалит линию и придаст вам желаемый вид.

Есть много вещей, которые могут действительно испортить внешний вид.