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


101

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

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

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

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

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

Еще у меня есть несколько «неподтвержденных» истин, которые я не помню, где их читал.

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

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

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

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


Ответы:


63

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


3
Почему поддержка электронной почты в формате HTML не получила такого развития? Почему мы должны продолжать применять все эти плохие методы, как если бы мы были в 1999 году?
smonff

Существует обходной путь для поддержки bgimages stackoverflow.com/a/17358553/413032 . Чередование ms-word html. @ Smonff Полностью с вами согласен. ........ Почему HTML отображается в MS-Word!
Davut Gürbüz

1
проверьте Email Coding 101 по лакмусовой бумажке, надеюсь, поможет.
Shaijut

13

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




2

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

MIME-Version:
Content-Type:

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


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

1

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

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

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

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



0

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.