Какие рекомендации для дизайна электронной почты HTML существуют?

Какие рекомендации вы можете дать для форматирования HTML в электронной почте, сохраняя при этом хорошую визуальную стабильность для многих клиентов и веб-интерфейсов электронной почты?

Предлагается несвязанный ответ на вопрос о переполнении стека:

http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html

Что содержит следующие рекомендации:

Поместите таблицу стилей в <body> вместо <head>
Некоторые почтовые клиенты будут лишать CSS из головы, но оставьте его, если блок стиля (недействительно) в теле.
Использовать встроенные стили, где когда-либо возможно
Gmail лишит любую таблицу стилей, будь то в <head> или в <body>, но соблюдает встроенные стили, назначенные с помощью атрибута style=""
Возврат к таблицам
Стандарты электронной почты фактически предприняли гигантский шаг назад в последние годы благодаря Outlook 2007 с использованием механизма рендеринга Microsoft Word. Откажитесь от большей части того, что вы узнали о позиционировании без таблиц стилей.
Не полагайтесь на изображения
Большинство клиентов и большинство веб-почтовых клиентов не будут отображать изображения, если только пользователь не попросит их отобразить.

У меня также есть несколько "неподтвержденных" истин, которые я не помню, где я их читал.

Не используйте более двух уровней вложенности в таблицах
Это правда. Что может произойти, если я это сделаю? Есть ли какой-то конкретный клиент/клиент, который задыхается от этого?
Будьте осторожны с размещением фоновых изображений в ячейках/таблицах
Насколько я понимаю, вы можете столкнуться с ситуациями, когда фоновое изображение применяется в нисходящей таблице/ячейке полностью заново, а не просто "светит". Опять же, правда или нет? Какие клиенты?

Я хотел бы изложить этот список с большим количеством рекомендаций и опыта из траншей.

Можете ли вы предложить дополнительные предложения?

Обновление: Я подробно задаю рекомендации для части дизайна в HTML и их согласованности. Вопросы об общих рекомендациях для избежания спам-фильтров и общие вежливости уже находятся на SO.

Ответ 1

На самом деле действительно сложно сделать приличную электронную почту HTML, если вы подходите к ней с точки зрения "современного HTML и CSS".

Для достижения наилучших результатов представьте себе 1999 год.

Вернитесь к таблицам для макета (или предпочтительно - не пытайтесь выполнить сложный макет)
Бойтесь фоновых изображений (они ломаются в Outlook 2007 и Gmail).
Стиль-тег-в-корпусе - это потому, что Hotmail привык принимать его таким образом - я уверен, что они теперь это вытесняют. Используйте встроенные стили с атрибутом style, если вы должны использовать CSS.
Забудьте полностью о float
Помните, что ваши изображения, вероятно, будут заблокированы - используйте фон и цвет текста в ваших интересах - убедитесь, что есть какой-то читаемый текст с отключенными изображениями.
Будьте очень осторожны со ссылками, будьте особенно осторожны со всем, что похоже на URL-адрес в тексте ссылки - вы будете раздражать фильтры фишинга (например, <a href="http://domain.tld">www.someotherdomain.tld</a> bad)
Помните, что "сгиб" на клиентах электронной почты имеет тенденцию быть чрезвычайно высоким на странице (на экране 1024x768 большинство интерфейсов не будут отображаться более чем на сто пикселей или около того) - получите свой личный материал прямо вверху так что получатель знает, кто вы.
В последней версии Outlook есть панель просмотра "портрет", которая значительно уже, чем вы можете ожидать, - будьте очень осторожны в макетах с фиксированной шириной, если вы должны их использовать, сделайте их как можно более узкими.
Даже не думайте о Flash, Javascript, SVG, холсте или что-то в этом роде.
Тест, много. Убедитесь, что вы тестируете в недавнем Outlook (все сильно изменилось! Теперь он использует Word в качестве механизма рендеринга HTML, и он искалечен: Word 2007 поддержка HTML/CSS). Gmail также довольно утончен. Удивительно Yahoo Webmail очень хорош, с хорошей поддержкой CSS.

Удачи;)

Обновление для ответа на другие вопросы:

Не используйте более двух уровней вложенности в таблицах

Я считаю, что это более давнее руководство, относящееся к Lotus Notes. Вложенные таблицы должны быть в порядке, но на самом деле, если у вас есть макет, который достаточно сложный, чтобы в них нуждаться, у вас наверняка будет все равно. Сохраните макет простой.

Будьте осторожны с размещением фоновых изображений в ячейках/таблицах

Это может быть связано с вышеизложенным, и то же самое относится, если вы усложняете, тогда у вас будут проблемы. Недавние версии Outlook не поддерживают фоновое изображение вообще, поэтому вам лучше всего забыть о них полностью.

Ответ 2

Всегда используйте multipart mime и предоставляйте альтернативу обычного текста.

Ответ 3

Люди из Campaign Monitor также запустили веб-сайт Email Standards Project с большим количеством хорошей информации.

Ответ 4

Я думаю, что это более низкий уровень, чем вопрос, который вы задаете, но если вы действительно хотите, чтобы html-адрес был правильно просмотрен как можно большим количеством клиентов, убедитесь, что он использует действительный MIME. В частности, для того, чтобы письмо считалось допустимым MIME, заголовки MUST (в смысле слова RFC) содержат оба этих заголовка:

MIME-Version:
Content-Type:

Очень строгие клиенты будут отображать ваш HTML в качестве исходного текста, если один или другой из них отсутствует. Вы были бы удивлены, как много крупных онлайн-продавцов, которые должны знать лучше, привили это (особенно, я получил HTML-сообщения с отсутствующими MIME-версиями: заголовки из Amazon и ACM в прошлом)

Ответ 5

Взгляните на этот шаблон, он похож на html5boilerplate, но для электронных писем: http://htmlemailboilerplate.com/

Ответ 6

Фоновые изображения ненадежны.
Практически без проблем, но нет javascript.
Используйте редактор, который позволяет отправлять текущий файл/буфер в виде электронной почты или, по крайней мере, находить программу, которая позволит вам отправлять содержимое файла в виде HTML-письма. не проверяйте свои письма, копируя HTML и вставляя их в Outlook (или любую другую почтовую программу).

Ответ 7

Три слова совета: тест, тест, тест.

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

(Lotus Notes до 8.0 действительно, действительно воняет для почты HTML, кстати)

Кроме того, помимо встроенных стилей CSS, я рекомендую переключать теги везде, где это возможно.

Ответ 8

Вставьте свои изображения, не связывайтесь с ними.

Это плохо:

<img src="http://myserver.com/myImage.jpg" alt="Lolkat"/>

Это хорошо:

<img src=cid:myImage/>

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

Ответ 9

Если вы включаете блок стиля, не начинайте новую строку с ".classname" или ".". что-нибудь. Поместите скобу или что-то еще до периода. Если вы этого не сделаете, некоторые системы веб-почты не будут правильно отображать ваши таблицы стилей.

Многие ошибочно полагают, что они не могут использовать блоки CSS в письмах из-за этого поведения... IIRC "." является разделителем тела для SMTP. Системы будут избегать в своих почтовых хранилищах, чтобы предотвратить недооценку содержимого одного сообщения в качестве нового сообщения. То, как это обрабатывается, имеет тенденцию нарушать любой стиль, начинающийся с новой строки с периодом.