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

Question 1

Закрыто . Этот вопрос должен быть более конкретным . В настоящее время он не принимает ответы.

Хотите улучшить этот вопрос? Обновите вопрос, чтобы он фокусировался только на одной проблеме, отредактировав этот пост .

Закрыт 5 лет назад .

Уточните этот вопрос

Какие рекомендации вы можете дать для расширенного форматирования 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.

Question 2

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

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

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

Удачи ;)

Обновите, чтобы ответить на дополнительные вопросы:

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

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

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

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

Question 3

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

Question 4

Люди, стоящие за Campaign Monitor, также запустили веб-сайт проекта стандартов электронной почты с большим количеством полезной информации.

Question 5

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

Question 6

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

MIME-Version:
Content-Type:

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

Question 7

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

Question 8

Совет из трех слов: тест, тест, тест.

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

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

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

Question 9

Встраивайте свои изображения, а не ссылки на них.

Это плохо :

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

Это хорошо :

<img src=cid:myImage/>

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

Question 10

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

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