Рекомендации и рекомендации при написании электронных писем в формате HTML - PullRequest
Новая
       30

Рекомендации и рекомендации при написании электронных писем в формате HTML

77 голосов
/ 09 февраля 2010

Я занимаюсь разработкой веб-сайтов уже более десяти лет, но быстро обнаружил, что многие из моих привычек в веб-разработке бесполезны при разработке для почтовых клиентов. Это вызвало у меня огромное разочарование, поэтому я подумал, что задам вопрос, который, надеюсь, высветит лучшие практики и необходимые соображения для таких, как я, которые могут время от времени заниматься разработкой для gmail, Outlook и т. Д. 1001 *

Пример: <style>...</style> против встроенного CSS.

Вкратце: что переносится из мира Интернета в мир электронной почты, а что нет.

Ответы [ 5 ]

115 голосов
/ 29 января 2014

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

Руководства по началу работы:

Поддержка CSS и общие руководства:

Вы всегда должны указывать свой CSS в html-письме. Вот список CSS Inlining Tools

Отзывчивые гиды:

Шаблоны и рамки:

Отзывчивые альтернативные примеры:

Кроме того, ссылка Ted Goas Responsive, приведенная выше, имеет превосходный плавный пример.

Устранение неполадок и общие руководства:

Вам нужно будет использовать VML , чтобы фоновые изображения работали в Outlook (кроме в теге body ). Вот несколько ссылок VML:

34 голосов
/ 09 февраля 2010

Я делал это (довольно долго) для своей работы некоторое время. Есть много подводных камней с электронными письмами HTML. Различные почтовые клиенты отображают HTML по-разному, и IE6 выглядит продвинутым.

Вот краткое изложение того, что я узнал до сих пор.

  • Использовать встроенный CSS : стили не всегда поддерживаются.
  • Использовать макеты таблиц : я знаю, но макеты div зависят от css и многие почтовые клиенты не могут справиться.
  • Не использовать интервал строк : это вызывает странные проблемы с пробелами.
  • Не использовать фоновые изображения : их поддержка ограничена.
  • Стиль тегов изображения с «display: block» : Это исправляет странные проблемы с пробелами в hotmail.
  • Если вы используете несколько таблиц, вложите их в одну родительскую таблицу : Это устранит больше странных проблем с пробелами.
  • Не используйте Javascript : Опять не очень хорошо поддерживается.
  • Убедитесь, что ваша электронная почта разборчива без изображений : пользователь не может их загрузить.
  • Предоставьте онлайн-версию и ссылку на нее : Это позволяет пользователям просматривать намеченный контент, даже если их почтовый клиент ужасен.
  • Тест, тест, тест : То, что он работает в одном почтовом клиенте, не означает, что он работает в других. Большой плюс - Outlook 2007. Он использует слово для рендеринга HTML (вздох).

Это далеко не полный список, но большинство людей должны быть на правильном пути.

5 голосов
/ 09 февраля 2010

Встроенные CSS и таблицы - подумайте о веб-разработке около 2000 года, и все будет в порядке. У монитора кампании есть отличный ресурс, с которым могут работать почтовые клиенты. Также используйте http://www.emailonacid.com/ для тестирования - избавляет от необходимости посылать множество тестов.

3 голосов
/ 09 февраля 2010

Я тоже нашел это руководство очень полезным: Руководство по поддержке CSS в почтовых клиентах .

0 голосов
/ 28 мая 2010

Это тоже хорошо, поэтому посмотрите, какой встроенный CSS поддерживается в каком браузере электронной почты: http://www.campaignmonitor.com/css/

Я также рекомендую litmusapp (Google!). Это хороший инструмент для проверки вещей.

...