Рекомендации по стилизации HTML-писем

Ответ 1

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

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

Ответ 2

Раньше я сражался с блогом HTML. Вот некоторые из моих советов о стилизации для максимальной совместимости между почтовыми клиентами.

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

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

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

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

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

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

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

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

Ответ 3

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

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, встроенным для вас!

Ответ 4

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

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

Ответ 5

Ресурс, в котором я всегда возвращаюсь к сообщениям HTML, Руководство по кампанию CampaignMonitor.

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

Ответ 6

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

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 и используйте это в письме.

Ответ 7

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

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

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

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

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

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