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

Ответ 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. Системы будут избегать в своих почтовых хранилищах, чтобы предотвратить недооценку содержимого одного сообщения в качестве нового сообщения. То, как это обрабатывается, имеет тенденцию нарушать любой стиль, начинающийся с новой строки с периодом.